原生JavaScript+canvas实现贪吃蛇小游戏

效果图&＃xff1a;

button{outline: none;border: none;
}
.snake-wrap{width: 600px;height: 720px;margin: 50px auto;background: limegreen;
}
.info-bd{height: 60px;
}
.info-bd .info-item{float: left;width: 50%;height: 100%;text-align: center;;font-size: 20px;line-height: 60px;color: #fff;
}
.game-bd{height: 600px;background: #000;
}
.btn-group{height: 60px;
}
.btn-group .btn{width: 33.3%;float: left;height: 100%;
}
.btn-group .btn button{background: transparent;width: 100%;height: 100%;color: #fff;font-size: 20px;cursor: pointer;
}
.btn-group .btn button:hover{background: lime;
}
.btn-group .btn button:disabled{background: lightgreen;
}


window.onload &＃61; function(){var can &＃61; document.getElementById(&＃39;gameCan&＃39;),oStart &＃61; document.getElementsByClassName(&＃39;j-start&＃39;)[0],oPause &＃61; document.getElementsByClassName(&＃39;j-pause&＃39;)[0],oReset &＃61; document.getElementsByClassName(&＃39;j-reset&＃39;)[0],oSecond &＃61; document.getElementsByClassName(&＃39;second&＃39;)[0],oScore &＃61; document.getElementsByClassName(&＃39;score&＃39;)[0],ctx &＃61; can.getContext(&＃39;2d&＃39;),//画布widthcWidth &＃61; ctx.canvas.width,//画布HeightcHeight &＃61; ctx.canvas.height,//半径r &＃61; 10,//游戏用时second &＃61; 0;//定时器t &＃61; null,//得分score &＃61; 0;//用时时间定时器st &＃61; null,//每次移动增加的坐标size &＃61; r * 2,//初始蛇的长度bodyNum &＃61; 3;//实例化var s &＃61; new Snake();//键盘事件document.onkeydown &＃61; function(){var e &＃61; e || window.event;var code &＃61; e.keyCode;if(code &＃61;&＃61;&＃61; 38){s.dir &＃61; s.dir !&＃61;&＃61; "DOWN" ? "UP" : "DOWN";}else if(code &＃61;&＃61;&＃61; 40){s.dir &＃61; s.dir !&＃61;&＃61; "UP" ? "DOWN" : "UP";}else if(code &＃61;&＃61;&＃61; 37){s.dir &＃61; s.dir !&＃61;&＃61; "RIGHT" ? "LEFT" : "RIGHT";}else if(code &＃61;&＃61;&＃61; 39){s.dir &＃61; s.dir !&＃61;&＃61; "LEFT" ? "RIGHT" : "LEFT";}}oPause.onclick &＃61; function(){pause.call(this);}oReset.onclick &＃61; function(){reset.call(this);}oStart.onclick &＃61; function(){start.call(this);}//构造函数function Body(x,y,c){this.x &＃61; x;//横坐标this.y &＃61; y;//纵坐标this.c &＃61; c;//color}Body.prototype.draw &＃61; function(){//绘制圆形填充色ctx.fillStyle &＃61; this.c;//开始绘制ctx.beginPath();//绘制圆形ctx.arc(this.x &＃43; r,this.y &＃43; r,r,0,2 * Math.PI,false);//填充ctx.fill();}//绘制蛇function Snake(){this.snakeArr &＃61; [];this.bodySize &＃61; this.snakeArr.length || bodyNum;//初始方向this.dir &＃61; &＃39;DOWN&＃39;,cWidth &＃61; cWidth,cHeight &＃61; cHeight;for(var i &＃61; 0;i snakeArr[1].y){y &＃61; snakeArr[0].y &＃43; size;}else if(snakeArr[0].y snakeArr[1].x){x &＃61; snakeArr[0].x &＃43; size;}else if(snakeArr[0].x }

想要获得更多资料的  请微信搜索公众号 【热血科技】&＃xff0c;关注一下即可。