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

javascript实现贪吃蛇

2016-02-01 19:38 651 查看 
<html>
<head>
<style>
body
{
background:#444;
}
.rect
{
border:1px solid #94F;
width:680px;
height:680px;
}
.gridred
{
width:38px;
height:38px;
background:red;
border:1px #555 solid;
float:left
}
.gridgreen
{
width:38px;
height:38px;
background:green;
border:1px #555 solid;
float:left
}
.gridblue
{
width:38px;
height:38px;
background:blue;
border:1px #555 solid;
float:left
}
.st
{
width:100;
height:40;
font-size: 30;
font-family:Georgia;
color:#F40;
margin:0.5cm;
top:800px;
background:#FFF;
text-align:center;
}
h1.important
{
color:#FFFF00;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
var Max=17;//格子数
var direction=3;//蛇正在爬行的方向1左 2上 3右 4下
var snack=new Array();
var arr=new Array();
var foodx,foody;
var time;
var gameover1=1;
//获得下一个食物的坐标
function getrand()
{
foodx=Math.round(Math.random()*20)%Max;
foody=Math.round(Math.random()*20)%Max;
}
//推断下一个食物的坐标合法性
function rand()
{
getrand();
while(arr[foodx][foody])
getrand();
var before=document.getElementById(foodx+"_"+foody);
before.setAttribute("class","gridblue");
}
//開始游戏
function begin()
{
if(!gameover1)
return ;
gameover1=0;
console.log(foodx);
var bu=document.getElementById("beg");
bu.disabled=true;
snack.push([8,8]);
var before=document.getElementById(8+"_"+8);
arr[8][8]=1;
before.setAttribute("class","gridred");
rand();
time=setInterval("go()",850);
}

//游戏结束
function gameover()
{
clearInterval(time);
gameover1=1;
alert("gameover!");
var bu=document.getElementById("beg");
bu.disabled=false;
for(var i=0;i<snack.length;i++)
{
var x=snack[i][0];
var y=snack[i][1];
arr[x][y]=0;
var bu=document.getElementById(x+"_"+y);
bu.setAttribute("class","gridgreen");
}
var bu=document.getElementById(foodx+"_"+foody);
bu.setAttribute("class","gridgreen");
snack.length=0;
}
//推断是否出界
function legal(x,y)
{
if(x>=0&&x<Max&&y>=0&&y<Max)
return true;
return false;
}
//蛇行走
function go()
{
if(gameover1)
return ;
var x=snack[snack.length-1][0];
var y=snack[snack.length-1][1];
switch(direction)
{
case 1:y-=1;break;
case 2:x-=1;break;
case 3:y+=1;break;
case 4:x+=1;break;
}
if(!legal(x,y))
{
gameover();
return false;
}
if(arr[x][y]==1)
{
gameover();
return false;
}
arr[x][y]=1;
snack.push([x,y]);
var before=document.getElementById(x+"_"+y);
before.setAttribute("class","gridred");
if(!(x==foodx&&y==foody))
{
var point=snack.shift();
arr[point[0]][point[1]]=0;
var last=document.getElementById(point[0]+"_"+point[1]);
last.setAttribute("class","gridgreen");
}
else
{
rand();
}
return true;
}
function map()//生成地图
{
arr.length=Max;
for(var i=0;i<Max;i++)
{
arr[i]=new Array();
arr[i].length=Max;
}
for(var i=0;i<Max;i++)
for(var j=0;j<Max;j++)
{
arr[i][j]=0;
}
var x=document.getElementById("body");
for(var i=0;i<Max*Max;i++)
{
var local=document.createElement("div");
local.setAttribute("class","gridgreen");
local.id=parseInt(i/Max)+'_'+parseInt(i%Max);
x.appendChild(local);
}
}
//监測键盘按键
$(document).ready(function(){
$("html").keydown(function(event){
keycommand(event.which);
});
});
//按键命令触发
function keycommand(which)
{
if(which!=32&&(which<37||which>40))
return ;
switch (which)
{
case 32:stop();break;
case 37:changeDirection(1);break;
case 38:changeDirection(2);break;
case 39:changeDirection(3);break;
case 40:changeDirection(4);break;
}
}
//改变蛇的方向
function changeDirection(x)
{
if(Math.abs(x-direction)==2)
return ;
direction = x;
clearInterval(time);
if(go())
time=setInterval("go()",800-snack.length*15+50);
}

</script>

</head>
<body onload="map()" >
<br/>
<h1 align="center" class="important">贪吃蛇</h1>
<div align="center">
<div class="rect" id="body" >
</div>
</div>
<div align="center">
<button id="beg" onclick="begin()" class="st">start</button>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航