Dengan HTML5 kita dapat melakukan berbagai macam animasi multimedia yang beragam jika kita bisa mengkombinasikannya dengan CSS dan JavaScript. Sebagai contoh sederhana pada kali ini kita akan membuat game snake dengan menggabungkan HTML5 dan JavaScript.
window.addEventListener("keydown", moveSnake, false);
var game_over = false;
var snake = new Array(4);
var snakeLen = 4;
var dir = "right";
var food = "";
var level = new Array();
var total_height = 640;
var total_width = 640;
var lvl_width = 20;
var lvl_height = 20;
var speed = 16;
snakeHeadImage = new Image();
snakeHeadImage.src = "resources/head.png";
snakeBodyImage = new Image();
snakeBodyImage.src = "resources/body.png";
snakeTailImage = new Image();
snakeTailImage.src = "resources/tail.png";
//food
foodImage = new Image();
foodImage.src = "resources/food.png";
create_snake();
create_food();
for(i = 0; i < lvl_width; i++)
{
level[i] = new Array(lvl_height);
for(var ii = 0; ii < lvl_height; ii++)
{
level[i][ii] = -1;
}
}
window.requestAnimFrame = (function(callback)
{
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback)
{
window.setTimeout(callback, 1000);
};
})();
var the_date = new Date();
var test1 = the_date.getTime();
var stamp = the_date.getTime() + 250;
function animate()
{
the_date = new Date();
test1 = the_date.getTime();
if(stamp <= test1)
{
move_snake();
the_date = new Date();
stamp = the_date.getTime() + 250;
}
if(game_over == false)
{
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
displayText("Score: " + (snakeLen - 4));
display();
}
else
{
displayText("You so Sux.. Game Over homie");
}
//context.drawImage(aniblock, aniblock_x, aniblock_y);
// request new frame
requestAnimFrame(function()
{
animate();
});
}
function displayText(what)
{
context.font = "30px Arial";
context.fillText(what, 50, 50);
}
function checkSnakeCollide()
{
if( snake[0].xx == food.xx && snake[0].yy == food.yy )
{
create_food();
return true;
}
else
{
//if head moving right
if(dir == "right")
{
if(snake[0].xx > lvl_width - 1)
{
game_over = true;
}
}
else if(dir == "left")
{
if(snake[0].xx < 0)
{
game_over = true;
}
}
else if(dir == "up")
{
if(snake[0].yy <= -1)
{
game_over = true;
}
}
else if(dir = "down")
{
if(snake[0].yy >= lvl_height)
{
game_over = true;
}
}
for(i = 2; i < snakeLen; i++)
{
if( (snake[0].xx == snake[i].xx) && (snake[0].yy == snake[i].yy) )
{
game_over = true;
break;
}
}
return false;
}
}
setTimeout(function() {
animate();
}, 1000);
function moveSnake(e)
{
switch(e.keyCode)
{
case 37:
if(dir != "right")
{
dir = "left";
}
break;
case 38:
if(dir != "down")
{
dir = "up";
}
break;
case 39:
if(dir != "left")
{
dir = "right";
}
break;
case 40:
if(dir != "up")
{
dir = "down";
}
break;
}
}
function checkAllowMove(x, y)
{
if(x < 32)
{
var x_index = 0;
}
else
{
var x_index = Math.round(x / 32);
}
if(y < 32)
{
var y_index = 19;
}
else
{
var y_index = (total_height / 32) - Math.round(y / 32);
}
if(level[x_index][y_index] == -1)
{
return true;
}
else
{
return false;
}
}
function create_food()
{
var x = 0;
var y = 0;
var recreate = false;
do
{
recreate = false;
x = Math.floor((Math.random() * (lvl_width-1)));
y = Math.floor((Math.random() * (lvl_height-1)));
for(i = 0; i < snakeLen; i++)
{
if( (snake[i].xx == x) && (snake[i].yy == y) )
{
recreate = true;
break;
}
}
}while(recreate == true);
food = {xx: x, yy: y};
}
function create_snake()
{
//var x = Math.floor((Math.random() * (lvl_width-1)));
//var y = Math.floor((Math.random() * (lvl_height-1)));
snake[0] = {xx: 4, yy: 1};
snake[1] = {xx: 3, yy: 1};
snake[2] = {xx: 2, yy: 1};
snake[3] = {xx: 1, yy: 1};
dir = "right";
}
function move_snake()
{
var temp_x = 0;
var temp_y = 0;
var temp_xx = 0;
var temp_yy = 0;
var swap = true;
//move snake forward
for(var ii = 0; ii < snakeLen; ii++)
{
if(ii == 0)
{
temp_x = snake[ii].xx;
temp_y = snake[ii].yy;
//if head moving right
if(dir == "right")
{
snake[0] = {xx: (snake[0].xx + 1), yy: snake[0].yy};
}
else if(dir == "left")
{
snake[0] = {xx: (snake[0].xx - 1), yy: snake[0].yy};
}
else if(dir == "up")
{
snake[0] = {xx: snake[0].xx, yy: (snake[0].yy - 1)};
}
else if(dir = "down")
{
snake[0] = {xx: snake[0].xx, yy: (snake[0].yy + 1)};
}
if(checkSnakeCollide())
{
snake.push({xx: snake[(snake.length-1)].xx, yy: snake[(snake.length-1)].yy});
snakeLen++;
}
}
else
{
if(swap == true)
{
temp_xx = snake[ii].xx;
temp_yy = snake[ii].yy;
snake[ii] = {xx: temp_x, yy: temp_y};
swap = false;
}
else
{
temp_x = snake[ii].xx;
temp_y = snake[ii].yy;
snake[ii] = {xx: temp_xx, yy: temp_yy};
swap = true;
}
}
}
}
function display()
{
for(var i = 0; i < snakeLen; i++)
{
if(i == 0)
{
switch (dir)
{
case "left":
context.drawImage(snakeHeadImage, (snake[i].xx * 32), (snake[i].yy * 32) );
break;
case "right":
drawRotatedImage(snakeHeadImage,(snake[i].xx * 32), (snake[i].yy * 32), 180);
break;
case "up":
drawRotatedImage(snakeHeadImage,(snake[i].xx * 32), (snake[i].yy * 32), 90);
break;
case "down":
drawRotatedImage(snakeHeadImage,(snake[i].xx * 32), (snake[i].yy * 32), 270);
break;
}
}
else if(i == (snakeLen - 1) )
{
//following left
if(snake[i].xx > snake[i-1].xx)
{
context.drawImage(snakeTailImage, (snake[i].xx * 32), (snake[i].yy * 32) );
}
//following right
else if(snake[i].xx < snake[i-1].xx)
{
drawRotatedImage(snakeTailImage,(snake[i].xx * 32), (snake[i].yy * 32), 180);
}
//following up
else if(snake[i].yy > snake[i-1].yy)
{
drawRotatedImage(snakeTailImage,(snake[i].xx * 32), (snake[i].yy * 32), 90);
}
//following down
else if(snake[i].yy < snake[i-1].yy)
{
drawRotatedImage(snakeTailImage,(snake[i].xx * 32), (snake[i].yy * 32), 270);
}
}
else
{
context.drawImage(snakeBodyImage, (snake[i].xx * 32), (snake[i].yy * 32) );
}
}
context.drawImage(foodImage, (food.xx * 32), (food.yy * 32) );
}
function drawRotatedImage(image, x, y, angle)
{
var TO_RADIANS = Math.PI/180;
// save the current co-ordinate system
// before we screw with it
context.save();
// move to the middle of where we want to draw our image
context.translate(x, y);
// rotate around that point, converting our
// angle from degrees to radians
context.rotate(angle * TO_RADIANS);
// draw it up and to the left by half the width
// and height of the image
context.drawImage(image, -(image.width/2), -(image.height/2));
// and restore the co-ords to how they were when we began
context.restore();
}
Selamat Bermain
No comments:
Post a Comment