Also is the front end, unfortunately I do not the game front end, some small regrets.
However, relying on their own a little more than the average learning ability, or squeeze out a lot of time to self-study some gadgets (let's call him a gadget).
They are groping to do, the code is very simple, just work half a month, very helpless. Give yourself some clues about how to keep some memories.
(Because the company is the Hong Kong side, so are the traditional system, but only use my crappy English comments ....) More helpless is to take a very name for yourself--snow)
Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" ><HTML><HEAD><TITLE> Snake game Test </TITLE></HEAD><style> div{width:20px; height:20px; Position:absolute; BORDER:1PX solid black; } a{FONT-FAMILY:TMB; font-size:18px; Color:green; }. normal{Background:white; }. snaker{background:red; }. food{Background:black; }</style><script>/* @date: 2014-07-21 @author: snow.he*/var rows=20, cols=20, arr =[]; var map_top =100, map_left=80; var snake={dir:39,snake_body:[]}; var firstlen = 5; var firstdir = 39; var firstrows = 5; var snow; var Len; var isplay=true;//share functionfunction $ (str) {return document.getElementById (str);} Initfunction init () {initmap (); Initsnake (); InitData (); Showsnake (); Setnewfood (); Changemove ();} function InitData (){var Firstlev = 1; var firstscore = 0; var continue_sta = false; if (Localstorage.lev&&localstorage.score) {if (Confirm ("Continue last time?")) {Continue_sta = true; }} if (Continue_sta) {$ ("Lev"). Text =localstorage.lev; $ ("score"). Text = Localstorage.score; }else{$ ("Lev"). Text = Firstlev; $ ("score"). Text = Firstscore; }}function Initmap () {for (i=0;i<rows;i++) {arr[i]=[]; for (j=0;j<cols;j++) {arr[i][j]=document.createelement (' div '); arr[i][j].style.top=map_top+i*24+ ' px '; arr[i][j].style.left=map_left+j*24+ ' px '; Arr[i][j].classname= ' normal '; Document.body.appendChild (Arr[i][j]); }}}/* left-a:65,left:37,4:100 right-d:68,right:39,6:102 up-w:87,up:38,8:104 down-s:83,down:40,2:98 */fu Nction Showsnake () {//Console.log (snake); for (Var i=0;i<snake.snake_body.length;i++) {arr[snake.snake_body[i][0]][snake.snake_body[i][1]].classname = "Snaker"; }}function Initsnake () {snake.dir = Firstdir; Snake.snake_body =[]; for (Var i=0;i<firstlen;i++) {var temp =[]; Temp.push (firstrows); Temp.push (i); Snake.snake_body.push (temp); }}//if The snake eat a food, take a new foodfunction Setnewfood () {var x, y; X =math.floor (Math.random () *rows); Y =math.floor (Math.random () *cols); Arr[x][y].classname = "Food";} Clear Mapfunction Clearsnake () {for (Var i=0;i<rows;i++) {for (Var j=0;j<cols;j++) {if (arr[i][j].cl Assname = = "Snaker") {arr[i][j].classname = "normal"; }}}//the second function to clear Map,but has bug/* for (Var i=0;i<snake.snake_body.length;i++) { Arr[snake.snake_body[i][0]][snake.snake_body[i][1]-1].classname = "normal"; Console.log (snake.snake_body[i][0]+ "&&" + (snake.snake_body[i][1]-1)); }*/}//Check snake can movefunction Iscanmoveit (diR,len) {var status =true; Switch (dir) {case 39:if (snake.snake_body[len-1][1] >= cols-1) {//arr[parseint (Snake.sna Ke_body[len-1][0]) +1][snake.snake_body[len-1][1]].classname = = "Snaker"//Console.log (snake.snake_body[len-1 ][0]+ "&:" +len-1+ "," +snake.snake_body[len-1][0 "); Status =false; };break; Case 37:if (Snake.snake_body[len-1][1] <= 0) {status =false; };break; Case 38:if (Snake.snake_body[len-1][0] <= 0) {status =false; };break; Case 40:if (snake.snake_body[len-1][0] >= rows-1) {status=false; };break; } return status; Snake ' s body movefunction snakebodymove (len) {var midx,midy; var midx2,midy2; Midx = snake.snake_body[len-1][0]; Midy = snake.snake_body[len-1][1]; For (Var i=parseint (len-1); i>0;i--) {Midx2 = Midx; midY2 = Midy; Midx = snake.snake_body[i-1][0]; Midy = snake.snake_body[i-1][1]; Snake.snake_body[i-1][0] =MIDX2; SNAKE.SNAKE_BODY[I-1][1] =midy2; }}//snake eat Foodfunction eatfood (x, y) {var temp=[]; Temp.push (x); Temp.push (y); Arr[x][y].classname = "Snaker"; Snake.snake_body.push (temp); Setnewfood (); len = snake.snake_body.length; Keepscore ();} Check snake can eat foodfunction iseatfood (dir) {len = snake.snake_body.length; var isfood = false; try{switch (dir) {case 39:if (Arr[snake.snake_body[len-1][0]][snake.snake_body[len-1][1]+1].classnam E = = "Food") {Eatfood (snake.snake_body[len-1][0],snake.snake_body[len-1][1]+1); };break; Case 37:if (Arr[snake.snake_body[len-1][0]][snake.snake_body[len-1][1]-1].classname = = "Food") { Eatfood (snake.snake_body[len-1][0],snake.snake_body[len-1][1]-1); };break; Case 38: if (Arr[snake.snake_body[len-1][0]-1][snake.snake_body[len-1][1]].classname = = "Food") {Eatfood (snake. SNAKE_BODY[LEN-1][0]-1,SNAKE.SNAKE_BODY[LEN-1][1]); };break; Case 40:if (Arr[snake.snake_body[len-1][0]+1][snake.snake_body[len-1][1]].classname = = "Food") { Eatfood (snake.snake_body[len-1][0]+1,snake.snake_body[len-1][1]); };break; }}catch (e) {gameover (); }}//keep the player ' scorefunction Keepscore () {$ ("score"). Text = parseint ($ ("score"). Text) +100; Localstorage.snakescore = $ ("score"). Text; if (parseint ($ ("score"). Text) >= parseint ($ ("Lev"). Text) *900) {Keeplev (); }}//keep the player ' s levelfunction Keeplev () {$ ("Lev"). Text = parseint ($ ("Lev"). Text) +1; Localstorage.snakelev = $ ("Lev"). Text; Changemove ();} Change the snake move Velocityfunction changemove () {if (snow) {clearinterval (snow); } var V = parseint ($ ("Lev"). Text); if (v<7) { Snow = SetInterval (Movefront, (500-v*50)); }else{snow = setinterval (movefront,180); }}//Snake movefunction Movefront () {len = snake.snake_body.length; var iscanmove; Iscanmove = Iscanmoveit (Snake.dir,len); if (iscanmove) {Iseatfood (snake.dir); Snakebodymove (len); Switch (snake.dir) {case 39:snake.snake_body[len-1][1]++; Break Case 37:snake.snake_body[len-1][1]--; Break Case 38:snake.snake_body[len-1][0]--; Break Case 40:snake.snake_body[len-1][0]++; Break }} else{Gameover (); } clearsnake (); Showsnake ();} Handle the player ' s Keywindow.onkeydown =function (ev) {var oevent=ev| | Event var canuser = true; if (oevent.keycode<=40 && oevent.keycode>=37) {switch (oevent.keycode) {case 37: if (Snake.dir = =) {Canuser = false;}; Break Case 38:if (Snake.dir = =) {Canuser = false;}; Break Case 39:if (Snake.dir = = Notoginseng) {Canuser = false;}; Break Case 40:if (Snake.dir = =) {Canuser = false;}; Break } if (canuser) {snake.dir = Oevent.keycode; }} if (Oevent.keycode = =) {if (isplay) {clearinterval (snow); Isplay = false; }else{Changemove (); Isplay = true; }}}//game overfunction Gameover () {clearinterval (snow); if (Confirm ("Is you continue?")) {init (); }}</script><body onload= "init ()" ><div id= "testttt" style= "left:100px;top:20px;height:30px;width : 420px;border:0px; " > <div style= "width:150px;border:0px;" >lv:<a id= "Lev" >1</a></div> <div style= "width:240px;left:150px;border:0px;" >score:<a id= "Score ">00</a></div></div></BODY></HTML>
They are all working hours, not learning from work, no way, people are too lazy.
Long way, hoping to go a little farther. You can record your growth here.