Mari Belajar Bina mobile game HTML!!! (Genius Corner Siri 38)

Tajuk: Bina mobile game HTML

Genius Corner Siri 38

Oleh: Fariz Gaskin

 

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

 

Jika anda pernah main game Flappy Bird, maka anda pasti faham cara permainan game ini. Kita akan bina sebuah game yang sama menggunakan HTML. Sama seperti latihan HTML terdahulu, kita akan gunakan potensi tag <canvas> secara maksimum.

 

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>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1; }

</style>

</head>

<body onload=”startGame()”>

<script>

 

var myGamePiece;

var myObstacles = [];

var myScore;

 

function startGame() {

myGamePiece = new component(30, 30, “red”, 10, 120);

myGamePiece.gravity = 0.05;

myScore = new component(“30px”, “Consolas”, “black”, 280, 40, “text”);

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

this.frameNo = 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, type) {

this.type = type;

this.score = 0;

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.gravity = 0;

this.gravitySpeed = 0;

this.update = function() {

ctx = myGameArea.context;

if (this.type == “text”) {

ctx.font = this.width + ” ” + this.height;

ctx.fillStyle = color;

ctx.fillText(this.text, this.x, this.y);

} else {

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

} }

this.newPos = function() {

this.gravitySpeed += this.gravity;

this.x += this.speedX;

this.y += this.speedY + this.gravitySpeed;

this.hitBottom(); }

this.hitBottom = function() {

var rockbottom = myGameArea.canvas.height – this.height;

if (this.y > rockbottom) {

this.y = rockbottom;

this.gravitySpeed = 0;

} }

this.crashWith = function(otherobj) {

var myleft = this.x;

var myright = this.x + (this.width);

var mytop = this.y;

var mybottom = this.y + (this.height);

var otherleft = otherobj.x;

var otherright = otherobj.x + (otherobj.width);

var othertop = otherobj.y;

var otherbottom = otherobj.y + (otherobj.height);

var crash = true;

if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {

crash = false; }

return crash;

} }

 

function updateGameArea() {

var x, height, gap, minHeight, maxHeight, minGap, maxGap;

for (i = 0; i < myObstacles.length; i += 1) {

if (myGamePiece.crashWith(myObstacles[i])) {

return;

} }

myGameArea.clear();

myGameArea.frameNo += 1;

if (myGameArea.frameNo == 1 || everyinterval(150)) {

x = myGameArea.canvas.width;

minHeight = 20;

maxHeight = 200;

height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);

minGap = 50;

maxGap = 200;

gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);

myObstacles.push(new component(10, height, “green”, x, 0));

myObstacles.push(new component(10, x – height – gap, “green”, x, height + gap)); }

for (i = 0; i < myObstacles.length; i += 1) {

myObstacles[i].x += -1;

myObstacles[i].update(); }

myScore.text=”SCORE: ” + myGameArea.frameNo;

myScore.update();

myGamePiece.newPos();

myGamePiece.update(); }

 

function everyinterval(n) {

if ((myGameArea.frameNo / n) % 1 == 0) {return true;}

return false; }

 

function accelerate(n) {

myGamePiece.gravity = n; }

</script>

<br>

<button onmousedown=”accelerate(-0.2)” onmouseup=”accelerate(0.05)”>ACCELERATE</button>

<p>Use the ACCELERATE button to stay in the air</p>

<p>How long can you stay alive?</p>

</body>

</html>

 

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

 

Langkah 3: 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 tiga fungsi utama sahaja.

 

Melalui fungsi startGame(), karekter utama, markah dan kanvas game diperbaharui steiap kali game dimulakan. Melalui fungsi component() pula, tiang penghalang dibina secara rawak setiap saat bagi memberikan cabaran yang tidak dijangka oleh pemain.

 

Akhir sekali, fungsi updateGameArea() diguna untuk melukis tiang penghalang pada kanvas game dengan sela masa sesaat di antara setiap satunya.

 

 

 

Pelajar UNITEN mengikuti bengkel Android

 

Soalan

 

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

 

  1. Ganti objek merah dengan imej.
  2. Kurangkan jumlah halangan.
  3. Tambah jumlah halangan.

 

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila emelkan kepada farizgaskin@gmail.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *