js贪吃蛇
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>snake</title> </head> <body> <canvas id="game" width="450px" height="450px" style="border:1px solid blue; margin: 30px auto;display:block;"></canvas> <script type="text/javascript"> //画布包含30个格子 var canvas = document.getElementById("game"); var ctx = canvas.getContext("2d"); var width = 15; /* for(var i = 0 ; i < 30 ; i ++){ ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(0,i*width); ctx.lineTo(450,i*width); ctx.closePath(); ctx.stroke(); } for(var i = 0 ; i < 30 ; i ++){ ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(i*width,0); ctx.lineTo(i*width,450); ctx.closePath(); ctx.stroke(); } */ //定义格子的类 x , y 为坐标， f 为方向 // 1 向左， -1 向右 ， 2 向上 ， -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 = 200; var food = new Food(15,15); for(var i= 0 ; i < length ; i ++){ snake[i] = new Cell(i,0,-1); } //监听键盘按下事件 document.onkeydown = function(e){ var code = e.keyCode; 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 newHead = new Cell(head.x,head.y,head.f); newHead.f = direction; //将尾巴丢掉，把剩下的放到新的数组中 for(var i = 1 ; i < snake.length ; i ++){ newSnake[i - 1] = snake[i]; } switch(direction){ case 1:newHead.x -- ;break; case 2:newHead.y -- ;break; case -1:newHead.x ++ ;break; case -2:newHead.y ++ ;break; } newSnake[newSnake.length] = newHead; snake = newSnake; gameOver() draw(); } function gameOver(){ var head = snake[snake.length - 1]; //边界检查 if(head.x > 29 || head.y > 29 || head.x < 0 || head.y < 0 ){ alert("Game Over ~"); window.location.reload(); } //自己不能撞到自己 for(var i = 0 ; i < snake.length - 1 ; i ++){ if(snake[i].x == head.x && snake[i].y == head.y){ alert("Game Over ~"); window.location.reload(); } } } //初始化时绘制 draw(); function draw(){ ctx.clearRect(0,0,450,450); //绘制食物 ctx.fillStyle = "green"; ctx.beginPath(); ctx.rect(food.x*width,food.y*width,width,width); ctx.closePath(); ctx.fill(); var head = snake[snake.length-1]; if(food.x == head.x && food.y == head.y){ var newHead = new Cell(head.x,head.y , head.f); switch(newHead.f){ case 1:newHead.x -- ;break; case 2:newHead.y -- ;break; case -1:newHead.x ++ ;break; case -2:newHead.y ++ ;break; } snake[snake.length] = newHead; randomFood(); } //绘制蛇 for(var i = 0 ;i <snake.length ;i ++){ var cell = snake[i]; ctx.fillStyle = "gray"; if(i == snake.length - 1){ ctx.fillStyle = "red"; } ctx.beginPath(); ctx.rect(cell.x*width,cell.y*width,width,width); ctx.closePath(); ctx.fill(); } } //随机产生食物的坐标 function randomFood(){ food.x = Math.ceil(Math.random()*28)+1; food.y = Math.ceil(Math.random()*28)+1; } //自动移动 var autoRun = setInterval(moveSnake,speed); </script> </body> </html>
