javascript 写的贪吃蛇游戏

直接上代码吧  源码可以直接在这下载 http://download.csdn.net/detail/shmilyhe/6709577

<!--
/*****
*
*这个是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>