<!DOCTYPE html>
<html>
<head>
<title>Membuat Game dengan HTML5</title>
</head>
<body>
<canvas id='c'></canvas>
<script src="gameLoop.js"></script>
</body>
</html>
code di atas simpan dengan nama index.html
var width = 250, //width of the canvas
height = 350, //height of the canvas
c = document.getElementById('c'), //canvas itself
gLoop, //sleep thread
ctx = c.getContext('2d'); //ctx supaya bisa pake fungsi primitif
c.width = width; //ngubah lebar canvas jadi 250
c.height = height; //ngubah tinggi canvas jadi 350
var clear = function(){
ctx.fillStyle = '#000000'; //warna
ctx.beginPath(); //awal ngegambar
ctx.rect(0, 0, width, height); //gambar kotak
ctx.closePath(); //tutup gambar
ctx.fill(); //isi dengan warna yg telah ditentukan
};
var a1 = 20 , a2 = 330,
b1 = 35 , b2 = 280,
c1 = 50 , c2 = 330;
var drawShip = function(){
ctx.fillStyle = '#0000FF';
ctx.beginPath();
ctx.moveTo(a1, a2); // ketitik a1, a2
ctx.lineTo(b1, b2); // gerak k titik b1, b2
ctx.lineTo(c1, c2); // dst
ctx.lineTo(a1, a2); // ...
ctx.closePath();
ctx.fill();
};
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
var gameInput = function() {
if (37 in keysDown) {
a1 -= 5;
b1 -= 5;
c1 -= 5;
}
if (39 in keysDown) {
a1 += 5;
b1 += 5;
c1 += 5;
}
};
var GameLoop = function(){
clear();
drawShip();
gameInput();
//fillText(text, x, y, maxWidth)
ctx.fillText("Game Space Invader", 10, 10, 100);
gLoop = setTimeout(GameLoop, 1000 / 50);
};
GameLoop();
code di atas simpan dengan nama gameLoop.js
Membuat shooter game pada html 5
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar