游戏效果如图：
实现代码如下：
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>贪吃蛇游戏</title> </head> <body> <h1>石健涛</h1> <div id="gameBox" style="text-align: center;"> <canvas id="game" width="450" height="450" style="border: 1px solid #666;"> </canvas> <script type="text/javascript"> var c=document.getElementById("game"); var cxt=c.getContext("2d"); var width=15; for(var i=0;i<30;i++) { cxt.strokeStyle="black"; cxt.beginPath(); cxt.moveTo(0,i*width); cxt.lineTo(450,i*width); cxt.closePath(); cxt.stroke();//将路径绘2到面板 } for(var i=0;i<30;i++) { cxt.strokeStyle="black"; cxt.beginPath(); cxt.moveTo(i*width,0); cxt.lineTo(i*width,450); cxt.closePath(); cxt.stroke();//将路径绘2到面板 } function Cell(x,y,f){ this.x=x; this.y=y; this.f=f; } function Food(x,y){ this.x=x; this.y=y; } var snake=[]; var length=6; var speed=300; var food=new Food(15,15);// var food=new Food(15,15); for(var i=0;i<length;i++){ snake[i]=new Cell(i,0,-1); } function draw(){ cxt.clearRect(0,0,450,450);// for(var i=0;i<snake.length;i++){ // cxt.fillStyle="royalblue"// cxt.beginPath();// if(i==snake.length-1){ // cxt.fillStyle="darkgoldenrod";// }// cxt.rect(snake[i].x*width,snake[i].y*width,width,width);// cxt.closePath();// cxt.fill(); cxt.fillStyle="aqua" cxt.beginPath(); cxt.rect(food.x*width,food.y*width,width,width); cxt.closePath(); cxt.fill(); var head=snake[snake.length-1]; if(head.x==food.x&&head.y==food.y){ cxt.fillStyle="darkgoldenrod"; cxt.beginPath(); cxt.rect(food.x*width,food.y*width,width,width); cxt.closePath(); cxt.fill(); var newCell=new Cell(head.x,head.y,head.f); switch(newCell.f){ case 1:newCell.x--;break; case -1:newCell.x++;break; case 2:newCell.y--;break; case -2:newCell.y++;break; } snake[snake.length]=newCell; randFood(); } for(var i=0;i<snake.length;i++){ cxt.fillStyle="royalblue" cxt.beginPath(); if(i==snake.length-1){ cxt.fillStyle="darkgoldenrod"; } cxt.rect(snake[i].x*width,snake[i].y*width,width,width); cxt.closePath(); cxt.fill(); } } function randFood(){ food.x=Math.ceil(Math.random()*28)+1; food.y=Math.ceil(Math.random()*28)+1; for (var i=0;i<snake.length;i++) { if(food.x==snake[i].x&&food.y==snake[i].y){ randFood(); break; } } } draw(); document.οnkeydοwn=function(e){ var code=e.keyCode;// var head=snake[snake.length-1];// var newCell=new Cell(head.x,head.y,head.f);console.log("键值"+code);
var direction=0; switch(code){ case 37:direction=1;break; case 38:direction=2;break; case 39:direction=-1;break; case 40:direction=-2;break; } var head=snake[snake.length-1]; if(direction!=0&&(head.f+direction)!=0){ moveSnake(direction); } } function moveSnake(direction){ var head=snake[snake.length-1]; if(!direction){ direction=head.f; } var newSnake=[]; var head=snake[snake.length-1]; var newCell=new Cell(head.x,head.y,head.f); for(var i=1;i<snake.length;i++){ newSnake[i-1]=snake[i]; } newSnake[snake.length-1]=newCell; newCell.f=direction;// head.f=direction; switch(direction){ case 1:newCell.x--;break; case -1:newCell.x++;break; case 2:newCell.y--;break; case -2:newCell.y++;break; } snake=newSnake; checkGameover(); draw(); } function checkGameover(){ var head=snake[snake.length-1]; if(head.x>=30||head.y>=30||head.x<0||head.y<0){ alert("撞墙！！！"); window.location.reload(); } for(var i=0;i<snake.length-1;i++){ if(snake[i].x==head.x&&snake[i].y==head.y){ alert("太血腥！咬到自己了！"); window.location.reload(); } }}
var autoRun=setInterval(moveSnake,speed); </script> </div> </body></html>