javascript 写的贪吃蛇游戏

<!--
/*****
*
*这个是HTML DOM操作的小工具，类似JQuery 版权为作者所有，可以运用在各种项目中，
*但版权信息需要保存
*@author 龙裕朝
*@date 2010-11-13
*shmilyhe@163.com
*/

var $=function(tag){

var $ = function (i) {return document.getElementById(i)},
addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},
getPos = function (el) {
for (var pos = {x:0, y:0}; el; el = el.offsetParent) {
pos.x += el.offsetLeft;
pos.y += el.offsetTop;
}
return pos;
};

var srcel;
switch(typeof(tag)){
case "string":
if(/(<)\w+(>)/.test(tag)){
srcel=document.createElement(tag.replace(/[<>]/g,""))
}else{
srcel=$(tag);
}
break;
case 'number':
srcel=$(""+tag);
break;
case 'object':
if(tag.el)return tag;
srcel=tag;
break;
case 'array':
break;
}
var init={
el:srcel,
click:function(func){
if(func)addEvent(this.el,'click',func);
return this;
},
focus:function(func){
if(func)addEvent(this.el,'focus',func);
else this.el.focus();
return this;
},
blur:function(func){
if(func)addEvent(this.el,'blur',func);
return this;
},
change:function(func){
if(func)addEvent(this.el,'change',func);
return this;
},
keydown:function(func){
//alert(this.el);
if(func)addEvent(this.el,'keydown',func);
return this;
},
keyup:function(func){
if(func)addEvent(this.el,'keyup',func);
return this;
},
keypress:function(func){
if(func)addEvent(this.el,'keypress',func);
return this;
},
mousedown:function(func){
if(func)addEvent(this.el,'mousedown',func);
return this;
},
mousemove:function(func){
if(func)addEvent(this.el,'mousemove',func);
return this;
},
mouseout:function(func){
if(func)addEvent(this.el,'mouseout',func);
return this;
},
mouseover:function(func){
if(func)addEvent(this.el,'mouseover',func);
return this;
},
mouseup:function(func){
if(func)addEvent(this.el,'mouseup',func);
return this;
},
appendTo:function(obj){
if(typeof(obj)==='string'){
$(obj).appendChild(this.el);
}else{
if(obj.el)obj.el.appendChild(this.el);
else obj.appendChild(this.el);
}
return this;
},
left:function(){
var p= getPos(this.el);
if(p)return p.x;
return 0;
},
top:function(){
var p= getPos(this.el);
if(p)return p.y;
return 0;
},
hide:function(){
this.el.style.display = 'none';
return this;
},
show:function(){
this.el.style.display = '';
return this;
},
val:function(val){
if(this.el.options)return this.selectVal(val);
if(val){this.el.value=val; return this;}
else {
if(''==val){this.el.value=val; return this;}
return this.el.value;
}

},
html:function(val){
if(val){this.el.innerHTML=val;return this;}
else return this.el.innerHTML;
},
disable:function(val){
if(val)this.el.disabled=true;
else this.el.disabled=false;
}
,
select:function(){
try{
var len =this.el.value.length;
var   r   =this.el.createTextRange();
r.moveEnd('character',len);
r.moveStart('character',0);

r.select();
}
catch(e)
{
}
return this;
}
,
css:function(cssJson){
if(typeof(cssJson)=="string"){
this.el.style.cssText=cssJson;
return this;
}
var obj=this.el;
for(var atr in cssJson)obj.style[atr] = cssJson[atr];
return this;
}
,
selectVal:function(val){
if(this.el.options)
if(val){
var opt=this.el.options;
for(var i=0;i<opt.length ; i++){
if(opt[i].value==val){
opt[i].selected=true;
}else{
opt[i].selected=false;
}
}
return this;
}else{
var opt=this.el.options;
for(var i=0;i<opt.length ; i++){
if(opt[i].selected)return opt[i].value;
}
}
}

};
return init;
}

/****
*HTML DOM 小工具结束
*/
//-->

