Permainan Kanvas
Elemen HTML <canvas>ditampilkan sebagai objek persegi panjang di halaman web:
Kanvas HTML
Elemen <canvas>ini sangat cocok untuk membuat game dalam HTML.
Elemen <canvas>ini menawarkan semua fungsi yang Anda butuhkan untuk membuat game.
Gunakan JavaScript untuk menggambar, menulis, menyisipkan gambar, dan banyak lagi, ke file
<canvas>.
.getContext("2d")
Elemen <canvas>memiliki objek bawaan, yang disebut getContext("2d")objek, dengan metode dan properti untuk menggambar.
Anda dapat mempelajari lebih lanjut tentang <canvas>elemen, dan
getContext("2d")objek, di Tutorial Kanvas kami .
Memulai
Untuk membuat game, mulailah dengan membuat area game, dan siapkan untuk menggambar:
Contoh
function startGame() {
myGameArea.start();
}
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]);
}
}
Objek myGameAreaakan memiliki lebih banyak properti dan metode nanti dalam tutorial ini.
Fungsi startGame()memanggil metode
start()objek
myGameArea.
Metode
start()ini membuat <canvas>elemen dan menyisipkannya sebagai simpul anak pertama dari <body>elemen tersebut.