html5实现贪吃蛇游戏

Greedy Snake

       
      
      
 
      
      
      
		 \* { margin: 0; padding: 0; }  
       
     html, body { height: 100%; width: 100%; }  
       
     canvas { display: block; } 
	     function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // PhoneGap is ready
    //
    function onDeviceReady() {
            var h = screen.height - 40;
            var w = screen.width - 20;
        var c=document.getElementById("myCanvas");
        c.setAttribute('width', w);
        c.setAttribute('height', h);
        var cxt=c.getContext("2d");
        cxt.fillStyle="#FF0000";
        cxt.fillRect(0,0,w,h);
    }
   
   
      

 
      
      
      
      
	 var c=document.getElementById("canvas");
	var ctx=c.getContext("2d");
	
	/*var ButtonReady=false;
	var ButtonImage=new Image();
	ButtonImage.onload=function(){
		ButtonReady=true;
	};
	ButtonImage.src="images/buttons.jpg";
	ctx.drawImage(ButtonImage,0,$("canvas").height()/2,$("canvas").width()/3,$("canvas").height()/2);     
*/
	while($(window).get(0).innerWidth<$(window).get(0).innerHeight){
		alert("请使手机横屏");
	}
	    $(window).resize(resizeCanvas);  
    
     function resizeCanvas() {  
       
            $("canvas").attr("width", $(window).get(0).innerWidth);  
       
            $("canvas").attr("height", $(window).get(0).innerHeight);  
				 ctx.fillStyle="#00FF00";
				 
	for(var m=0;m<50;m++){
		ctx.fillRect($("canvas").width()/3-$("canvas").width()/150,m*$("canvas").height()/50,$("canvas").width()/150,$("canvas").height()/50);
		ctx.fillRect($("canvas").width()\*2/3+$("canvas").width()/150,m\*$("canvas").height()/50,$("canvas").width()/150,$("canvas").height()/50);
	}
			/*ctx.fillStyle="#FFFFFF";
            ctx.fillRect(0, 0, $("canvas").width(), $("canvas").height());  
			
			ctx.drawImage(ButtonImage,0,$("canvas").height()/2,$("canvas").width()/3,$("canvas").height()/2);   */      };  
       
     resizeCanvas(); 

	
	var time=500;
	var x=y=8;
	var food_x=0;
	var food_y=0;
	var snake=\[\];
	var dir=2;
	var grow=true;
	function is_alive(){
		for(var i=1;i<snake.length;i++){
			if(snake\[i\].x==snake\[0\].x && snake\[i\].y==snake\[0\].y)
				return false;
		}
		if(snake\[0\].x==0 || snake\[0\].y==0 || snake\[0\].x==50 || snake\[0\].y==50){
				return false;
		}
		return true;
	}
	function  formFood(){
		
		while(true){
		food_x=Math.floor(Math.random()*49+1);
		food_y=Math.floor(Math.random()*49+1);
		var flag=true;
		for(sec in snake){
			if(sec.x==food\_x&&sec.y==food\_y){
				flag=false;
				break;
			}
			
		}
		if(flag)
			break;
		}
		ctx.fillStyle="#FF0000";
		ctx.fillRect($("canvas").width()/3+food_x*$("canvas").width()/150,
			food_y*$("canvas").height()/50,
			$("canvas").width()/150,
			$("canvas").height()/50);
		
	}
	function  movesnake(){
		if(!grow){
		
			ctx.clearRect($("canvas").width()/3+snake\[snake.length-1\].x*$("canvas").width()/150-1,
			snake\[snake.length-1\].y*$("canvas").height()/50-1,
			$("canvas").width()/150+2,
			$("canvas").height()/50+2);
			for(var i=snake.length-1;i>0;i--){
				snake\[i\].x=snake\[i-1\].x;
				snake\[i\].y=snake\[i-1\].y;
			}
			
		}
		else{
			snake.push({x:snake\[snake.length-1\].x,y:snake\[snake.length-1\].y});
			for(var i=snake.length-2;i>0;i--){
				snake\[i\].x=snake\[i-1\].x;
				snake\[i\].y=snake\[i-1\].y;
			}
			grow=false;
		}
		switch(dir){
			case 1:{
				snake\[0\].x--;
				break;
			}
			case 2:{
				snake\[0\].x++;
				break;
			}
			case 3:{
				snake\[0\].y--;
				break;
			}
			case 4:{
				snake\[0\].y++;
				break;
			}
			default:{
				alert("call on defult");
			}
		}
		ctx.fillStyle="#000000";
		ctx.fillRect($("canvas").width()/3+snake\[0\].x*$("canvas").width()/150,
			snake\[0\].y*$("canvas").height()/50,
			$("canvas").width()/150,
			$("canvas").height()/50);
		
		if(!is_alive()){
		alert("蛇死掉了！蛇的最终长度为："+snake.length);
		window.location.reload();
		}
		if(snake\[0\].x==food\_x&&snake\[0\].y==food\_y){
		grow=true;
		formFood();
		}
	}
	snake.push({x:25,y:25});
	snake.push({x:24,y:25});
	snake.push({x:23,y:25});
	snake.push({x:22,y:25});
	for(var i=0;i<snake.length;i++){
	ctx.fillStyle="#000000";
			ctx.fillRect($("canvas").width()/3+snake\[i\].x*$("canvas").width()/150,
			snake\[i\].y*$("canvas").height()/50,
			$("canvas").width()/150,
			$("canvas").height()/50);
		
	}
	formFood();
	setInterval("movesnake()",500);
	canvas.onmousedown = function(e){
			switch(dir){
			case 1:{
			}
			case 2:{
				if(e.pageY>snake\[0\].y*$("canvas").height()/50)dir=4;
				else dir=3;
				break;
			}
			case 3:{
			}
			case 4:{
				if(e.pageX>$("canvas").width()/3+snake\[0\].x*$("canvas").width()/150)dir=2;
				else dir=1;
				break;
			}
			default:{
				alert("call on defult");
			}
		}
	}	;