您的位置：首页 > Web前端 > JavaScript

js简单的贪吃蛇小游戏

2015-06-09 16:08 756 查看 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">
var snake;
var timer;
var food;
//创建蛇
function Snake(){
this.width=20;
this.height=20;
this.position='absolute';
this.direct='';
//3代表x坐标，2代表y坐标，red代表颜色，null代表当前的div为空，表示还没有创建
this.snackbody=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]];

this.setDirect=function(keycode){

switch(keycode)
{
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.snackbody.length;i++)
{
if(this.snackbody[i][3]==null)
{
this.snackbody[i][3] = document.createElement('div');
this.snackbody[i][3].style.width=this.width+'px';
this.snackbody[i][3].style.height=this.height+'px';
this.snackbody[i][3].style.position=this.position;
this.snackbody[i][3].style.backgroundColor=this.snackbody[i][2];
document.getElementById('Map').appendChild(this.snackbody[i][3]);

}
//设置蛇的位置坐标
this.snackbody[i][3].style.left=this.snackbody[i][0]*this.width+'px';
this.snackbody[i][3].style.top=this.snackbody[i][1]*this.height+'px';

}

}
//蛇的移动
this.move=function (){
var length=this.snackbody.length-1;
//让蛇的前面一个div的位置赋值给后一个的div的位置

for(var i=length;i>0;i--)
{
//变换x坐标
this.snackbody[i][0]=this.snackbody[i-1][0];//横坐标
this.snackbody[i][1]=this.snackbody[i-1][1];//纵坐标

}
switch(this.direct)
{
case 'right':
this.snackbody[0][0]=this.snackbody[0][0]+1;
break;
case 'down':
this.snackbody[0][1]=this.snackbody[0][1]+1;
break;
case 'left':
this.snackbody[0][0]=this.snackbody[0][0]-1;
break;
case 'up':
this.snackbody[0][1]=this.snackbody[0][1]-1;
break;
default:
return;

}
//判断蛇吃到食物---------------------------------------------------------------
if(this.snackbody[0][0]==food.x&&this.snackbody[0][1]==food.y)
{
var x=this.snackbody[length][0];
var y=this.snackbody[length][1];
this.snackbody.push([x,y,'blue',null]);
food.show();
}

//判断是否已经撞墙
if(this.snackbody[0][0]<0 || this.snackbody[0][0]>19 ||this.snackbody[0][1]<0 ||this.snackbody[0][1]>19)
{
alert('撞墙死');
clearTimeout(timer);
return;
}

//
this.show();

}

}
//创建食物
function Food(){
this.width=20;
this.height=20;
this.position='absolute';
this.color='#00ff00';
this._food=null;
this.x=0;
this.y=0;
//show函数
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;
document.getElementById('Map').appendChild(this._food);

}
this.x=Math.floor(Math.random()*20);
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 onload(){
snake = new Snake(); //实例化蛇类对象
snake.show();
food=new Food();
food.show();
timer = setInterval('snake.move()',500);

}
function onkeyd(event){
if(event.keyCode==38)//上
{
snake.setDirect(38);
//alert('shagn');
}
if(event.keyCode==39)//上
{
snake.setDirect(39);

}
if(event.keyCode==40)//上
{
snake.setDirect(40);

}
if(event.keyCode==37)//上
{
snake.setDirect(37);

}
}

</script>

<style type="text/css">
#Map{
width:400px;
height:400px;
position:absolute;
background-color:#c8c8c8;

}

</style>
</head>
<body onload="onload()" onkeydown="onkeyd(event)">
<div id='Map'></div>
</body>
</html>
写的不是太好，但是基本功能能够实现。大家可以参考一下我的思路。
本文出自 “Java大白的战地” 博客，请务必保留此出处http://8023java.blog.51cto.com/10117207/1660097
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航