<!--
/**
*贪吃蛇
*/
function createSnake(id){
var timer =null;
var timer2=null;
var U=0;//向上
var R=1;//向右
var D=2;//向下
var L=3;//向左
var LEN=5;
var foward=R;//蛇的走向
//操作的按钮
var start_bt=$('<input>').val('开始').appendTo($(id).el);
start_bt.el.type="button";
var stop_bt=$('<input>').val('停止').appendTo($(id).el);
stop_bt.el.type="button";

var pause_bt=$('<input>').val('暂停').appendTo($(id).el);
pause_bt.el.type="button";

//操作事件队列
var eventQueue=[];

//注册键盘事件
$(document.body).keydown(function(e){
//alert('----)');
var eve=e||event;
switch(eve.keyCode){
case 37:
//foward=L;
eventQueue.push(L);
break;
case 38:
//foward=U;
eventQueue.push(U);
break;
case 39:
//foward=R;
eventQueue.push(R);
break;
case 40:
//foward=D;
eventQueue.push(D);
break;
}
});

var parry=[];
var table = $('<table>').appendTo($(id).el);
var PANELSIZE_X=50;//游戏画布大小
var PANELSIZE_Y=20;//画布大小纵向
var PANEL=[];
var MaxPieCount =5;
var PieCount =0;
function addPie(){//添加食物
if(PieCount<MaxPieCount){
while(true){
var x =parseInt(Math.random()*PANELSIZE_X);
var y =parseInt(Math.random()*PANELSIZE_Y);
var pie=PANEL[y][x];
if(pie.isSelf)continue;
pie.isPie=true;
pie.el.css("background-color:#EE9900");
PieCount++;
break;
}
}
}

var snake={content:[],head:null,len:LEN,stop:function(){
clearInterval(timer);
},move:function(forward){
if(this.head==null)this.head=PANEL[0][0];
if(this.head==null){alert('没有头');
this.stop();
return;
}
var obj =null;
switch(forward){
case U:
obj=this.head.parent;
break;
case R:
obj=this.head.right;
break;
case D:
obj=this.head.next;
break;
case L:
obj=this.head.left;
break;

}
if(!obj||!obj.el){
alert('哟，撞墙了!');
this.stop();
return;
}
this.head=obj;

if(obj.isPie){//吃食物
this.len++;
obj.isPie=false;
obj.isSelf=true;
obj.el.css("background-color:black");
this.content.push(obj);
PieCount--;
}else if(obj.isSelf){//移动
alert("呀！！吃到自己了！");
this.stop();
return;
}else{
this.content.push(obj);
obj.el.css("background-color:black");
//alert(this.content.length+'@'+this.len);
//alert(this.len);
if(this.content.length<this.len){

}else{
var tail= this.content.shift();
tail.isSelf=false;
tail.el.css("background-color:white");
}
}
obj.isSelf=true;
}
};

/**
*蛇走动
*/
function action(){
//alert(new Date())
if(eventQueue.length>0){
foward=eventQueue.shift();
}
snake.move(foward);
}
//timer=setInterval(action,100);
//setInterval(addPie,1000);

/*
*停止
*/
function stop(){
clearInterval(timer);
clearInterval(timer2);
}
stop_bt.click(stop);

/*
*开始
*/
function start(){
timer=setInterval(action,100);
timer2= setInterval(addPie,1000);
}
start_bt.click(start);

/*
*暂停
*/
function pause(){
clearInterval(timer);
clearInterval(timer2);
}
pause_bt.click(pause);

for(var i =0;i<PANELSIZE_Y;i++){
var  arry=[];
var tr =$('<tr>').appendTo(table);
PANEL.push(arry);
for(var j=0;j<PANELSIZE_X;j++){

var td = $('<td>').appendTo(tr);
var p=parry[j]||{};

var warp={el:td,parent:p};
//var right=j<PANELSIZE-1?{left:warp}:{};
var left=j>0?arry[j-1]:null;
if(left){
warp.left=left;
left.right=warp;
}
p.next =warp;
arry[j]=warp;
(function(){
var warpel=warp;
td.click(function(){
//alert("===");
var upflag =warpel;
//var c =0;
for(;upflag&&upflag.el;){
upflag.el.css("background-color:red");
//alert(upflag.parent.el);
upflag= upflag.parent;

}

var downflag =warpel;
for(;downflag&&downflag.el;){
downflag.el.css("background-color:blue");
downflag=downflag.next;
}

var leftflag =warpel;
for(;leftflag&&leftflag.el;){
leftflag.el.css("background-color:green");
leftflag=leftflag.left;
}

var rightflag =warpel;
for(;rightflag&&rightflag.el;){
rightflag.el.css("background-color:yellow");
rightflag=rightflag.right;
}
});
})();
arry[j]=warp;
}
parry=arry;

}
}//sanke funciton end

createSnake('ddd');

table{  border-collapse:collapse;}
td{border:1px #ccc solid;width:12px;height:12px;}

<div id="ddd">
</div>