Kali ini akan di uraikan langkah - langkah yang
dibutuhkan dalam pembuatan game canvas ini adalah :
1. Buat Canvas
// Create the
canvas
var canvas =
document.createElement("canvas");
var ctx =
canvas.getContext("2d");
canvas.width =
512;
canvas.height =
480;
document.body.appendChild(canvas);
hal pertama
yang harus kita lakukan adalah membuat elemen canvas . saya melakukan ini di JavaScript selain HTML
untuk mendemonstrasikan bagaimana cara mudah ini disempurnakan. Pertama kita
punya elemen, lalu kita dapat referensi isinya, atur dimensi dan lampirkan pada
badan dokumen.
2. Masukkan
Gambar
// Background
image
var bgReady =
false;
var bgImage =
new Image();
bgImage.onload
= function () {
bgReady = true;
};
bgImage.src =
"images/background.png";
sebuah game
membutuhkan penggambaran! Jadi mari masukkan beberapa gambar. Saya ingin ini
sesederhana mungkin jadi masukkan sebuah Image yang sudah dibunggus indah atau
sebagainya. bgReady digunakan untuk mengetahui canvas ketika sudah aman untuk
digambar. Kita lakukan ini pada setiap tiga gambar, kita butuhkan background,
hero
and monster.
3. Objek
Permainan
// Game objects
var hero = {
speed: 256, // movement in pixels per second
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var
monstersCaught = 0;
