Dasar membuat game HTML sederhana menggunakan Javascript

AvatarOleh:
Dulu programmer web membuat game menggunakan flash, namun flash kemudian mati sebelum saya sempat mempelajarinya. Itu zaman sudah lewat hari ini zamannya HTML5. Jadi saya mencoba mengutak atik mata pelajaran dasar HTML dan mulai belajar membuat game.

contoh dasar membuat game HTML sederhana


Pernah kan kalian mendengar game sederhana bernama Flappy Bird? Juga sebelum sempat saya memainkannya, game tersebut sudah tidak populer lagi. Namun karena sempat menjadi sangat terkenal, saya juga berfikir gimana kalau membuat game tersebut menggunakan HTML?

Ya hanya bisa melalui HTML dan Saya sendiri tidak tahu bagaimana mengkonversikannya ke platform Android he he he...

Ternyata juga bisa. Artinya jika kalian bisa menggunakan HTML untuk buat tombol tombol animasi, berarti sekurang kurangnya kalian juga bisa membuat game menggunakan HTML. Walau harus memahami perintah dan logikanya.

Perhatikan Javascript berikut:
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
myGamePiece = new component(30, 30, "yellow", 10, 120);
myScore = new component("30px", "Consolas", "white", 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);
},
stop : function() {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
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.x += this.speedX;
this.y += this.speedY;
}
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])) {
myGameArea.stop();
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, "red", x, 0));
myObstacles.push(new component(10, x - height - gap, "red", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].speedX = -1;
myObstacles[i].newPos();
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 moveup() {
myGamePiece.speedY = -1;
}

function movedown() {
myGamePiece.speedY = 1;
}

function moveleft() {
myGamePiece.speedX = -1;
}

function moveright() {
myGamePiece.speedX = 1;
}

function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<div style="text-align:center;width:480px;">
<button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">ke atas</button><br><br>
<button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">ke kiri</button>
<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">ke kanan</button><br><br>
<button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">ke bawah</button>
</div> 
Tidak usah di pelototi, yang penting kalian dapat gambaran dan perhatikan tombol tombol yang saya tulis dengan warna merah. Untuk memainkannya tombol tersebut harus kalian tekan agar objek pengganti flappy bird yang warna kuning tidak menabrak rintangan.

Untuk cotoh DEMO dan sekaligus memainkannya kalian dapat menekan tombol di bawah:
Baiklah berikut dasar dasar pembuatan game agar paling sedikit dapat memberikan gambaran:

Elemen game di HTML.

1. Kanvas Game <canvas>

<canvas> adalah bidang ruang yang dapat di gambar di dalam HTML, elemen canvas ini sama saja seperti yang umumnya kita pergunakan pada aplikasi web biasa misalnya untuk blogging. Namun bedanya disini adalah elemen memiliki objek bawaan, diantara contohnya ada yang di sebut getContext("2d")

Elemen HTML <canvas> digunakan untuk menggambar grafik, dengan cepat, melalui skrip (biasanya JavaScript).

Elemen <canvas> hanya wadah untuk grafik. Kalian harus menggunakan skrip untuk benar-benar menggambar grafik. Canvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, teks, dan menambahkan gambar.

Jadi dalam hal ini untuk menggambar objek ke dalam canvas maka kita harus menggunakan Javascript yakni dengan cara menulis, menambahkan gambar dst.


2. Pergerakan Game

Nah setelah membuat elemen canvas dan menggambar objek sebuah game harus memiliki pergerakan, jadi Kita harus menambahkan instruksi pergerakan baik maju, mundur, naik, bergerak ke kanan, bergerak ke kiri. Lalu tambahkan instruksi kecepatannya juga.

3. Suara game

Ketika Kita harus menambahkan suara dan musik ke dalam game maka gunakan elemen <audio> HTML5 .

Untuk mempelajarinya kalian harus belajar dan berlatih menggunakan HTML, CSS dan Javascript.

4. Gravitasi Game

Supaya tampak real dan alami terkadang suatu game memiliki gaya yang menarik komponen game ke satu arah, seperti gravitasi yang menarik objek ke tanah.

Untuk menambahkan fungsionalitas ini ke konstruktor komponen kita, pertama-tama tambahkan properti gravitasi, yang menyetel gravitasi saat ini.  Kemudian tambahkan properti gravitySpeed, yang meningkat setiap kali kita memperbarui frame, contoh:

function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
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;
}
}
Ada percepatan yang harus di hitung dimana objek semakin cepat pada saat berada semakin dekat dengan permukaan tanah.

5. Gambar 

Nah yang tidak kalah penting adalah onjek gambar sebagai 'tokoh tokoh' di dalam permainan yang akan di mainkan oleh pengguna.

Kita dapat menambahkan gambar dan menyimpannya dan lalu menambahkan URL atau alamat linknya ke dalam komponen game yang telah kita tulis.

Demikian langkah atau gambaran dasar membuat game HTML yang dapat saya bagikan hari ini. Semoga bermanfaat.


Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

5 Komentar untuk "Dasar membuat game HTML sederhana menggunakan Javascript"


  1. Ambil ah buat dipasang di blogku, tapi kodenya panjang, gabisa sekali tap langsung tersalin, simpan dalam textarea Del, biar sekali tap langsung tersalin 😭😭🙏

    BalasHapus
    Balasan

    1. Pelajari dasarnya dulu:

      1. Canvas game
      2. Perakan game
      3. Suara game
      4. Gravitasi game
      5. Image/gambar game..

      Hapus
  2. Keren.....sangat bermanfaat.Ditengah kebosanan bisa dicobain nih

    BalasHapus

Silahkan berkomentar sesuai dengan topik kita ya...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel