Komponen Game
Tambahkan kotak merah ke area permainan:
Tambahkan Komponen
Buat konstruktor komponen, yang memungkinkan Anda menambahkan komponen ke area game.
Konstruktor objek disebut
component, dan kami membuat komponen pertama kami, yang disebut myGamePiece:
Contoh
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
Komponen memiliki properti dan metode untuk mengontrol penampilan dan gerakannya.
bingkai
Untuk membuat game siap beraksi, kami akan memperbarui tampilan 50 kali per detik, yang sangat mirip dengan bingkai dalam film.
Pertama, buat fungsi baru bernama updateGameArea().
Di myGameAreaobjek, tambahkan interval yang akan menjalankan updateGameArea()fungsi setiap milidetik ke-20 (50 kali per detik). Tambahkan juga fungsi yang disebut clear(), yang membersihkan seluruh kanvas.
Di componentkonstruktor, tambahkan fungsi yang disebut
update(), untuk menangani gambar komponen.
Fungsi updateGameArea()memanggil clear()dan update()metode.
Hasilnya adalah komponen digambar dan dihapus 50 kali per detik:
Contoh
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
}
Membuatnya Bergerak
Untuk membuktikan bahwa kotak merah ditarik 50 kali per detik, kami akan mengubah posisi x (horizontal) sebesar satu piksel setiap kali kami memperbarui area permainan:
Contoh
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Mengapa Membersihkan Area Game?
Tampaknya tidak perlu membersihkan area permainan di setiap pembaruan. Namun, jika kita mengabaikan
clear()metode ini, semua pergerakan komponen akan meninggalkan jejak di mana posisinya di bingkai terakhir:
Contoh
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Ubah Ukuran
Anda dapat mengontrol lebar dan tinggi komponen:
Contoh
Buat persegi panjang 10x140 piksel:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
Ubah Warnanya
Anda dapat mengontrol warna komponen:
Contoh
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
Anda juga dapat menggunakan nilai warna lain seperti hex, rgb, atau rgba:
Contoh
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Ubah Posisi
Kami menggunakan koordinat x dan y untuk memposisikan komponen ke area permainan.
Sudut kiri atas kanvas memiliki koordinat (0,0)
Arahkan mouse ke area permainan di bawah untuk melihat koordinat x dan y:
Anda dapat memposisikan komponen di mana pun Anda suka di area permainan:
Contoh
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Banyak Komponen
Anda dapat menempatkan komponen sebanyak yang Anda suka di area permainan:
Contoh
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new component(75, 75, "red", 10, 10);
yellowGamePiece = new component(75, 75, "yellow", 50, 60);
blueGamePiece = new component(75, 75, "blue", 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
Komponen Bergerak
Buat ketiga komponen bergerak ke arah yang berbeda:
Contoh
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}