Have paid little attention to html5, feeling choose HTML has gradually become a trend, want to know. Is looking for a game to learn, finish the game feels very closely the html5 and javascript, if the js is not very good. Estimated need to cram the js, this is just personal advice, not necessarily accurate. Another is, thinking and logic to particularly clear, otherwise write games may be very painful.

snake, the main functions: 1, the snake's movement 2, 3, change the direction of the serpent placed food 4, add more 5, how to hang.

write games for the first time, for the first time to write it was very hard to take html5. Done, share to you. Communicate with each other... Don't understand or have Suggestions, you can leave a message to me... Code is very short, just 60.

but this is a semi-finished products, such as writing done. To update the

  code is as follows:  


<! DOCTYPE html>
<Html>
<Body>
<MyCanvas canvas id="" width=" 400 "height=" 400 "style=" border: 1 px solid # c3c3c3;" ></canvas>
<The script type="text/javascript" >
var c=document. GetElementById (" myCanvas ");
var time=160;
var//snake speed be sad etContext chtistina georgina rossetti.british poetess CXT=(" 2 d ");
var x=y=8;
var a=0;//
var t=20 food coordinates;//give long
var map=[];//record snake run path
var size=8;//the snake body unit size
var direction=2;//1 up 2 0 right under the left 3
the interval=window. The setInterval (set_game_speed, time);//move snake
function set_game_speed () {//move snake
the switch (direction) {
case 1: y=y - size; Break;
case 2: x=x + size; Break;
case 0: x=x - size; Break;
case 3: y=y + size; Break;
}
the if (x> 400 | | y> 400 | | x<0 | | y<0) {
alert (" you hang up and continue to work hard! The reason for failure: hit a brick wall... "); Window. The location. Reload ();

} for (var I=0; i the if (parseInt (map [I]. X)==x & & parseInt (map [I] y)==y) {
alert (" you hang up and continue to work hard! The reason for failure: hit himself... "); Window. The location. Reload ();

}}
the if (map. Length> t) {//to keep more of length
var cl=map. The shift ();//remove the first array, and returns the original element
CXT. ClearRect (cl (' x '), cl (' y '), the size, size);
};
map. Push ({' x 'x,' y ': y});//add data to the original array
at the end of CXT. The fillStyle="# 006699";//fill color within
CXT. StrokeStyle="# 006699";//border color
CXT. FillRect (x, y, size, size);//draw a rectangle
the if (x==(a * 8) & & (8) a *==y) {//eat food
rand_frog (); T++;

}}
the document. The onkeydown=function (e) {//change the direction of the snake
var code=e.k eyCode - 37;
the switch (code) {
case 1: the direction=1; Break;//
in case 2: direction=2; Break;
case 3://right direction=3; Break;//
case 0: under direction=0; Break;//left

}}

//put random food function rand_frog () {
a=math.h ceil (Math) random () * 50);
CXT. FillStyle="# 000000";//fill color within
CXT. StrokeStyle="# 000000";//border color
CXT. FillRect (a * 8, a * 8, 8, 8);//draw a rectangle
}

//put random food rand_frog ();
</script>
</body>
</html>


This concludes the body part