版权声明：请点击关注 https://blog.csdn.net/weixin_42914677/article/details/83310654
注意，都是建立在前面几个步骤至上开发的。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的贪吃蛇07</title>
<script type="text/javascript" src="jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="snake.js" ></script>
</head>
<body>
<button id="start">开始</button><button id="pause">暂停</button>
</body>
</html>snake.js
$(document).ready(function(){
var mapDiv=new Mapdiv();//地图
var snake=new Snake();//蛇
var food=new Food();//食物
snake.show();//将蛇显示出来
food.show();//将食物显示出来
snake.food=food;
$(document).keydown(function(e){//键盘事件
var code=e.keyCode;
switch (code){
case 37:
case 38:
case 39:
case 40:
snake.code=code;//蛇移动，根据键盘方向
break;
}
});
var timer=null;
$("#start").click(function(){
timer=setInterval(function(){
snake.run();
}, 300);
});
$("#pause").click(function(){
clearInterval(timer);
});
});
//地图
var Mapdiv=function(){
var div=$("<div></div>");
div.appendTo("body");
div.css(
{
"width": "800px",
"height": "500px",
"background-color":"darkgrey",
"position": "absolute"
});
div.attr("id","map_div");
};
//蛇
var Snake=function(){
this.code=39;
var stup=50;
this.food=null;
this.body=[
{x:2,y:0,c:"green"},
{x:1,y:0,c:"black"},
{x:0,y:0,c:"blue"}
];
this.show=function(){
$("div").remove(".snake_body");
$.each(this.body, function(i,d) {
var div=$("<div></div>");
div.appendTo("#map_div");
div.attr("class","snake_body");
//alert(d.x);
div.css(
{
"width": "50px",
"height": "50px",
"background-color":d.c,
"position": "absolute",
"margin-left":d.x*stup,
"margin-top":d.y*stup
});
});
};
//吃食物
this.eat=function(food){
food.eated(this);
var color=randomRgbaColor();
this.body.push({x:this.food.x,y:this.food.y,c:this.food.c});
};
//移动
this.run=function(){
//蛇身移动
// 后一个元素到前一个元素的位置
for (var i=this.body.length-1; i>0; i--) {
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
// alert(code);
//判断方向
switch(this.code){
case 37 :this.body[0].x--;//蛇头向左
break;
case 39 :this.body[0].x++;//蛇头向右
break;
case 38 :this.body[0].y--;//蛇头向上
break;
case 40 :this.body[0].y++;//蛇头向下
break;
}
//判断是否碰壁
if(this.body[0].x<0||this.body[0].x>15||this.body[0].y<0||this.body[0].y>9){
alert("碰壁了！！！");
this.body=[
{x:2,y:0,c:"green"},
{x:1,y:0,c:"black"},
{x:0,y:0,c:"blue"}
];
}
//判断是否碰到蛇身
for(var i=1;i<this.body.length;i++){
if(this.body[i].x==this.body[0].x&&this.body[i].y==this.body[0].y){
alert("已经碰到蛇身了！！");
}
}
//判断是否遇到食物
if(this.food.x==this.body[0].x&&this.food.y==this.body[0].y){
this.eat(this.food);
}
this.show();
}
};
//食物
var Food=function(){
var div=$("<div></div>");
div.appendTo("#map_div");
this.x=0;
this.y=0;
this.c=randomRgbaColor();
//食物被吃
this.eated=function(snake){
var labe=true;
this.c=randomRgbaColor();
while(labe){
this.x=parseInt(Math.random()*16);
this.y=parseInt(Math.random()*10);
for(var i=0;i<snake.body.length;i++){
if(this.x==snake.body[i].x&&this.y==snake.body[i].y){
this.x=parseInt(Math.random()*16);
this.y=parseInt(Math.random()*10);
labe=true;
break;
}else{
labe=false;
}
}
}
div.css(
{
"background-color":this.c,
"margin-left":this.x*50,
"margin-top":this.y*50
});
};
//显示食物
this.show=function(){
this.x=parseInt(Math.random()*16);
this.y=parseInt(Math.random()*10);
div.css(
{
"width": "50px",
"height": "50px",
"background-color":this.c,
"position": "absolute",
"margin-left":this.x*50,
"margin-top":this.y*50
});
};
};
//随机生成颜色
function randomRgbaColor() { //随机生成RGBA颜色
var r = Math.floor(Math.random() * 256); //随机生成256以内r值
var g = Math.floor(Math.random() * 256); //随机生成256以内g值
var b = Math.floor(Math.random() * 256); //随机生成256以内b值
//var alpha = Math.random(); //随机生成1以内a值
return `rgb(${r},${g},${b})`; //返回rgba(r,g,b,a)格式颜色,${alpha}
//$("#map_div").text(r);
}