Front js--Snake Game

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.