js贪吃蛇纯手打代码比较复杂自己瞎弄的 bug 比较多自己一点一点排除弄完全原创

时间：2015-05-09 11:46:47 阅读：427 评论：0 收藏：0 [点我收藏+]

//虽然代码没有别人写的简单，但是这是自己的思想，通过这次实例，学到了很多，也发现了很多不足，努力学习啊，小小的贪吃蛇也包含了很多东西还有

//好多问题需要解决，比如，如何判断蛇头碰到蛇身，如何让食物不出现在蛇的身上等，欢迎大家一起探讨

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制移动</title>
<script>
window.onload=function(){

var snake={
timer:null,
oEvent:null,

dir:null,
sp:20,
speed:300,
num:0,
oDiv:document.getElementsByClassName(‘lei‘)[0],
p:document.getElementsByClassName(‘lei‘),
oBigDiv:document.getElementById(‘lei1‘),
color:function(){//颜色分离
for(var i=0;i<snake.p.length;i++){
if(i%2==0)
snake.p[i].style.background=‘red‘
}
},
move:function(oEvent){//控制方向
//alert(snake.oDiv.style[snake.dir]);
switch(oEvent.keyCode){
case 97:clearInterval(snake.timer);
snake.speed=snake.speed-50;
snake.timer=setInterval(function(){
snake.oDiv.style[snake.dir]=snake.oDiv.offsetLeft+snake.sp+‘px‘;
snake.follow();
},snake.speed);
break;
case 98:clearInterval(snake.timer);snake.speed=snake.speed+50;
snake.timer=setInterval(function(){
snake.oDiv.style[snake.dir]=snake.oDiv.offsetLeft+snake.sp+‘px‘;
snake.follow();
},snake.speed);
break;
case 32:clearInterval(snake.timer);break;
case 37: clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘left‘;
snake.sp=-20;
snake.oDiv.style.left=snake.oDiv.offsetLeft-20+‘px‘;
snake.follow();
},snake.speed);break;
case 39: clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘left‘;
snake.sp=20;
snake.oDiv.style.left=snake.oDiv.offsetLeft+20+‘px‘;
snake.follow();
},snake.speed);break;
case 38: clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘top‘;
snake.sp=-20;
snake.oDiv.style.top=snake.oDiv.offsetTop-20+‘px‘;
snake.follow();
},snake.speed);break;
case 40:clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘top‘;
snake.sp=20;
snake.oDiv.style.top=snake.oDiv.offsetTop+20+‘px‘;
snake.follow();
},snake.speed);break;
}

},
follow:function(){
for(var i=snake.p.length-1;i>0;i--){
snake.p[i].style.left=snake.p[i-1].offsetLeft+‘px‘;
snake.p[i].style.top=snake.p[i-1].offsetTop+‘px‘;
}
if(snake.oDiv.offsetLeft>snake.oBigDiv.offsetWidth-snake.oDiv.offsetWidth){
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=null;
}
if(snake.oDiv.offsetLeft<0)
{
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=null;
}
if(snake.oDiv.offsetTop<0)
{
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=null;
}
if(snake.oDiv.offsetTop>snake.oBigDiv.offsetHeight-snake.oDiv.offsetHeight){
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=null;
}
if((snake.oDiv.offsetLeft==snake.pos.x)&&(snake.oDiv.offsetTop==snake.pos.y)){
snake.num++;
snake.eat();
}
},
pos:{
x:Math.round(Math.random()*39)*20,
y:Math.round(Math.random()*39)*20,
},

food:function(){
var food=document.createElement(‘div‘);
food.className=‘food‘;
food.style.left=snake.pos.x+‘px‘;
food.style.top=snake.pos.y+‘px‘;
snake.oBigDiv.appendChild(food);
},
eat:function(){//吃食物
var she=document.createElement(‘div‘);
she.className=‘lei‘;
snake.oBigDiv.appendChild(she);
snake.pos.x=Math.round(Math.random()*39)*20;
snake.pos.y=Math.round(Math.random()*39)*20;
snake.oBigDiv.removeChild(snake.oBigDiv.getElementsByClassName(‘food‘)[0]);
snake.food();
}
}
snake.food();
document.onkeydown=function(ev){
var oEvent=ev||event;
snake.color();
snake.oEvent=oEvent;
snake.move(snake.oEvent);
}
}

</script>
</head>
<style>
.food{
position:absolute;
background:#FF0;
width:20px;
height:20px;
float:left;
}
.lei{
width:20px;
height:20px;
background:#063;
position:absolute;
float:left;
}
#lei1{
border:1px solid #000;
width:798px;
height:798px;
position:absolute;
top:150px;
left:50px;
}
#text{
background:#9F3;
width:800px;
height:100px;
position:absolute;
left:50px;
}
</style>
<body>
<div id="text">
<h1>说明：上下左右控制方向，小键盘1加速，2减速，space键暂停，上下左右随便开始</h1>
</div>
<div id="lei1">
<div class="lei"></div>
<div class="lei"></div>
<div class="lei"></div>
<div class="lei"></div>
<div>
</body>
</html>

js贪吃蛇纯手打代码比较复杂自己瞎弄的 bug 比较多自己一点一点排除弄完全原创

标签：javascript js 游戏

原文地址：http://blog.csdn.net/do_bset_yourself/article/details/45599633

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

js贪吃蛇 纯手打 代码比较复杂 自己瞎弄的 bug 比较多 自己一点一点排除弄 完全原创

js贪吃蛇纯手打代码比较复杂自己瞎弄的 bug 比较多自己一点一点排除弄完全原创