Membuat HTML5 Sederhana Permainan di Canvas

Cara Membuat HTML5 Sederhana Permainan di Canvas

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, coba untuk render it before it's loaded will throw a DOM error.

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;

sekarang kita tentukan beberapa variabel yang akan kita gunakan nanti. hero mulai diatur dengan speed yang mana lebih cepat ia akan berpindah pada pixels per second. monster tidak akan berpindah jadi itu akan punya kordinat. terakhir, monstersCaught menampilkan berapa monster yang pemain telah dapatkan.

4. Input Pemain

// Handle keyboard controls

var keysDown = {};

addEventListener("keydown", function (e) {

        keysDown[e.keyCode] = true;

}, false);

addEventListener("keyup", function (e) {

        delete keysDown[e.keyCode];

}, false);

Sekarang untuk memasukkan pengendalian. Ini mungkin bagian pertama yang akan membawa developer yang datang dari web development background. Hal penting yang perlu diingat adalah kami tidak ingin menganjurkan untuk memasukkan peristiwa sesungguhnya ketika itu terjadi. Pada banyak web, mungkin sesuai untuk memulai animasi atau meminta data real ketika user memasukkan input. Tetapi pada tahap ini, kita ingin game kita masuk akal dan semata-mata tinggal di suatu tempat untuk mempermudah kontrol ketika dan jika sesuatu terjadi. Untuk alasan itu kita hanya ingin menampilkan input pengguna nanti.

Untuk menyelesaikan ini kita punya sebuah variabel keysDown yang menampilkan banyak kejadian keyCode. Jika kode kunci adalah objek, pengguna hanya menekan kunci itu, sederhana!

5. New Game

// Reset the game when the player catches a monster

var reset = function () {

        hero.x = canvas.width / 2;

        hero.y = canvas.height / 2;

        // Throw the monster somewhere on the screen randomly

        monster.x = 32 + (Math.random() * (canvas.width - 64));

        monster.y = 32 + (Math.random() * (canvas.height - 64));

};

fungsi reset disebut awal game baru, atau level atau apapun yang anda suka menyebutnya. Ini menempatkan hero (player) ditengah layar dan dimanapun secara acak.

6. Perbarui Objek

// Update game objects

var update = function (modifier) {

        if (38 in keysDown) { // Player holding up

               hero.y -= hero.speed * modifier;

        }

        if (40 in keysDown) { // Player holding down

               hero.y += hero.speed * modifier;