js编程–贪吃蛇游戏03
在js编程–贪吃蛇游戏02的基础上修改功能如下:
1、运用了面向对象的编程思想,将蛇和食物分别用对象的方式实现。
2、蛇遇到食物,食物被吃之后,随机生成新的食物
注意:引用jquery-3.3.1.min.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的贪吃蛇03</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>
<div id="map">
</div>
</body>
</html>
index.css
body {
margin: 0;
padding: 0;
}
#map{
width: 800px;
height: 500px;
margin: 10% auto;
background-color:darkgrey ;
position: relative;
}
#snake_div{
width: 50px;
height: 50px;
background-color:red ;
position: absolute;
}
.food_div{
width: 50px;
height: 50px;
background-color:yellow ;
position: absolute;
}
snack.js
$(document).ready(function(){
var map_div=$("#map");
var s_count=1;//记录蛇身体长度
var snack=new Snack();
snack.shownack()
var food=new Food();
food.showfood();
var s_h=50;
var s_w=50;
var direction="right";//初始运动方向
// alert("ss");
$(document).keydown(function(e){
var code=e.keyCode;
if(food.x==(snack.x+1)&&food.y==snack.y){
//alert("吃到食物了!!!!!");
//吃到食物了,就开加长蛇身
food.eated();
return;
}
snack.movesnack(code);
});
function Food(){
this.x=1;
this.y=1;
var div=$("<div></div>");
this.showfood=function(){
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
});
div.appendTo(map_div);
};
this.eated=function(){
this.showfood();
}
}
function Snack(){
this.x=0;
this.y=0;
this.direction="right";
var div=$("<div></div>");
this.shownack=function(){
this.x=0;
this.y=0;
div.css(
{
"width": "50px",
"height": "50px",
"background-color":"red",
"position": "absolute",
"margin-left":this.x*50,
"margin-top":this.y*50
});
div.appendTo(map_div);
};
this.movesnack=function(code){
switch(code){
case 37://左
// 不允许返回,向上的时候不能向下
if(this.direction!="right"){
this.direction="left";
if(this.x<1){
alert("撞墙了!!!!!");
snack.shownack();
}else{
this.x -=1;
div.css({"margin-left":this.x*50});
}
}
break;
case 39://右
// 不允许返回,向上的时候不能向下
if(this.direction!="left"){
this.direction="right";
if(this.x>15){
alert("撞墙了!!!!!");
div.css({"margin-left":0,"margin-top":0});
}else{
this.x +=1;
div.css({"margin-left":this.x*50});
}
}
break;
case 38://上
// 不允许返回,向上的时候不能向下
if(this.direction!="down"){
this.direction="up";
if(this.y<1){
alert("撞墙了!!!!!");
div.css({"margin-left":0,"margin-top":0});
}else{
this.y -=1;
div.css({"margin-top":this.y*50});
}
}
break;
case 40://下
// 不允许返回,向上的时候不能向下
if(this.direction!="up"){
this.direction="down";
if(this.y>9){
alert("撞墙了!!!!!");
div.css({"margin-left":0,"margin-top":0});
}else{
this.y +=1;
div.css({"margin-top":this.y*50});
}
}
break;
}
};
}
});