Canvas贪吃蛇
创建画布，验证浏览器兼容性我就省去了，也很简单网上有代码。
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 () { //随机在画布中生成食物 var 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); } }
移动
//绘制移动的蛇 function DrawSnake() { if(snake.movedirection==2){//往右跑 if(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坐标不变 } }else if(snake.movedirection==0){//往左跑 if(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]); } }else if(snake.movedirection==1){//往上跑 if(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); } }else {//往下跑 if(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); }
控制方向
//控制方向 function 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; } }
吃到食物
//吃到食物 function EatFood() { if(snake.movedirection==0||snake.movedirection==1){//向左或向上时 //蛇头(坐标最后一个值)的x、y坐标和食物的x、y坐标相等 //蛇移动的方向不同，判断条件也不同（自己可以在纸上先画出蛇在不同方向与食物接触的时候的x、y坐标的对应关系是怎么样的来确认判断条件） if(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(); } } }else{//向右或向下时 if(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(); } } } }
吃到自己
//吃到自己 function EatSelf(x,y) { for(var i=0;i<snake.arrx.length-1;i++) { if(snake.movedirection==0) {//向左 //条件和吃到食物类似就是判断舌头的坐标和身体的左边，同理不同方向移动时条件也是不一样的 if (snake.arry[i] == y && x-snake.arrx[i] == 10) { died(); } }else if(snake.movedirection==1){//向上 if (snake.arrx[i] == x && y-snake.arry[i] == 10) { died(); } }else if(snake.movedirection==2){//向右 if (snake.arry[i] == y && snake.arrx[i]-x == 10) { died(); } }else{//向下 if (snake.arrx[i] == x && snake.arry[i]-y == 10) { died(); } } } }
//停止计时器事件和移除方向事件 function died() { alert("你挂了！"); clearInterval(snakemove); document.removeEventListener("keydown", Controldirection); return; }
document.addEventListener("keydown", Controldirection);
food.show();
snake.behavior();
var snakemove =setInterval(function () {
DrawSnake();
},300);
基本功能大概就是这样。可能还不算完美，后面有时间继续优化一下！
