<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇小游戏</title>
<style>
#map {
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
//创建食物对象,通过自调用函数
(function(){
//设置一个数组，用来存放食物对象，以便之后用来删除地图上的食物对象
var element=[];
//食物的构造函数,食物的属性由有宽、高、背景颜色、横纵坐标
function Food(w,h,bag,x,y){
this.w=w||20;
this.h=h||20;
this.bag=bag||"green";
this.x=x;
this.y=y;
}
//添加食物对象随机出现的方法
Food.prototype.init=function(map){
//首先删除所有的食物对象，然后再创建新的食物对象
removeFood();
//食物对象是div，所以首先要创造食物元素
var fdiv=document.createElement("div");
//将食物元素添加到地图中
map.appendChild(fdiv);
//设置食物的属性
fdiv.style.width=this.w+"px";
fdiv.style.height=this.h+"px";
fdiv.style.backgroundColor=this.bag;
//设置食物的横纵坐标
//因为食物是随机变化的，所以需要脱离文档流
fdiv.style.position="absolute";
this.x=parseInt(Math.random()*(map.offsetWidth/this.w))*this.w;
fdiv.style.left=this.x+"px";
this.y=parseInt(Math.random()*(map.offsetHeight/this.h))*this.h;
fdiv.style.top=this.y+"px";
//将食物变成圆形
fdiv.style.borderRadius="50%";
//将生成的食物对象添加到element数组中
element.push(fdiv);
};
//私有函数，用来删除fdiv食物对象的
function removeFood(){
for(var i=0;i<element.length;i++){
var ele=element[i];
//删除地图上的食物对象,removeChild不要忘记添加参数***
ele.parentNode.removeChild(ele);
//然后再将自己本身保存的食物对象删除
element.splice(i,1);
}
}
//将局部变量设置为全局变量,也就是再外边可以调用食物的构造函数
window.Food=Food;
}());
//创建小蛇对象，通过自调用函数
(function(){
//声明element数组
var element=[];
//小蛇的构造函数,
function Snake(w,h,direction){
//小蛇身体每个部位的宽,高
this.w=w||20;
this.h=h||20;
//小蛇身体属性
this.body=[
//头
{x:3,y:2,color:"red"},
//身体
{x:2,y:2,color:"orange"},
{x:1,y:2,color:"orange"}
];
//方向属性
this.direction=direction||"right";
}
//小蛇的身体的初始化函数
Snake.prototype.init=function(map){
//画小蛇之前先删除
remove();
for(var i=0;i<this.body.length;i++){
//创建小蛇每个部位的div
var sdiv=document.createElement("div");
//添加到map中去
map.appendChild(sdiv);
//每个部位都是一个对象
var bddiv=this.body[i];
//给小蛇添加样式属性
sdiv.style.width=this.w+"px";
sdiv.style.height=this.h+"px";
//脱离文档流，为了移动
sdiv.style.position="absolute";
//横纵坐标
sdiv.style.left=bddiv.x*this.w+"px";
sdiv.style.top=bddiv.y*this.h+"px";
sdiv.style.backgroundColor=bddiv.color;
//自己将蛇变圆形
sdiv.style.borderRadius="50%";
//方向暂时不定
element.push(sdiv);
}
};
//给小蛇添加移动函数
Snake.prototype.move=function(food,map){
//小蛇身体的移动
var i=this.body.length-1;
for(;i>0;i--){
//x坐标
this.body[i].x=this.body[i-1].x;
//y坐标
this.body[i].y=this.body[i-1].y;
}
//小蛇头部的移动,头部负责方向的移动,改变头的坐标位置
switch (this.direction){
case "right":this.body[0].x+=1;break;
case "left":this.body[0].x-=1;break;
case "top":this.body[0].y-=1;break;
case "bottom":this.body[0].y+=1;break;
}
//当小蛇的头和食物的坐标一样时，吃到了食物，
//小蛇要复制最后的尾巴到小蛇身体中去，然后食物会重新生成一个
var headX=this.body[0].x*this.w;
var headY=this.body[0].y*this.h;
var foodX=food.x;
var foodY=food.y;
if(headX==foodX&&headY==foodY){
var last=this.body[this.body.length-1];
this.body.push({
x:last.x,
y:last.y,
color:last.color
});
food.init(map);
}
};
//增加删除函数
function remove(){
//删除小蛇的每个部位，所以要用循环，因为先删除小蛇的尾部
var i=element.length-1;
for(;i>=0;i--){
var ele=element[i];
ele.parentNode.removeChild(ele);
element.splice(i,1);
}
}
//局部变量变全局变量通过window
window.Snake=Snake;
}());
//创建游戏对象，通过自调用函数
(function(){
var that=null;
//游戏的构造函数,设计三个对象，地图，食物，小蛇
function Game(map){
this.map=map;
//创建食物对象
this.food=new Food();
//创建小蛇对象
this.snake=new Snake();
that=this;
}
//游戏的初始化方法
Game.prototype.init=function(){
//食物的初始化
this.food.init(this.map);
//小蛇的初始化
this.snake.init(this.map);
//小蛇的移动
this.snakeMove(this.food,this.map);
this.bindKey();
};
//游戏的小蛇移动函数
Game.prototype.snakeMove=function(food,map){
var timeid=setInterval(function(){
//定时器的this是指window。bind函数可以改变this的指向，指向参数that
this.snake.move(food,map);
this.snake.init(map);
//设置移动距离的条件，撞墙
var maxX=map.offsetWidth/this.snake.w;//40
var maxY=map.offsetWidth/this.snake.h;
var headX=this.snake.body[0].x;
var headY=this.snake.body[0].y;
if(headX<0||headX>=maxX){
clearInterval(timeid);
alert("game over");
}
if(headY<0||headY>=maxY){
clearInterval(timeid);
alert("game over");
}
}.bind(that),150)
};
//增加游戏的键盘按下函数
Game.prototype.bindKey=function(){
document.addEventListener("keydown",function(e){
switch (e.keyCode){
case 39:this.snake.direction="right";break;
case 37:this.snake.direction="left";break;
case 38:this.snake.direction="top";break;
case 40:this.snake.direction="bottom";break;
}
}.bind(that),false)
};
window.Game=Game;
}());
var gm=new Game(document.querySelector("#map"));
gm.init();
// var fd=new Food();
// // console.log(fd.w);
// fd.init(document.querySelector("#map"));
//
//
// var sn=new Snake();
// //画一个小蛇
// sn.init(document.querySelector("#map"));
// //移动一步
// sn.move(fd,document.querySelector("#map"));
// //画一个小蛇，想要只展示新的小蛇，就要把之前的删掉remove函数
// sn.init(document.querySelector("#map"));
// sn.move(fd,document.querySelector("#map"));
// sn.init(document.querySelector("#map"));
</script>
</body>
</html>
image.png
网友评论