Tajuk: Bina mobile game HTML siri 2

Genius Corner Siri 42

Oleh: Fariz Gaskin

 

Salam ceria buat semua pembaca budiman. Pada minggu ini, kita akan mempelajari latihan HTML bahagian sebelas. Kali ini, kita akan bina sebuah lagi mobile game HTML5.

 

Jika anda pernah main game Snake di dalam telefon Nokia, maka anda pasti faham cara permainan game ini. Kita akan bina sebuah game yang hampir sama, menggunakan HTML dan JavaScript. Sukacita dimaklumkan, ruangan HTML5 akan diganti dengan ruangan JavaScript bermula Januari 2018.

 

Tanpa membuang masa, mari kita mulakan latihan minggu ini.

 

Latihan

 

Langkah 1: Buka mana-mana text editor yang anda miliki seperti Notepad (Windows) atau TextEdit (MacOS) dan tuliskan kod aturcara berikut.

 

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>Simple Canvas Game</title>

</head>

<body>

<script type=”text/javascript”>

// Create the canvas

var canvas = document.createElement(“canvas”);

var ctx = canvas.getContext(“2d”);

canvas.width = 512;

canvas.height = 480;

document.body.appendChild(canvas);

// Background image

var bgReady = false;

var bgImage = new Image();

bgImage.onload = function () {

bgReady = true;

};

bgImage.src = “images/background.png”;

// Hero image

var heroReady = false;

var heroImage = new Image();

heroImage.onload = function () {

heroReady = true;

};

heroImage.src = “images/hero.png”;

// Monster image

var monsterReady = false;

var monsterImage = new Image();

monsterImage.onload = function () {

monsterReady = true;

};

monsterImage.src = “images/monster.png”;

// Game objects

var hero = {

speed: 256 // movement in pixels per second

};

var monster = {};

var monstersCaught = 0;

// Handle keyboard controls

var keysDown = {};

addEventListener(“keydown”, function (e) {

keysDown[e.keyCode] = true;

}, false);

addEventListener(“keyup”, function (e) {

delete keysDown[e.keyCode];

}, false);

// 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));

};

// 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;

}

if (37 in keysDown) { // Player holding left

hero.x -= hero.speed * modifier;

}

if (39 in keysDown) { // Player holding right

hero.x += hero.speed * modifier;

}

// Are they touching?

if (

hero.x <= (monster.x + 32)

&& monster.x <= (hero.x + 32)

&& hero.y <= (monster.y + 32)

&& monster.y <= (hero.y + 32)

) {

++monstersCaught;

reset();

}

};

// Draw everything

var render = function () {

if (bgReady) {

ctx.drawImage(bgImage, 0, 0);

}

if (heroReady) {

ctx.drawImage(heroImage, hero.x, hero.y);

}

if (monsterReady) {

ctx.drawImage(monsterImage, monster.x, monster.y);

}

// Score

ctx.fillStyle = “rgb(250, 250, 250)”;

ctx.font = “24px Helvetica”;

ctx.textAlign = “left”;

ctx.textBaseline = “top”;

ctx.fillText(“Goblins caught: ” + monstersCaught, 32, 32);

};

// The main game loop

var main = function () {

var now = Date.now();

var delta = now – then;

update(delta / 1000);

render();

then = now;

// Request to do this again ASAP

requestAnimationFrame(main);

};

// Cross-browser support for requestAnimationFrame

var w = window;

requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// Let’s play this game!

var then = Date.now();

reset();

main();

</script>

</body>

</html>

 

Langkah 2: Save hasil kerja anda tadi dengan nama goblin_catcher_canvas_game.html ke dalam folder Genius Corner seperti latihan terdahulu.

 

Langkah 3: Hasilkan sebuah folder baru bernama “images” dan masukkan tiga imej yang akan diguna sebagai latar, karekter utama dan musuh utama. Bagi latihan ini, contoh nama imej yang disebutkan ialah “background.jpg”, “hero.png” dan “monster.png”.

 

Langkah 4: Double-click fail tadi untuk melihat hasilnya melalui pelayar web.

Semakan

 

Di dalam kod aturcara tadi, kita telah menghasilkan beberapa fungsi yang memegang tugas berbeza dalam sesebuah game. Bagi memudahkan anda, kebanyakan aktiviti dan objek penting telah dimasukkan ke dalam empat fungsi utama sahaja.

 

Reset, update, render, main

 

Fungsi main() bertindak sebagai constructor utama (sila rujuk artikel Genius Corner berkenaan Java). Melalui fungsi ini, fungsi update() dan render() akan dipanggil semasa game dimulakan.

 

Fungsi update() bertindak mengemaskini markah pemain setiap kali watak utama bersentuhan dengan watak musuh. Manakala fungsi render() bertindak memaparkan imej latar, watak utama dan watak musuh menggunakan library Canvas.

 

Melalui fungsi reset() pula bertindak memaparkan semula musuh di kedudukan yang berbeza selepas paparan terdahulu hilang setiap kali ia disentuh watak utama.

Pegawai LHDN sedang mengikuti bengkel Android

 

Soalan

 

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubahsuai kod aturcara tadi supaya:

 

  1. Paparkan lebih dari satu watak musuh dari jenis yang sama.
  2. Paparkan dua jenis watak musuh yang berbeza.
  3. Lebarkan paparan latar.

 

Jika anda ingin mendapatkan khidmat nasihat percuma berkenaan pengaturcaraan HTML5, sila emailkan kepada farizgaskin@gmail.com dan kami akan jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!