jquery贪吃蛇
小弟菜鸟不才，上班无聊写贪吃蛇游戏。未完成，就要放假了。先共享下！写得不好，欢迎牛人指导！小弟第一次发帖，大家别喷我？3Q！！！
<!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>贪吃蛇</title>
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script>
<style>
body{padding:0; margin:0;}
.header{margin:0 auto;width:auto;height:30px;text-align:center;}
.center{width:900px;height:450px;border:1px solid red;margin:0 auto}
.gun{width:10px;height:10px;border:1px solid #595959;BACKGROUND-COLOR:#EFF6FF;position:absolute;z-index:1;}
.gun_div{width:10px;height:10px;border:1px solid #595959;BACKGROUND-COLOR:red;position:absolute;z-index:1;}
.gund{width:10px;height:10px;border:1px solid #595959;BACKGROUND-COLOR:yellow;position:absolute;z-index:1;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var su=10;
var div_height=$('div.center').height();
var div_width=$('div.center').width();
var shang=$('div.center').offset().top+10;
var xia=$('div.center').offset().top+div_height-10;
var zuo=$('div.center').offset().left+10;
var you=$('div.center').offset().left+div_width-10;
var first_top=$('#first').offset().top;
var first_left=$('#first').offset().left;
var level=2;//确定障碍物的数量
var flag;
var d=[];
var count=0;
var cn=50;
//createObstacle();
createDiv();
$('#start').click(function(){
if(typeof flag=='undefined'){
flag=self.setInterval($move,300);
$(document).bind('keydown', function() {
code=event.keyCode;
$('#first').data('code',code);
move($('#first'),code);
});
}else{return;}
});
$('#end').click(function(){
window.clearInterval(flag);
flag=undefined;
$(document).unbind('keydown');
});
$('#restart').click(function(){
$('div.gun').each(function(){
if($(this).attr("id")=='first')
$(this).css({top:shang-10,left:zuo-10});
else
$(this).remove();
});
$('#first').data('code',39);
index=0;
});
//$(document).keyup(function(event){
//});
//$(document).keypress(function(event){
//code=event.keyCode;
//if(code==13) $('#start').click();
//if(code==32) $('#end').click();
//move($('#first'),code);
//});
function $move(){
var code=typeof $('#first').data('code')=='undefined'?39:$('#first').data('code');
move($('#first'), code);
}
function move(object,code){
first_top=$('#first').offset().top;
first_left=$('#first').offset().left;
switch(code) {
case 37: var _left=object.offset().left>zuo?object.offset().left-su:object.offset().left+div_width-10;
object.css({top:object.offset().top,left:_left});
moveDiv(object,code);
break
case 38: var _top=object.offset().top>shang?object.offset().top-su:object.offset().top+div_height-10;
object.css({top:_top,left:object.offset().left});
moveDiv(object,code);
break
case 39: var _left=object.offset().left<you?object.offset().left+su:object.offset().left-div_width+10;
object.css({top:object.offset().top,left:_left});
moveDiv(object,code);
break
case 40: var _top=object.offset().top<xia?object.offset().top+su:object.offset().top-div_height+10;
object.css({top:_top,left:object.offset().left});
moveDiv(object,code);
break
default:break
}
}
var index=0;
//每次移动后，需要判断div之间的相对位移，如果相交则移除，在first后面增加div，吧id=div的div移除
function moveDiv(o,c){
var $div=$('#div');
var ma=math(o,$div);
if(index>0){
if($('#div_0').offset().top==o.offset().top&&o.offset().left==$('#div_0').offset().left){
gameover('GAMEOVER!不能走回头路!!!');
}
if(index>3){
for(var i=2;i<index;i++){
var mma=math(o,$('#div_'+i));
if(mma<10){
gameover('GAMEOVER!动车追尾了!!!');
}
}
}
}
if(Math.sqrt(10*10+10*10)>ma){//蛇吃到食物，就要涨长了
$div.remove();
$('#first').after("<div id='div_"+index+"' class='gun'></div>");
if(index==0){
$('#div_0').css({top:first_top,left:first_left});
$('#div_0').data('top',first_top);
$('#div_0').data('left',first_left);
}else{
var i=index-1;
var top=$('#div_'+i).offset().top;
var left=$('#div_'+i).offset().left;
if(c==37) $('#div_'+index).css({top:top,left:left+10});
if(c==38) $('#div_'+index).css({top:top+10,left:left});
if(c==39) $('#div_'+index).css({top:top,left:left-10});
if(c==40) $('#div_'+index).css({top:top-10,left:left});
$('#div_'+index).data('top',top);
$('#div_'+index).data('left',left);
}
index++;
createDiv();
}
$('#div_0').data('top',first_top);
$('#div_0').data('left',first_left);
_move(0);
}
function _move(id){
if(typeof $("#div_"+id).attr('id')!='undefined'){
var $top=$("#div_"+id).offset().top;
var $left=$("#div_"+id).offset().left;
$("#div_"+id).css({top:$("#div_"+id).data('top'),left:$("#div_"+id).data('left')});
i=id+1;
if(typeof $("#div_"+i).attr('id')!='undefined'){
$('#div_'+i).data('top',$top);
$('#div_'+i).data('left',$left);
return _move(i);
}else{
return;
}
}else{
return;
}
}
//随机产生div
function createDiv(){
var cDiv_top=fRandomBy(shang,xia);
var cDiv_left=fRandomBy(zuo,you);
$("<div id='div' class='gun_div'></div>").appendTo("body");
$('#div').css({top:cDiv_top,left:cDiv_left});
}
//计算量div的相对位移
function math(o1,o2){
var left=o1.offset().left-o2.offset().left;
var top=o1.offset().top-o2.offset().top;
var ma=Math.sqrt(left*left+top*top);
return ma;
}
//产生区间之内的随机数
function fRandomBy(under, over){
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
}
}
//随机产生障碍物
function createObstacle(){
var o_top=fRandomBy(shang,xia);
var o_left=fRandomBy(zuo,you);
if(count==0){
d.push({top:o_top,left:o_left});
$("<div id='"+o_top+'-'+o_left+"' class='gund'></div>").appendTo("div.center");
$('#'+o_top+'-'+o_left).css({top:o_top,left:o_left});
count++;
return createObstacle();
}
for(var i=0;i<d.length;i++){
var f=obDiv(d[i],o_top,o_left);
if(f==true&&count<level*cn){
d.push({top:o_top,left:o_left});
$("<div id='"+o_top+'-'+o_left+"' class='gund'></div>").appendTo("div.center");
$('#'+o_top+'-'+o_left).css({top:o_top,left:o_left});
count++;
return createObstacle();
}else if(f==false&&count<level*cn){
return createObstacle();
}else if(count>=level*cn){
return;
}
}
}
function obDiv(d,top,left){
var top=d.top-top;
var left=d.left-left;
var m=Math.sqrt(left*left+top*top);
if(Math.sqrt(10*10+10*10)<m) return true;
else return false;
}
function gameover(msg){
window.clearInterval(flag);
flag=undefined;
$('#end').click();
$('div.gun').each(function(){
if($(this).attr("id")=='first')
$(this).css({top:shang-10,left:zuo-10});
else
$(this).remove();
});
index=0;
alert(msg);
}
});
</script>
<div class="header"><button id="start">开始</button>
<button id="end">暂停</button><button id="restart">重新开始</button></div>
<div class="center">
<div id="first" class="gun"></div>
</div>
</body>
</html>