1.
[Image]e6~0%qpa46er843uqj$0z ' h.jpg
? 2. [File] snake.html
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>the Snake game</title>
<script type= "Text/javascript" >
function log (msg) {
Console.log (msg);
}
</script>
<body>
<canvas id= "Canvas" >
Your Browser cannot support HTML5.
</canvas>
<script type= "Text/javascript" >
This.onkeydown = function (e) {
var code = E.keycode;
if (code = = 37)
Changemove (3);
if (code = = 38)
Changemove (0);
if (code = = 39)
Changemove (1);
if (code = = 40)
Changemove (2);
}
Function Changemove (val) {
if (move = = 0 | | move = 2) && (val = = 2 | | val = = 0))
Return;http://www.huiyi8.com/hunsha/chuangyi/?
if (move = = 3 | | move = 1) && (val = = 1 | | val = = 3))
return; creative wedding photos
move = Val;
}
function Dead (snake) {
Hit the wall
Switch (move) {
Case 0:
if (Snake[0] < 0) {
Log (' Up: ' + snake[0]);
return true;
}
Break
Case 1:
If (snake[0]% 20 = = 0) {
Log (' right: ' + snake[0]);
return true;
}
Break
Case 2:
if (Snake[0] >= 400) {
Log (' Down: ' + snake[0]);
return true;
}
Break
Case 3:
if ((Snake[0] + 1)% 20 = = 0) {
Log (' Left: ' + snake[0]);
return true;
}
Break
Default
Break
}
Bite yourself
for (var i = 1; i < snake.length; i + +) {
if (snake[0] = = Snake[i]) {
Log (' self: ' + snake[0]);
return true;
}
}
return false;
}
Rand=-1 says food is eaten and requires food to be regenerated
function run (rand) {
Ctx.fillstyle = ' #000000 ';
Ctx.clearrect (100, 100, 300, 300);
Canvas container
var container = new Array (400);
for (var i = 0; i < container.length; i++) {
Container[i] = 0;
}
for (var i in snake) {
Container[snake[i]] = 1;
}
Generate food
if (rand = =-1) {
var rands = [];
for (var i in container) {
if (container[i] = = 0)
Rands.push (i);
}
Rand = Rands[parseint (Math.random () * rands.length)];
}
Put into the canvas container
Container[rand] = 1;
for (var i = 0; i < container.length; i++) {
if (container[i] = = 0) {
Ctx.fillrect (+ SW * (i% 20),
+ SW * parseint ((I/20)), SW, SW);
Ctx.strokerect (+ SW * (i% 20),
+ SW * parseint ((I/20)), ten, SW);
} else {
Ctx.strokerect (+ SW * (i% 20),
+ SW * parseint ((I/20)), SW, SW);
}
}
var slen = snake.length;
var shead = snake[0], send = snake[slen-1];
Ctx.fillstyle = ' #000000 ';
Ctx.fillrect (+ SW * (shead), + SW * parseint ((SHEAD/20)), SW, SW);
Ctx.fillrect (+ SW * (shead), + SW * parseint ((SHEAD/20)), SW, SW);
Ctx.fillstyle = ' #ff0000 ';
Ctx.beginpath ();
Ctx.arc ((+ SW * (shead)) + SW/2, (+ SW * parseint ((SHEAD/20))) + SW/2, SW/2, 0, Math.PI * 2, false);
Do not close the path path will persist, of course, can also use this feature to make unexpected effects
Ctx.closepath ();
Ctx.fill ();
Ctx.fillstyle = ' #000000 ';
Ctx.strokerect (+ SW * (shead), + SW
* parseint ((SHEAD/20)), SW, SW);
for (var i = slen-1; i > 0; i--) {
Snake[i] = snake[i-1];
}
Switch (move) {
Case 0:
Snake[0] = shead-20;
Break
Case 1:
Snake[0] = shead + 1;
Break
Case 2:
Snake[0] = shead + 20;
Break
Case 3:
Snake[0] = shead-1;
Break
Default
Break
}
Death
if (Dead (snake)) {
Alert (' Game Over ');
return false;
}
The snake eats the food, increases the number of moves, reaches the tail of the snake, and puts the food into the serpent array.
if (eat && ms++ = = Slen) {
ms = 0;
Snake.push (send);
Eat = false;
}
Eat food, regenerate food
if (snake[0] = = Rand) {
Eat = true;
Rand =-1;
}
SetTimeout (' Run (' + Rand + ') ', speed);
}
Log (snake);
for (var i = 0; i <; i + +)
var canvas = document.getElementById (' canvas ');
Canvas.width = 400;
Canvas.height = 400;
var ctx = Canvas.getcontext (' 2d ');
var snake = []; Snake Object
Snake.push (205);
Snake.push (204);
Snake.push (203);
Snake.push (202);
Snake.push (201);
Move: Moving mode [0, 1, 2, 3] = [up, right, down, left]
MS: The number of times a snake has been eaten after food is determined to increase the length of the snake array.
Eat: Does the snake eat food?
SW: Width of snake block
Speed: MS
var move = 1, ms = 0, eat = false, SW = ten, speed = 50;
Run (-1);
Log (canvas);
</script>
</body>
Simple HTML5 snake
