canvas的贪吃蛇。

laidezhong 2012-02-28 05:28:41

加精

第一次写canvas ...

demo:http://xiaobude.com/app/snake







<!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>HTML canvas 贪吃蛇</title>

<style type="text/css">

	html,body{overflow:hidden;}

</style>

</head>



<body>





<canvas id="canvas" style="background:#eee;border:1px solid #ccc;">你的浏览器不支持canvas,请升级你的浏览器</canvas>

<br /><span style="color:#ccc;font-family:Arial;font-size:12px;">laidezhong(at)gmail.com</span>



<script type="text/javascript">



var setting = {

	width:50,

	height:25,

	pixel:10,

	fps:3,

	gameOver : false,

	paush : false,

	color : "#ef0f6e",

	border: "#ffffff",

	level:{

		"7":[1,0],

		"11":[1,0],

		"14":[1,0],

		"20":[1,1],

		"25":[1,0],

		"30":[1,0],

		"40":[1,1],

		"50":[1,0],

		"70":[1,0],

		"90":[1,0],

		"120":[1,0]

	}

};



var snake = {

	position : [ [2,0],[1,0],[0,0] ],

	keyCode:39,

	forward:[],

	food:[],

	draw : function(){

		ctx.clearRect(0,0,setting.width*setting.pixel,setting.height*setting.pixel)

		var length = this.position.length;

		for(var k = length - 1;k >= 0;k--){

			this.drawDotted( this.position[k] );

		}

		for(var k=0,kk=this.food.length;k<kk;k++){

			this.drawDotted( this.food[k] );

		}

	},

	next:function(){

		var keyCode = snake.keyCode;

		var forwardList = {

			"37" : [-1,0],

			"38" : [0,-1],

			"39" : [1,0],

			"40" : [0,1]

		};

		if( forwardList[keyCode] && snake.forward[0] != forwardList[keyCode][0] && snake.forward[1] != forwardList[keyCode][1] ) snake.forward = forwardList[keyCode];

		var length = this.position.length;

		var last = [ this.position[length-1][0],this.position[length-1][1] ];

		for(var k = length - 1;k >= 0;k--){

			if(k){

				this.position[k][0] = this.position[k-1][0];

				this.position[k][1] = this.position[k-1][1];

			}

		};

		this.position[0][0] += this.forward[0];

		this.position[0][1] += this.forward[1];

		for(var k = length - 1;k >= 0;k--){

			if(k){

				if( this.position[0][0] == this.position[k][0] && this.position[0][1] == this.position[k][1] )setting.gameOver = true;

				if( this.position[0][0] < 0 || this.position[0][1] < 0 || this.position[0][0] >= setting.width || this.position[0][1] >= setting.height)setting.gameOver = true;

			}

		}

		for(var k=0,kk=this.food.length;k<kk;k++){

			if( this.position[0][0] == this.food[k][0] && this.position[0][1] == this.food[k][1] ){

				this.position.push( last );

				this.createFood(k);

			}

		}

		if( setting.level[length]){

			if( setting.level[length][0] )setting.fps+=setting.level[length][0];

			if( setting.level[length][1] ){

				this.createFood(this.food.length)

			}

			setting.level[length] = false;

		}

	},

	createFood:function(key){

		var r = function(n){

			return parseInt(Math.random()*n) + 1;

		}

		var x = r(setting.width-1);

		var y = r(setting.height-1);

		var length = this.position.length;

		for(var k =0;k<length;k++){

			if( x == this.position[k][0] && y == this.position[k][1] ){

				createFood(key);

				return;

			}

		}

		this.food[key] = [x,y];

	},

	drawDotted:function(pos){

		ctx.fillRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );

		ctx.strokeRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );

	}

}



document.body.onkeydown = function(e){

	e = e || window.event;

	var keyCode = e.keyCode;

	if(keyCode == 32){

		setting.paush = !setting.paush;

		return;

	};

	snake.keyCode = keyCode;

}



var canvas = document.getElementById("canvas");

canvas.width = setting.width * setting.pixel;

canvas.height = setting.height * setting.pixel;

var ctx=canvas.getContext("2d");

ctx.fillStyle = setting.color;

ctx.strokeStyle = setting.border;





snake.createFood(0);

loop();

function loop(){

	if(!setting.paush){

		snake.next();

		if(setting.gameOver){

			alert("game over");

			return;

		};

		snake.draw();

	}

	setTimeout( loop,1000/setting.fps );

}





</script>



</body>

</html>