js贪吃蛇游戏实现思路和源码

本文实例为大家分享了js贪吃蛇游戏的相关代码，供大家参考，具体内容如下

 
 
 
*{margin:0; padding:0;}
header {
 display: block;
 margin: 0 auto;
 width: 500px;
 text-align: center;
}
header h1 {
 font-family: Arial;
 font-weight: bold;
}
header #newGameButton {
 display: block;
 margin: 20px auto;
 width: 100px;
 padding: 10px 10px;
 background-color: #8f7a66;
 font-family: Arial;
 color: white;
 border-radius: 10px;
 text-decoration: none;
}
header #newGameButton:hover {
 background-color: #9f8b77;
}
header p {
 font-family: Arial;
 font-size: 25px;
 margin: 20px auto;
}
canvas{
 display:block; 
 border:medium double black;
 margin:4px auto;
}
 


 

 贪吃蛇小游戏
 New Game
 
score:0
 
 
 Your browser doesn't support the canvas element.
 
 

效果图：

思路：

function newgame(){
 重置蛇和分数的数据；
 清除interval；
 初始化画布；
 画一条蛇；
 放置食物；
 使用定时器（setInterval）使蛇移动（move函数）；
}
function move(){
 根据方向改变蛇头下一格将要到达的位置；
 判断游戏是否结束，以及显示结束的原因（包含输赢）；
 蛇移动一格（moveIn函数）；
}
对键盘的方向键作监控，当改变方向时，修改全局变量DIR的值（用于存储方向）；
function moveIn(){
 在蛇头的前一格增加一格作为新的蛇头，并将蛇头的坐标作为第一个元素加入到代表蛇的数组中；
 if(没吃到食物){
 删除一格蛇尾，在画布中做相应改变；
 }
}

需要注意的是，如果需要在JS中设定canvas中的宽度和高度，和设置其他CSS属性略有不同。

CANVAS.width = MAXWIDTH;CANVAS.height = MAXHEIGHT;

小编还为大家准备了精彩的专题：javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。