标签：function 小游戏 absolute images 贪吃蛇
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇小游戏</title>
<script type="text/javascript">
//将地图声明为全局
var plat=null;
//请食物声明为全局
var food=null;
//请蛇声明为全局
var snake =null;
//定时器
var setTime=null;
//地图类
function Plat(){
//宽度
this.width=1000;
//高度
this.height=600;
//背景
//this.color = ‘url(images/sfq_3.jpg)‘;
this.color="#eeeeee";
//定位方式
this.position=‘absolute‘;
this.margin = "200";
//保存地图对象
this._plat=null;
//创建地图的方法
this.show = function(){
//在内存中创建一个div对象
this._plat = document.createElement("div");
//添加样式
this._plat.style.width=this.width+"px";
this._plat.style.height=this.height+"px";
//this._plat.style.backgroundImage=this.color;
this._plat.style.backgroundColor=this.color;
this._plat.style.position = this.position;
this._plat.style.marginTop= this.margin+"px";
this._plat.style.marginLeft= 400+"px";
//将内存中的div放入到body对象中
document.getElementsByTagName(‘body‘)[0].appendChild(this._plat);
};
//将食物添加到地图中
this.AppendChild = function(obj){
this._plat.appendChild(obj);
}
}
//食物类
function Food(){
this.width = 20;
this.height = 20;
this.color="red";
//this.color = ‘url(images/furit_‘+1+‘.png)‘;
this.position=‘absolute‘;
this.radius="50%";
//食物在地图中的横纵坐标值
this.x=0;
this.y=0;
this._food=null;
this.show = function(){
if(this._food==null){
this._food = document.createElement("div");
this._food.style.width=20+‘px‘;
this._food.style.height=20+‘px‘;
this._food.style.borderRadius =this.radius;
this._food.style.position = this.position;
//document.getElementsByTagName(‘div‘)[0].appendChild(div);
//通过地图对象中的方法把食物追加到地图中。
plat.AppendChild(this._food);
}
//var i = Math.round(Math.random()*5+1);
//this.color = ‘url(images/furit_‘+i+‘.png)‘;
//随机出x,y的坐标
//this._food.style.backgroundImage=this.color;
this._food.style.backgroundColor=this.color;
this.x =Math.floor(Math.random()*50); //0-49
this.y =Math.floor(Math.random()*30); //0-30
this._food.style.left=(this.x*20)+"px";
this._food.style.top =(this.y*20)+"px";
};
}
//蛇类
function Snake(){
this.radius="50%";
this.width=20;
this.height=20;
//记录蛇节的数目
this.festival=[[3,3,‘pink‘,null],[2,3,‘blue‘,null],[1,3,‘blue‘,null]];
this.position=‘absolute‘;
//移动方式
this.direction=‘right‘;
//设置蛇的方向
this.setDirection = function(code){
console.log(code);
/*
if(this.direction==‘right‘&&code==37){
alert("你死了");
}
*/
switch(code){
case 37:
if(this.direction==‘right‘){
alert("你撞尾了");
clearInterval(setTime);
}
this.direction=‘left‘;
break;
case 38:
if(this.direction==‘down‘){
alert("你撞尾了");
clearInterval(setTime);
}
this.direction=‘top‘;
break;
case 39:
if(this.direction==‘left‘){
alert("你撞尾了");
clearInterval(setTime);
}
this.direction=‘right‘;
break;
case 40:
if(this.direction==‘top‘){
alert("你撞尾了");
clearInterval(setTime);
}
this.direction=‘down‘;
break;
}
}
this.show = function(){
for(var i=0;i<this.festival.length;i++){
//判断蛇节是否存在，存在就不在创建了。
if(this.festival[i][3]==null){
this.festival[i][3]= document.createElement("div");
this.festival[i][3].style.width=20+"px";
this.festival[i][3].style.height=20+"px";
this.festival[i][3].style.position = this.position;
this.festival[i][3].style.backgroundColor=this.festival[i][2];
plat.AppendChild(this.festival[i][3]);
this.festival[i][3].style.borderRadius =this.radius;
}
this.festival[i][3].style.left = this.festival[i][0]*this.width+"px";
this.festival[i][3].style.top = this.festival[i][1]*this.height+"px";
}
};
//让蛇动起来.
this.move = function(){
//蛇节的长度
var length = this.festival.length-1;
for(var i=length;i>0;i--){
//让所有蛇节移动
this.festival[i][0] = this.festival[i-1][0];
this.festival[i][1] = this.festival[i-1][1];
}
//蛇头移动
if(this.direction==‘right‘){
this.festival[0][0]+=1;
}else if(this.direction==‘top‘){
this.festival[0][1]-=1;
}else if(this.direction==‘down‘){
this.festival[0][1]+=1;
}else if(this.direction==‘left‘){
this.festival[0][0]-=1;
}
//判断吃到食物
if(this.festival[0][0]==food.x&&this.festival[0][1]==food.y){
var x = this.festival[length][0];
var y = this.festival[length][1];
this.festival.push([x,y,‘blue‘,null]);
food.show();
}
//判断是否超出区域！
if(this.festival[0][0]==50&&this.direction==‘right‘){
alert("怎么不小心啊!,撞墙了");
clearInterval(setTime);
return;
}else if(this.festival[0][0]==-1&&this.direction==‘left‘){
alert("怎么不小心啊!,撞墙了");
clearInterval(setTime);
return;
}else if(this.festival[0][1]==-1&&this.direction==‘top‘){
alert("怎么不小心啊!,撞墙了");
clearInterval(setTime);
return;
}else if(this.festival[0][1]==30&&this.direction==‘down‘){
alert("怎么不小心啊!,撞墙了");
clearInterval(setTime);
return;
}
for(var i=length;i>0;i--){
if(this.festival[0][0]==this.festival[i][0]&&this.festival[0][1]==this.festival[i][1]){
alert("你死了！");
clearInterval(setTime);
return;
}
}
this.show();
}
}
window.onload=function(){
//实例化地图对象
plat = new Plat();
//将地图对象添加到body元素中里
plat.show();
//实例化食物对象
food = new Food();
//将食物对象放到地图中
food.show();
//实例化蛇对象
snake = new Snake();
//将蛇对象放到地图中
snake.show();
setTime=setInterval(‘snake.move()‘,100);
//监听键盘事件
document.onkeyup =function(event){
var code;
if(window.event){
code = window.event.keyCode;
}else{
code = event.keyCode;
}
snake.setDirection(code);
}
};
</script>
</head>
<body>
</body>
</html>
本文出自 “12897581” 博客，请务必保留此出处http://12907581.blog.51cto.com/12897581/1927492
标签：function 小游戏 absolute images 贪吃蛇
原文地址：http://12907581.blog.51cto.com/12897581/1927492
