Berikut ini adalah tutorial untuk membuat game pada HTML5. Berikut cara-caranya:
1. Buat Canvas
dibawah ini adalah kode programnya:
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
maksud
dari kode tersebut ialah membuat layer atau lahan untuk kita membuat
game dengan tinggi dan lebar yang telah kita tentukan.
2. Memasukan Gambar
dibawah ini adalah kode programnya:
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
maksud dari kode tersebut ialah memasukan gambar background.png yang ada pada folder images pada website kita.
3. Membuat Object Hero dan Monster
dibawah ini adalah kode programnya:
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero.png";
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster.png";
var hero = {
speed: 256
};
var monster = {};
var monstersCaught = 0;
maksud
dari kode ini ialah membuat object hero dan monster yang menggunakan
gambar hero.png dan monster.png yang ada pada folder image juga, lalu
mendeklarasikan kecepatan dalam pergerakan hero dan mendeklarasikan
nilai permainan.
4.Pengaturan Tombol Permainan
dibawah ini adalah kode programnya:
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
dalam
sebuah permainan tentunya kita diperlukan tombol kontrol untuk
melakukan aksi dari object kita tersebut, oleh karena itu kode di atas
ialah kode yang membuat object merespon atas tombol arah yang kita
tekan.
5. Peraturan Lokasi Object Permainan
dibawah ini adalah kode programnya:
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
berikut
ini adalah kode jika hero mengenai monster, maka hero akan di tempatkan
kembali pada tengah-tengah dari canvas dan posisi dari monster di
random kembali agak posisinya tidak monoton.
6.Pengaturan Arah Object Hero
dibawah ini adalah kode programnya:
var update = function (modifier) {
if (38 in keysDown) {
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) {
hero.y += hero.speed * modifier;
}
if (37 in keysDown) {
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) {
hero.x += hero.speed * modifier;
}
kode
diatas ialah kode yang menerangkan pergerakan dari object hero saat
tombol arah pada keyboard di tekan, maka posisi x dan y hero akan
bergerak dengan kecepatan yang telah di deklarasikan sebelumnya.
7. Pengaturan Nilai Permainan
dibawah ini adalah kode programnya:
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
kode
diatas menerangkan suatu kondisi jika object hero kita telah mengenai
object monster maka nilai dari monstersCought akan bertambah dan akan
memanggil fungsi reset yang akan mereset posisi hero dan merandom posisi
monster.
8. Render Object
dibawah ini adalah kode programnya:
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);
}
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};
kode
diatas merupakan pengaturan tampilan dari object-object kita tersebut,
dan memberikan tampilan nilai pada canvas kita tersebut dengan
pengaturan font seperti yang ada pada kode program diatas.
9. Melakukan Pengulangan Game
dibawah ini adalah kode programnya:
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
pada kode diatas menerangkan perintah saat permainan di ulang dan melakukan render ulang.
10. Memulai Permainan
dibawah ini adalah kode programnya:
reset();
var then = Date.now();
setInterval(main, 1);
diatas merupakan perintah untuk memulai permainan dengan pengaturan-pengaturan yang telah kita buat diatas.
Sumber : http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
Senin, 30 April 2012
Manual Book Hockey Game
Sebelumnya saya telah
memposting bagaimana storyboard atau rancangan tampilan pada game hockey ini.
Pada postingan kali ini saya ingin membuat manual book yang berguna untuk
menjelaskan cara memainkan permainan .
Pertama, pada game
tersebut akan menggunakan tiga buah objek yang terlihat seperti gambar 1.
Gambar 1 |
Selanjutnya, user
langsung memainkan permainan hockey tersebut. User 1 akan mengendalikan kotak
yang berada dibawah, sedangkan user 2 akan mengendalikan kotak yang berada di
atas. Cara mengendalikan kotak bawah dalap menggunakan arah kanan dan kiri,
sedangkan pada kotak atas dapat menggunakan Ctrl dan Space. Tampilan tersebut
dapat dilihat pada Gambar 2.
Gambar 2 |
Selanjutnya jika bola
melewati kotak bagian atas maka Player 1 atau User 1 akan menang. Sedangkan jika
bola melewati kotak bagian bawah maka Player 2 atau User 2 akan menang,
terlihat seperti gambar 3.
Gambar 3 |
Storyboard
Games tersebut diberi
nama dengan Hockey Games. Pada Hockey games tersebut terdapat Garis Kanan dan
Kiri sebagai pembatas, Kotak Atas dan Bawah dan Bola. Jika bola menyentuh Kotak
atas Garis maka bola tersebut akan memantul secara tersu-menerus. Permainan
akan selesai jika bola tersebut melewati Kotak Atas ataupun Bawah.
Jika bola melewati
Kotak Bawah maka Player 1 akan menang, namun jika bola melewati Kotak Atas maka
Player 2 akan menang.
Langganan:
Postingan (Atom)