<script type="text/javascript">
var snake={
st:500, // 速度初始为0.5秒移动一次,数值越小速度越快!
num:0,
start: function(){ // 初始化,建立外围DIV框架,键盘事件,食物或蛇的初始数量和位置
div=document.createElement('div');
div.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:20px;width:400px;height:400px;border:1px solid #000;";
div.id='kj';
div1=document.createElement('div');
div1.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:430px;width:400px;height:100px;";
document.body.appendChild(div);
document.body.appendChild(div1);
div1.innerHTML='键盘上↑↓←→代表方向控制,小键盘上0加速,1减速,空格暂停!';
document.οnkeydοwn= function(e){snake.dir(e||window.event);}
this.createshe(0,200);
this.createshe(20,200);
this.createfood();
},
pause: function(){ // 游戏暂停
clearTimeout( this.tt);
},
createfood: function(){ // 产生选区内的一个随机坐标的食物(SPAN标签)!
this.x=Math.round(Math.random()*19)*20;
this.y=Math.round(Math.random()*19)*20;
this.p=document.getElementsByTagName("p"); // 获得所有蛇对象
while( this.checkbody( this.x, this.y))
{ // 进行循环判断,让随即生成的食物位置不能和蛇的位置重合,重合就重刷随机数!
this.x=Math.round(Math.random()*19)*20;
this.y=Math.round(Math.random()*19)*20;
}
this.food=document.createElement("span");
this.food.style.cssText="position:absolute;width:20px;height:20px;background:green;border:1px solid #ccc;";
this.food.style.left= this.x+"px";
this.food.style.top= this.y+"px";
document.getElementById('kj').appendChild( this.food);
},
createshe: function(a,b){ // 用P标签创建蛇!
var sna=document.createElement("p");
sna.style.cssText="position:absolute;margin:0;padding:0;width:20px;height:20px;background:red;border:1px solid #ccc;";
sna.style.left=parseInt(a)+"px";
sna.style.top=parseInt(b)+"px";
this.x1=parseInt(a);
this.y1=parseInt(b);
document.getElementById('kj').appendChild(sna);
},
dir: function(e){ // 方向控制
var edir;
if( typeof( this.tt)!='undefined'){clearTimeout( this.tt);} // 防止方向键多次键入导致速度不断增加!
if( typeof(direction)!='undefined')
{edir=Math.abs(direction-e.keyCode)==2?direction:e.keyCode;} // 反向无效!
else
{edir=e.keyCode;}
switch(edir)
{
case 37: this.gox = -20; this.goy=0; direction=37; this.move(); break; // 左
case 39: this.gox = 20; this.goy=0; direction=39; this.move(); break; // 右
case 38: this.gox = 0; this.goy=-20;direction=38; this.move(); break; // 上
case 40: this.gox = 0; this.goy=20; direction=40; this.move(); break; // 下
case 32: this.pause(); break; // 暂停
case 96: this.st= this.st-100; this.move(); break; // 加速
case 97: this.st= this.st+100; this.move(); break; // 减速
}
},
move: function(){ // 响应键盘进行移动的事件
w= this.x1+ this.gox; // 每吃一次食物获得一次坐标
h= this.y1+ this.goy;
if(w<0||w>=400||h<0||h>=400|| this.checkbody(w,h)) // 进行边界检测和自身的碰撞检测
{
clearTimeout( this.tt);
alert("Game over!吃了"+ this.num+"个食物!");
window.location.reload(); // 游戏结束重新刷新页面!
}
if( this.x1== this.x&& this.y1== this.y)
{ // 判断蛇头是否遇到食物的位置,如果是就移除食物,重新生成,否则就是删除最开始建立的蛇,也就是蛇尾!
document.getElementById('kj').removeChild( this.food);
this.num++;
this.createfood();
}
else
{
document.getElementById('kj').removeChild( this.p[0]);
}
this.createshe(w,h);
this.tt=setTimeout("snake.move()", this.st);
},
checkbody: function(a,b){ // 检查蛇是否碰到自身的方法
this.p=document.getElementsByTagName("p");
for( var i=0,j= this.p.length;i<j;i++)
{
if( this.p[i].style.left==a+"px"&& this.p[i].style.top==b+"px") return true;
}
}
}
window.οnlοad= function(){
snake.start();
}
var snake={
st:500, // 速度初始为0.5秒移动一次,数值越小速度越快!
num:0,
start: function(){ // 初始化,建立外围DIV框架,键盘事件,食物或蛇的初始数量和位置
div=document.createElement('div');
div.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:20px;width:400px;height:400px;border:1px solid #000;";
div.id='kj';
div1=document.createElement('div');
div1.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:430px;width:400px;height:100px;";
document.body.appendChild(div);
document.body.appendChild(div1);
div1.innerHTML='键盘上↑↓←→代表方向控制,小键盘上0加速,1减速,空格暂停!';
document.οnkeydοwn= function(e){snake.dir(e||window.event);}
this.createshe(0,200);
this.createshe(20,200);
this.createfood();
},
pause: function(){ // 游戏暂停
clearTimeout( this.tt);
},
createfood: function(){ // 产生选区内的一个随机坐标的食物(SPAN标签)!
this.x=Math.round(Math.random()*19)*20;
this.y=Math.round(Math.random()*19)*20;
this.p=document.getElementsByTagName("p"); // 获得所有蛇对象
while( this.checkbody( this.x, this.y))
{ // 进行循环判断,让随即生成的食物位置不能和蛇的位置重合,重合就重刷随机数!
this.x=Math.round(Math.random()*19)*20;
this.y=Math.round(Math.random()*19)*20;
}
this.food=document.createElement("span");
this.food.style.cssText="position:absolute;width:20px;height:20px;background:green;border:1px solid #ccc;";
this.food.style.left= this.x+"px";
this.food.style.top= this.y+"px";
document.getElementById('kj').appendChild( this.food);
},
createshe: function(a,b){ // 用P标签创建蛇!
var sna=document.createElement("p");
sna.style.cssText="position:absolute;margin:0;padding:0;width:20px;height:20px;background:red;border:1px solid #ccc;";
sna.style.left=parseInt(a)+"px";
sna.style.top=parseInt(b)+"px";
this.x1=parseInt(a);
this.y1=parseInt(b);
document.getElementById('kj').appendChild(sna);
},
dir: function(e){ // 方向控制
var edir;
if( typeof( this.tt)!='undefined'){clearTimeout( this.tt);} // 防止方向键多次键入导致速度不断增加!
if( typeof(direction)!='undefined')
{edir=Math.abs(direction-e.keyCode)==2?direction:e.keyCode;} // 反向无效!
else
{edir=e.keyCode;}
switch(edir)
{
case 37: this.gox = -20; this.goy=0; direction=37; this.move(); break; // 左
case 39: this.gox = 20; this.goy=0; direction=39; this.move(); break; // 右
case 38: this.gox = 0; this.goy=-20;direction=38; this.move(); break; // 上
case 40: this.gox = 0; this.goy=20; direction=40; this.move(); break; // 下
case 32: this.pause(); break; // 暂停
case 96: this.st= this.st-100; this.move(); break; // 加速
case 97: this.st= this.st+100; this.move(); break; // 减速
}
},
move: function(){ // 响应键盘进行移动的事件
w= this.x1+ this.gox; // 每吃一次食物获得一次坐标
h= this.y1+ this.goy;
if(w<0||w>=400||h<0||h>=400|| this.checkbody(w,h)) // 进行边界检测和自身的碰撞检测
{
clearTimeout( this.tt);
alert("Game over!吃了"+ this.num+"个食物!");
window.location.reload(); // 游戏结束重新刷新页面!
}
if( this.x1== this.x&& this.y1== this.y)
{ // 判断蛇头是否遇到食物的位置,如果是就移除食物,重新生成,否则就是删除最开始建立的蛇,也就是蛇尾!
document.getElementById('kj').removeChild( this.food);
this.num++;
this.createfood();
}
else
{
document.getElementById('kj').removeChild( this.p[0]);
}
this.createshe(w,h);
this.tt=setTimeout("snake.move()", this.st);
},
checkbody: function(a,b){ // 检查蛇是否碰到自身的方法
this.p=document.getElementsByTagName("p");
for( var i=0,j= this.p.length;i<j;i++)
{
if( this.p[i].style.left==a+"px"&& this.p[i].style.top==b+"px") return true;
}
}
}
window.οnlοad= function(){
snake.start();
}
</script>
_____________________________________________________________________________________________________________________________
转载出处:bbs.bccn.net/thread-316591-1-1.html