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);

基本功能大概就是这样。可能还不算完美，后面有时间继续优化一下！

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Canvas贪吃蛇

关键词：