版权声明：请点击关注 https://blog.csdn.net/weixin_42914677/article/details/83019120
在Test工程的基础上修改
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的贪吃蛇test</title>
<script type="text/javascript" src="jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="snake.js" ></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
</body>
</html>
snake.js
$(document).ready(function(){
var mapDiv=new Mapdiv();
var snake=new Snake();
var food=new Food();
snake.show();
$(document).keydown(function(e){
var code=e.keyCode;
snake.run(code,food);
});
});
//地图
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(){
var div=$("<div></div>");
div.appendTo("#map_div");
this.x=0;
this.y=0;
var stup=50;
this.show=function(){
this.x=0;
this.y=0;
div.css(
{
"width": "50px",
"height": "50px",
"background-color":"red",
"position": "absolute",
"margin-left":0,
"margin-top":0
});
};
this.run=function(code,food){
switch(code){
case 37://左
this.x--;
if(this.x<0){
alert("碰壁了！！！");
this.show();
}
else{
if(food.x==this.x&&food.y==this.y){
alert("吃食物！！");
}else{
div.css({"margin-left":this.x*stup});
}
}
break;
case 39://右
this.x++;
if(this.x>15){
alert("碰壁了！！！");
this.show();
}
else{
if(food.x==this.x&&food.y==this.y){
alert("吃食物！！");
}else{
div.css({"margin-left":this.x*stup});
}
}
break;
case 38://上
this.y--;
if(this.y<0){
alert("碰壁了！！！");
this.show();
}
else{
if(food.y==this.y&&food.x==this.x){
alert("吃食物！！");
}else{
div.css({"margin-top":this.y*stup});
}
}
break;
case 40://下
this.y++;
if(this.y>9){
alert("碰壁了！！！");
this.show();
}
else{
if(food.y==this.y&&food.x==this.x){
alert("吃食物！！");
}else{
div.css({"margin-top":this.y*stup});
}
}
break;
}
}
};
//食物
var Food=function(){
var div=$("<div></div>");
div.appendTo("#map_div");
this.x=parseInt(Math.random()*16);
this.y=parseInt(Math.random()*10);
div.css(
{
"width": "50px",
"height": "50px",
"background-color":"yellow",
"position": "absolute",
"margin-left":this.x*50,
"margin-top":this.y*50
});
};