Good night my friend everything !! This time I will share an
example of simple games that are created using HTML script that is a game of
snakes, there may be a pal who need to study or reference, just download the
example simple game using HTML script, Open Notepad ++ you then create a new file with the name snake_html5_game then write the following script:
view plainprint?
<!DOCTYPE html>
<html>
<head>
view plainprint?
</head>
<body>
<!-- HTML5
canvas -->
<canvas id="canvas"
width="450" height="450"></canvas>
</body>
/html>
Explanation :
We create a canvas for the location of our game later with a
size of 450 x 450
Javascript
Now to add the java script java script in script above, put
in between the <head> </ head> so that your script now be like
this:
view plainprint?
<!DOCTYPE html>
<html>
<head>
<!-- Jquery
-->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script
type="text/javascript" >
$(document).ready(function() {
var
canvas = $("#canvas")[0];
var ctx =
canvas.getContext("2d");
var w
= $("#canvas").width();
var h
= $("#canvas").height();
var cw
= 10;
var
d;
var
food;
var
score;
var
snake_array; // make cell array to make the snake
function init()
{
d
= "right"; //default direction
create_snake();
create_food(); // making food for snakes
//score game
score = 0;
if
(typeof game_loop != "undefined")
clearInterval(game_loop);
game_loop = setInterval(paint,
60);
}
init();
function create_snake()
{
var length = 5;
snake_array = [];
for (var i = length - 1; i >= 0; i--)
{
// make snake horizontally from the left
snake_array.push({x: i, y: 0});
}
}
//make
food
function create_food()
{
food = {
x: Math.round(Math.random() * (w - cw) / cw),
y: Math.round(Math.random() * (h - cw) / cw),
};
}
// Body
colored snake
function paint()
{
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
//
Create a movement for snakes.
var nx = snake_array[0].x;
var ny =
snake_array[0].y;
if
(d == "right")
nx++;
else if (d == "left")
nx--;
else if (d == "up")
ny--;
else if (d == "down")
ny++;
//
Check guesses wall
if
(nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny,
snake_array))
{
//restart game
init();
return;
}
//Check collision with food
if
(nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
//membuat makanan baru
create_food();
}
else
{
var tail = snake_array.pop();
tail.x = nx;
tail.y = ny;
}
snake_array.unshift(tail);
for (var i = 0; i < snake_array.length; i++)
{
var c = snake_array[i];
paint_cell(c.x, c.y);
}
// food coloring
paint_cell(food.x, food.y);
//
Coloring score game
var score_text = "Score: " + score;
ctx.fillText(score_text, 5, h - 5);
}
function paint_cell(x, y)
{
ctx.fillStyle = "blue";
ctx.fillRect(x * cw, y * cw, cw, cw);
ctx.strokeStyle = "white";
ctx.strokeRect(x * cw, y * cw, cw, cw);
}
function check_collision(x, y, array)
{
for (var i = 0; i < array.length; i++)
{
if (array[i].x == x &&
array[i].y == y)
return true;
}
return false;
}
// Keyboard
control snake
$(document).keydown(function(e) {
var key = e.which;
if
(key == "37" && d != "right")
d = "left";
else if (key == "38" && d != "down")
d = "up";
else if (key == "39"
&& d != "left")
d = "right";
else if (key == "40" && d != "up")
d = "down";
})
})
</script>
</head>
<body>
<!-- HTML5 -->
<canvas
id="canvas" width="450"
height="450"></canvas>
</body>
</html>
Now save your file with the extension .html example: snake
html5 game.html.
Now that you've finished HTML5 game you can try it by
clicking 2x on the file, it is advisable to open the Chrome browser or Mozilla,
do not use IE hehheeh KLW in IE is not the way I had not surprised.
