html5贪吃蛇小游戏

好一阵子前自己随便写的：

js代码：

	//将method作用域绑定于一个目标
	function makeCallback(method,target){
		return function(){method.apply(target,arguments);}
	}
	//坐标点类
	var point = function(x,y){
		this.x = x;
		this.y = y;
		this.comp = function(tempPoint){
			if(tempPoint.x==this.x&&tempPoint.y==this.y)return true;
			else return false;
		};
	};
	//蛇类
	var snake = function(){
		this.pointArr = new Array();
		this.dir = 1;
		this.food = null;
		this.gogo = null;
		this.putFood = function(){
			var x,y;		
			while(1){
				var flag = 0;
				x = Math.round(Math.random()*79);
				y = Math.round(Math.random()*49);
				for(var i = 0;i<this.pointArr.length;i++){
					if(x==this.pointArr[i].x&&y==this.pointArr[i].y){
						flag = 1;
						break;
					}
				}
				if(flag==0)break;
			}
			this.food.x = x;
			this.food.y = y;
			
		};
		this.move = makeCallback(function(){
			for(var j=1;j<this.pointArr.length;j++){
				if(this.pointArr[j].x==this.pointArr[0].x&&this.pointArr[j].y==this.pointArr[0].y){
					clearInterval(this.gogo);
					alert("吃到自己了啊亲~~");
				}
			}
			if(this.pointArr[0].x>=80||this.pointArr[0].y>=50||this.pointArr[0].x<0||this.pointArr[0].y<0){
				clearInterval(this.gogo);
				alert("撞墙了啊亲~~");
			}
			var popPoint = this.pointArr.pop();
			switch(this.dir){
				case 0:
					var tempPoint = new point(this.pointArr[0].x,this.pointArr[0].y-1);
					if(this.food.comp(tempPoint)){
						this.pointArr.push(popPoint);
						this.putFood();
					}
					this.pointArr.unshift(tempPoint);
					break;
				case 1:
					var tempPoint = new point(this.pointArr[0].x+1,this.pointArr[0].y);
					if(this.food.comp(tempPoint)){
						this.pointArr.push(popPoint);
						this.putFood();
					}
					this.pointArr.unshift(tempPoint);
					break;
				case 2:
					var tempPoint = new point(this.pointArr[0].x,this.pointArr[0].y+1);
					if(this.food.comp(tempPoint)){
						this.pointArr.push(popPoint);
						this.putFood();
					}
					this.pointArr.unshift(tempPoint);
					break;
				case 3:
					var tempPoint = new point(this.pointArr[0].x-1,this.pointArr[0].y);
					if(this.food.comp(tempPoint)){
						this.pointArr.push(popPoint);
						this.putFood();
					}
					this.pointArr.unshift(tempPoint);
					break;
				default:;
			}
			context.clearRect(0,0,800,500);
			for(var i=0;i<this.pointArr.length;i++){
				context.fillStyle='#FF0000';
				context.fillRect(this.pointArr[i].x*10,this.pointArr[i].y*10,10,10);
				context.fillStyle='#87CEFA';
				context.strokeRect(this.pointArr[i].x*10,this.pointArr[i].y*10,10,10);
			}
			context.fillStyle='#FF0000';
			context.fillRect(this.food.x*10,this.food.y*10,10,10);
		},this);
		this.init = function(){
			this.pointArr = [new point(22,20),new point(21,20),new point(20,20)];
			this.dir = 1;
			this.food = new point(30,20);
			this.gogo = setInterval(this.move,50);
		};
		
	};
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext("2d");	
	var aSnake = new snake();
	aSnake.init();
	$(document).bind('keydown',function (event){
		switch (event.keyCode) {
			case 38://up
				if(aSnake.dir == 2)break;
				aSnake.dir = 0;
				break;
			case 40://down
				if(aSnake.dir == 0)break;
				aSnake.dir = 2;
				break;
			case 37://left
				if(aSnake.dir == 1)break;
				aSnake.dir = 3;
				break;
			case 39://right
				if(aSnake.dir == 3)break;
				aSnake.dir = 1;
			break;
		}
	});

 html代码：

<!DOCTYPE html>
<html>
<head>
<style>
</style>

<script src="jquery-1.7.2.min.js"></script>	

<script>


	
</script>
</head>
<body style="margin:0;padding:50px;">
<canvas id="canvas" width="800" height="500" style="border:solid 1px black"></canvas>
<script src="mySnake.js"></script>
</body>
</html>

 

 

 

posted @ 2012-12-19 23:44  plusice  阅读(306)  评论(0)    收藏  举报