html5实现贪吃蛇源代码.doc

Insert title here#myCanvasborder:1px solid #f00;var canvas = document.getElementById(myCanvas);var ctx = canvas.getContext(2d);var w = 15;/格子宽、高var snaLen = 6; /初始长度var snake = ; /身体长度for(var i = 0; i snaLen; i+)snakei = new cell(i , 0 , 39);var head = snakesnaLen - 1; /头部/初始食物var foodx = Math.ceil(Math.random() * 28 + 1);var foody = Math.ceil(Math.random() * 28 + 1);var food = new Food(foodx , foody);/食物function Food(x , y)this.x = x;this.y = y;return this;/身体function cell(x , y , d)this.x = x;this.y = y;this.d = d;return this;/动作function draw()ctx.clearRect(0,0,450,450);/画布局/ for(var i = 0; i 30; i+)/ ctx.strokeStyle = #ccc;/线条颜色/ ctx.beginPath();/ ctx.moveTo(0,i*w);/ ctx.lineTo(450,i*w);/ ctx.moveTo(i*w,0);/ ctx.lineTo(i*w,450);/ ctx.closePath();/ ctx.stroke();/ /画蛇身for(var j = 0; j snake.length; j+)ctx.fillStyle = black;if(j = snake.length - 1)ctx.fillStyle = red;ctx.beginPath();ctx.rect(snakej.x*w , snakej.y*w , w , w);ctx.closePath();ctx.fill();ctx.stroke();/出现食物drawFood();/吃到食物if(head.x = food.x & head.y = food.y)initFood();food = new Food(foodx , foody);/重新出现食物drawFood();/增加蛇的长度 有些小瑕疵，蛇身增长时应该是身体增长，而不是在蛇头上增长var newCell = new cell(head.x , head.y , head.d);switch(head.d)case 40 : newCell.y+ ; break;/下case 39 : newCell.x+ ; break;/右case 38 : newCell.y- ; break;/上case 37 : newCell.x- ; break;/左snakesnake.length = newCell;head = newCell;/head = /随机初始化食物function initFood()foodx = Math.ceil(Math.random() * 28 + 1);foody = Math.ceil(Math.random() * 28 + 1);for(var i = 0; i =37 & keyCode =40)moveSnake(keyCode);/控制蛇移动方向function moveSnake(keyCode)var newSnake = ;var newCell = new cell(head.x , head.y , head.d);/头/身体for(var i = 1; i = 30 | head.y= 30 | head.x 0 | head.y 0)alert(Game over!);window.location.reload();/咬到自己for(var i = 0 ; i snake.length - 1 ; i+)if(head.x = snakei.x & head.y = snakei.y)alert(Game over!);window.location.re