创建画布，验证浏览器兼容性我就省去了，也很简单网上有代码。

var canctx = document.getElementById("can"); var ctx =canctx.getContext("2d");

然就是蛇对象

var snake={ arrx:[100,110,120],//默认横坐标和长度（数组长度就是蛇的默认长度） arry:[200,200,200],//默认纵坐标 movedirection:2,//上下左右方向（0是左，1是上，2是右，3是下。默认往右） behavior:function () { ctx.fillStyle="red"; for(var i=0;i<this.arrx.length;i++) { ctx.fillRect(this.arrx[i], this.arry[i], 10, 10); } } }

食物

var food={ x:10, y:10, show:function () { getx=Math.floor(Math.random()*391),gety=Math.floor(Math.random()*391); this.x = getx%10==0?getx:Math.floor(getx/10)*10; this.y = gety%10==0?gety:Math.floor(gety/10)*10; chack(this.x,this.y); ctx.fillStyle="#fff"; ctx.fillRect(this.x,this.y,10,10); } }

移动

DrawSnake() { (snake.arrx[snake.arrx.length-1]==canctx.width-10){//最后一个蛇身体(蛇是由一个一个的10*10的正方形构成)的x坐标等于画布宽度减10就说明撞墙了 died(); }else{ snake.arrx.push(snake.arrx[snake.arrx.length - 1] + 10);//x坐标累加10（数组里添加新的坐标,蛇的移动就是添加新的坐标在最后一位删除第一个坐标） snake.arry.push(snake.arry[snake.arry.length - 1]);//y坐标不变 } }(snake.arrx[snake.arrx.length-1]==0){ died(); }else{ snake.arrx.push(snake.arrx[snake.arrx.length - 1] - 10); snake.arry.push(snake.arry[snake.arry.length - 1]); } }(snake.arry[snake.arry.length-1]==0){ died(); }else{ snake.arrx.push(snake.arrx[snake.arrx.length - 1]); snake.arry.push(snake.arry[snake.arry.length - 1] - 10); } }(snake.arry[snake.arry.length - 1] == canctx.height-10) { died(); } else { snake.arrx.push(snake.arrx[snake.arrx.length - 1]); snake.arry.push(snake.arry[snake.arry.length - 1] + 10); } } EatFood(); ctx.fillStyle="red"; for(var i=0;i<snake.arrx.length;i++) { ctx.fillRect(snake.arrx[i], snake.arry[i], 10, 10); } EatSelf(snake.arrx[snake.arrx.length - 1],snake.arry[snake.arry.length - 1]); ctx.clearRect(snake.arrx[0],snake.arry[0],10,10); snake.arrx.splice(0,1); snake.arry.splice(0,1); }

控制方向

Controldirection(e) { switch(e.keyCode){ case 37://左 snake.movedirection=0; DrawSnake(); break; case 39://右 snake.movedirection=2; DrawSnake(); break; case 38://上 snake.movedirection=1; DrawSnake(); break; case 40://下 snake.movedirection=3; DrawSnake(); break; } }

吃到食物

EatFood() { (snake.arrx[snake.arrx.length-1]==food.x&&snake.arry[snake.arry.length-1]==food.y){ if(snake.movedirection==0) {//吃到食物后添加数组的长度 snake.arrx.unshift(snake.arrx[0]+10); snake.arry.unshift(snake.arry[0]); food.show(); }else{ snake.arrx.unshift(snake.arrx[0]); snake.arry.unshift(snake.arry[0] + 10); food.show(); } } }(snake.arrx[snake.arrx.length-1]==food.x&&snake.arry[snake.arry.length-1]==food.y){ if(snake.movedirection==1) { snake.arrx.unshift(snake.arrx[0] - 10); snake.arry.unshift(snake.arry[0]); food.show(); }else{ snake.arrx.unshift(snake.arrx[0]); snake.arry.unshift(snake.arry[0]-10); food.show(); } } } }

吃到自己

EatSelf(x,y) { for(var i=0;i<snake.arrx.length-1;i++) { (snake.arry[i] == y && x-snake.arrx[i] == 10) { died(); } }(snake.arrx[i] == x && y-snake.arry[i] == 10) { died(); } }(snake.arry[i] == y && snake.arrx[i]-x == 10) { died(); } }(snake.arrx[i] == x && snake.arry[i]-y == 10) { died(); } } } }

died() { alert("你挂了！"); clearInterval(snakemove); document.removeEventListener("keydown", Controldirection); return; }