javascript实现贪吃蛇小游戏
程序员文章站
2024-03-19 08:12:10
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<script>
var map; //地图类对象
var snake; //蛇类对象
var food; //食物类对象
var timer; //定时器对象
var sum=0; //分数
//地图类
function Map()
{
this.width=800; //地图宽度
this.height=400; //地图高度
this.position='absolute'; //定位方式
this.color='#FFDD00'; //地图颜色
this._map=null; //保存地图dom元素
this.show=function()
{
//用于显示地图
//创建地图div元素
this._map = document.createElement('div');
//设置地图样式
this._map.style.width = this.width + 'px';
this._map.style.height = this.height + 'px';
this._map.style.position = this.position ;
this._map.style.backgroundColor = this.color ;
//将地图div元素追加到body标签之间
document.getElementsByTagName('body')[0].appendChild(this._map);
};
}
//食物类
function Food()
{
this.width=20; //宽度
this.height=20; //高度
this.position='absolute'; //定位方式
this.color='#FF0026'; //食物颜色
this._food=null; //用于保存食物dom元素
this.x=0; //横向第几个格
this.y=0; //纵向第几个格
this.show=function()
{
//用于显示食物
if(this._food==null)
{
this._food=document.createElement('div');
//设置食物样式
this._food.style.width = this.width + 'px';
this._food.style.height = this.height + 'px';
this._food.style.position = this.position ;
this._food.style.backgroundColor = this.color ;
map._map.appendChild(this._food);
}
//如果之前创建过，只需要重新设置坐标
this.x=Math.floor(Math.random()*40);
this.y=Math.floor(Math.random()*20);
this._food.style.left = this.x*this.width+'px';
this._food.style.top = this.y*this.height+'px';
};
}
//蛇类
function Snake()
{
this.width=20; //蛇节宽度
this.height=20; //蛇节高度
this.position='absolute'; //蛇节定位方式
this.direct=''; //蛇的移动方向
//所有蛇节全部信息
this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]];
this.setDirect = function(code)
{
switch(code)
{
case 37:
this.direct='left';
break;
case 38:
this.direct='up';
break;
case 39:
this.direct='right';
break;
case 40:
this.direct='down';
break;
}
}
this.show=function()
{
//用于显示蛇
for(var i=0;i<this.body.length;i++)
{
if(this.body[i][3]==null)
{
this.body[i][3] = document.createElement('div');
this.body[i][3].style.width = this.width +'px';
this.body[i][3].style.height = this.height +'px';
this.body[i][3].style.position = this.position;
this.body[i][3].style.backgroundColor = this.body[i][2];
map._map.appendChild(this.body[i][3]);
}
//设置蛇节的横纵坐标
this.body[i][3].style.left=this.body[i][0]*this.width+'px';
this.body[i][3].style.top=this.body[i][1]*this.height+'px';
}
}
this.move = function()
{
//移动蛇身
var length = this.body.length-1;
for(var i=length;i>0;i--)
{
//让后面的蛇节的坐标等于前面蛇节的坐标
this.body[i][0]=this.body[i-1][0]; //横坐标
this.body[i][1]=this.body[i-1][1]; //纵坐标
}
switch(this.direct)
{
case 'right':
this.body[0][0]=this.body[0][0]+1;
break;
case 'down':
this.body[0][1]=this.body[0][1]+1;
break;
case 'left':
this.body[0][0]=this.body[0][0]-1;
break;
case 'up':
this.body[0][1]=this.body[0][1]-1;
break;
default:
return;
}
//判断蛇吃到食物
if(this.body[0][0]==food.x&&this.body[0][1]==food.y)
{
var x=this.body[length][0];
var y=this.body[length][1];
sum++;
document.title='分数:'+sum+'分';
this.body.push([x,y,'#FF008C',null]);
food.show();
}
//判断撞墙死
if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)
{
alert('撞墙死');
clearTimeout(timer);
return;
}
//吃到自己死
for(var i=1;i<this.body.length;i++)
{
if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])
{
alert('吃到自己死');
clearTimeout(timer);
return;
}
}
this.show();
}
}
window.onload = function()
{
map = new Map(); //实例化地图类对象
map.show(); //显示地图
food=new Food(); //实例化食物类对象
food.show(); //显示食物
snake = new Snake(); //实例化蛇类对象
snake.show();
timer = setInterval('snake.move()',200);
document.onkeydown = function()
{
var code;
if(window.event)
{
code=window.event.keyCode;
}else
{
code = event.keyCode;
}
snake.setDirect(code);
};
}
</script>
</head>
<body>
</body>
</html>
来个效果图：
上一篇： 什么是线程安全，你真的了解吗？