<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小田田</title>
</head>
<body>
<script src="com.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var map=myObj.createEle("div");//创建地图
document.body.appendChild(map);//将地图加入到body中
//设置地图属性
map.style.position="relative";
map.style.height="600px";
map.style.width="800px";
map.style.backgroundColor="#ccc";
map.style.left="50%";
map.style.marginLeft="-400px";
function getColor(){
var str="#";
var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
for(var i=0;i<=5;i++){
var cr=parseInt(Math.random()*arr.length);
str+=arr[cr];
}
return str;
}
var snake_cr;//小蛇尾部的颜色
//食物Food
(function(){
var elements=[];//保存每个食物
//食物的构造函数
function Food(y,x,height,width,color){//其实这个X,Y写不写都没关系
this.x=x;
this.y=y;
this.width=width||20;
this.height=height||20;
this.color=color||"red";
}
//食物的显示效果及位置方法
Food.prototype.init=function(map){
remove();//如果有则先删除再创建
//创建小方块并加入到地图中
var dv=myObj.createEle("div");
map.appendChild(dv);
dv.style.height=this.height+"px";
dv.style.width=this.width+"px";
dv.style.backgroundColor=this.color;
dv.style.position="absolute";
this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
dv.style.left = this.x + "px";
dv.style.top = this.y + "px";
dv.style.backgroundColor=getColor();
snake_cr= dv.style.backgroundColor;
elements.push(dv);//将小方块加入到ele中
}
function remove(map){
for(var i=0;i<elements.length;i++){
var ele=elements[i];
ele.parentNode.removeChild(ele);
elements.splice(i,1);
}
}
window.Food=Food;
})();
//小蛇
(function(){
var elements=[];//保存每个身体部位
//小蛇的构造函数
function Snake(height,width,direction){
this.height=height||20;
this.width=width||20;
this.direction=direction||"right";
this.body=[
{x:3,y:2,color:"#fffae8"},//头 0
{x:2,y:2,color:"#4acc60"},//身体1
{x:1,y:2,color:"#4acc60"}//身体2
];
}
//初始化小蛇
Snake.prototype.init=function(map){//类似于小方块
remove();
for(var i=0;i<this.body.length;i++){
var obj=this.body[i];
var div=myObj.createEle("div");
map.appendChild(div);//加入到地图中去
div.style.height=this.height+"px";
div.style.width=this.width+"px";
div.style.position="absolute";
div.style.left=obj.x*this.width+"px";
div.style.top=obj.y*this.height+"px";
div.style.backgroundColor=obj.color;
elements.push(div);
}
};
//小蛇移动
Snake.prototype.move=function(food,map){
//身体移动
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;
}
//头部判断方向
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.width;
var heady=this.body[0].y*this.height;
//如果相同则在尾部添加一个
if(food.x==headx&&food.y==heady){
var last=this.body[this.body.length-1];
this.body.push({
x:last.x,
y:last.y,
color:snake_cr
});
food.init(map);
}
}
function remove() {
//删除map中的小蛇的每个div,同时删除elements数组中的每个元素,从蛇尾向蛇头方向删除div
var i = elements.length - 1;
for (; i >= 0; i--) {
//先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素
var ele = elements[i];
//从map地图上删除这个子元素div
ele.parentNode.removeChild(ele);
elements.splice(i, 1);
}
}
window.Snake=Snake;
})();
(function(){
var that=null;
//游戏构造函数
function Game(map){
this.food=new Food();//食物对象
this.snake=new Snake();//小蛇对象
this.map=map;//地图
that=this;//将当前对象保存到that中
}
//初始化游戏
Game.prototype.init=function(){
this.food.init(this.map);//食物初始化
this.snake.init(this.map);//小蛇初始化
this.runSnake(this.food,this.map);
this.bindkey();
};
//添加原型方法
Game.prototype.runSnake=function(food,map){
var timeId=setInterval(function(){
//此时的this是window
this.snake.move(food,map);//移动小蛇
this.snake.init(map);//初始化小蛇
var maxX=map.offsetWidth/this.snake.width;
var maxY=map.offsetHeight/this.snake.height;
//小蛇的头部坐标
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 37:this.snake.direction="left";break;
case 38:this.snake.direction="top";break;
case 39:this.snake.direction="right";break;
case 40:this.snake.direction="bottom";break;
}
}.bind(that),false);
};
window.Game=Game;
})();
var gm=new Game(map);
gm.init();
/*
*
* 地图: 宽，高，背景颜色，因为小蛇和食物都是相对于地图显示的,这里小蛇和食物都是地图的子元素,随机位置显示,脱离文档流的,地图也需要脱离文档流--css需要设置:宽,高,背景颜色,脱标
*
* 食物---div元素
* elements--->存储div的数组(将来删除的食物div时候,先从map中删除div,再从数组中移除div)
* 食物:宽,高,背景颜色,横坐标,纵坐标
* 一个食物就是一个对象,这个对象有相应的属性,这个对象需要在地图上显示
* 最终要创建食物的对象,先 有构造函数,并且把相应的值作为参数传入到构造函数中
* 食物要想显示在地图上,食物的初始化就是一个行为
* 1.食物的构造函数--->创建食物对象
* 2.食物的显示的方法-->通过对象调用方法,显示食物,设置相应的样式
* 2.1.1 因为食物要被小蛇吃掉,吃掉后应该再次出现食物,原来的食物就删除了
* 2.1.2 每一次初始化食物的时候先删除原来的食物,然后重新的初始化食物
* 2.1.3 通过一个私有的函数(外面不能调用的函数)删除地图上的食物,同时最开始的时候食物也相应的保存到一个数组中,再从这个数组中把食物删除
* 最后的时候,把食物的构造函数给window下的属性,这样做,外部就可以直接使用这个食物的构造函数了
*
* 小蛇
* 小蛇就是一个对象
* 属性: 每个身体都有宽，高，方向
* 属性:身体分三个部分,每个部分都是一个对象,每个部分都有横纵坐标,背景颜色
* 小蛇要想显示在地图上,先删除之前的小蛇,然后再初始化小蛇(小蛇要移动)--方法
*
* 小蛇要移动---方法
* 思路:把小蛇的头的坐标给小蛇第一部分的身体,第一部分的身体的坐标给下一个部分身体
* 小蛇的头,需要单独的设置:方向
*
*
*
*
*
*
* */
</script>
</body>
</html>
坚持每周更新，向全栈大佬进发
这是我的公众号，喜欢的朋友可以关注一下，每周更新，篇篇干货
199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
