javascript实现贪吃蛇

浏览数：23 / 时间：2015年06月08日

<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>

javascript实现贪吃蛇,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

javascript实现贪吃蛇