JavaScript，实现贪吃蛇小游戏

本文链接：https://blog.csdn.net/gloria__zhang/article/details/7669433
欢迎大家提出宝贵的意见和建议，欢迎批评指正！
<!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>贪吃蛇</title>
<style type="text/css">
	div#gameBoard{ position:relative; width: 1000px; height: 500px; background: gray; margin: 0 auto;}
	div#gameControl{ width: 998px; height: 50px; line-height: 50px; border: 1px solid gray; margin: 0 auto;}
	
	div#gameControl span#banner{ float: left;}
	div#gameControl div#buttons{ float: right;}
	
	div.block{ width: 20px; height: 20px; float: left;}
	div.snake_block{ background-color: red; position: absolute; }
	div.food_block{ background-color: yellow; position: absolute; }
</style>
<script type="text/javascript">

	var SNAKE = {};//命名空间
	SNAKE.Config = {
		MAX_ROWS : 25,//定义面板的最大行数
		MAX_COLS : 50	//定义面板的最大列数
	};
	/**
		定义蛇类
	*/
	SNAKE.Snake = function (oBoard){
		
		this.snakeBody = [];//蛇身体
		this.isDead = false;//标识蛇是否死亡
		this.dir = 4;	//1：上 2：下 3：左 4：右
		this.isAlive = true;
		
		//	(20,40),(40, 40),(60, 40)
		for(var i = 3 ; i > 0 ; i--){
			//(20*i, 40)
			var oDivBlock = document.createElement("div");
			oDivBlock.className = "block snake_block";
			oDivBlock.style.left 	= 20*i + "px";
			oDivBlock.style.top 	= 40 + "px";
			oBoard.container.appendChild(oDivBlock);	
			this.snakeBody.push(oDivBlock);//将产生的每一个蛇的div block添加到蛇的身体数组中
			
		}
		this.snakeHead = this.snakeBody[0];
		
		this.moveOn = function(){
			var nextPos 	= {};
			nextPos.left 	= parseInt(this.snakeHead.style.left);
			nextPos.top 	= parseInt(this.snakeHead.style.top);
			//var snakeTail = this.snakeBody.pop();	
			switch(this.dir){
				case 1://↑
					nextPos.top 	-= 20;
					break;
				case 2:	//↓
					nextPos.top 	+= 20;
					break;
				case 3://←
					nextPos.left 	-= 20;
					break;
				case 4://→
					nextPos.left 	+= 20;
					break;
			}
			var oNewHead = document.createElement("div");
			oNewHead.className 	= "block snake_block";
			oNewHead.style.left = nextPos.left + "px";
			oNewHead.style.top 	= nextPos.top + "px";
			this.snakeBody.unshift(oNewHead);
			oBoard.container.appendChild(oNewHead);
			
			var snakeTail = this.snakeBody.pop();
			snakeTail.parentNode.removeChild(snakeTail);
			this.snakeHead =this.snakeBody[0];
			this.eat(oBoard.food);
					
		};//蛇游走
		this.eat = function(food){
			var oFoodBlock = food.getFoodBlock();
			//alert("head"+this.snakeHead.style.left +",food"+ oFoodBlock.style.left)
			if(parseInt(this.snakeHead.style.left) == parseInt(oFoodBlock.style.left) && 
				parseInt(this.snakeHead.style.top) == parseInt(oFoodBlock.style.top)){
				//吃到食物
				this.increaseBody(oFoodBlock);
				oFoodBlock.parentNode.removeChild(oFoodBlock);
				food.locate();
			} else {
				//撞到自己的身体
				for(var i = 1 ; i < this.snakeBody.length ; i++){
					var oSnakeBlock = this.snakeBody[i];
					if( parseInt(this.snakeHead.style.left) == parseInt(oSnakeBlock.style.left) &&
						 parseInt(this.snakeHead.style.top) == parseInt(oSnakeBlock.style.top) ){
						alert("die");
						this.die();
						return;
					}
				}
				//撞墙
				if(parseInt(this.snakeHead.style.left) == -20 || parseInt(this.snakeHead.style.left) == 1000 ||
					parseInt(this.snakeHead.style.top) == -20 || parseInt(this.snakeHead.style.top) == 500){
					alert("die");
					this.die();
					return;
				}
			}
			
		};//蛇吃东西
		this.increaseBody = function(oFoodBlock){
			
			var oNewBlock = document.createElement("div");
			oNewBlock.style.left 	= oFoodBlock.style.left;
			oNewBlock.style.top 	= oFoodBlock.style.top;
			oNewBlock.className		= oFoodBlock.className;
			oBoard.container.appendChild(oNewBlock);
			this.snakeBody.push(oNewBlock);
			
		};//蛇吃到食物长身体 
		this.turnTo = function(dir){
			
			this.dir = dir;
			
		};//蛇改变方向
		this.die = function(){
			this.isAlive = false;
		}
		
	}
	
	/**
		定义食物类
	*/
	SNAKE.Food = function(oBoard){
		this.oFoodBlock ;
		
		this.locate = function(){
			var reLocate ;//表示是否需要重新定位
			this.oFoodBlock = document.createElement("div");
			this.oFoodBlock.className 	= "block food_block";
			do{
				var tempX	= Math.floor(Math.random() * 1000);
				var tempY	= Math.floor(Math.random() * 500);
				tempX = tempX - tempX%20;
				tempY = tempY - tempY%20;		
				
				this.oFoodBlock.style.left = tempX + "px";
				this.oFoodBlock.style.top 	= tempY + "px";
				oBoard.container.appendChild(this.oFoodBlock);
				reLocate = false;
				
				var snake = oBoard.snake;
				for(var i = 0 ; i < snake.snakeBody.length ; i++){
					var oSnakeBlockDiv = snake.snakeBody[i];
					if(( tempX == parseInt(oSnakeBlockDiv.style.left) ) && ( tempY == parseInt(oSnakeBlockDiv.style.top)) ){
					
						reLocate = true;
						break;
						
					}
				}
			}while(reLocate);
			
		
		};//得新定位食物
		//this.locate();
		this.getFoodBlock = function(){
			return this.oFoodBlock;
		}
	}
	
	/**
		定义面板类
	*/
	SNAKE.Board = function (){
		var oGameBoard = document.getElementById("gameBoard");
		
		//this.display = function(){};
		
		//画面板
		for(var rows=0; rows<SNAKE.Config.MAX_ROWS; rows++){
			for(var cols=0; cols<SNAKE.Config.MAX_COLS; cols++){
				//创建div对象，并且给div添加样式
				var oDiv = document.createElement("div");
				oDiv.className = "block";
				oGameBoard.appendChild(oDiv);
			}
		}
		
		this.container = oGameBoard;//定义一个容器属性，代表当前Board对象拥有的容器Dom Div
		
		this.snake = new SNAKE.Snake(this);//面板中有一个小蛇对象
		this.food = new SNAKE.Food(this);//面板中有一个食物对象
		this.food.locate();
		
	}
	
	/**
		定义游戏控制类
	*/
	SNAKE.Game = function(){
		
		this.board 	= null;
		this.snake 	= null;
		this.timer 	= null;
		this.pause	= true;

		this.init 	= function(){//游戏初始化
			this.board = new SNAKE.Board();
			
			snake = this.board.snake;//得到蛇对象
			document.onkeydown = function(keyEvent){
		
				keyEvent = window.event;
				var keyNum = keyEvent.which || keyEvent.keyCode;
				switch(keyNum){		
					case 37://←
						if(snake.dir == 4) break;
						snake.turnTo(3);
						break;
					case 38:
						if(snake.dir == 2) break;
						snake.turnTo(1);
						break;
					case 39:
						if(snake.dir == 3) break;
						snake.turnTo(4);
						break;
					case 40:
						if(snake.dir == 1) break;
						snake.turnTo(2);
						break;
				}
		
			}

		};
		this.startGame = function (){
		
			this.timer = setInterval( function(){

				if(snake.isAlive){
					snake.moveOn();
				}else{
					this.stopGame();	
				}
			
			} , 300);
			
		};
		this.stopGame = function(){
			clearInterval(this.timer);
			alert("Game Over");
		};
		this.pauseGame = function(){
			if(!this.paused){
				clearInterval(this.timer);
				this.paused = true;
			}
			
		};
		this.resumeGame = function(){

			if(this.paused){
				this.startGame();
				this.paused = false;
			}
		};
		
	}
	
	window.onload = function(){
		//创建游戏Game对象
		var game = new SNAKE.Game();
		game.init();//初始化游戏
		
		var oBtnStart = document.getElementById("btnStart");
		oBtnStart.onclick = function(){
			if(this.value == "开始"){
				game.startGame();//开始游戏
				this.value = "结束";
			} else {
				oBtnStart.value = "开始";
				this.stopGame();
			} 
		
		}	
		var oBtnPause = document.getElementById("btnPause");
		oBtnPause.onclick = function(){
			if(this.value == "暂停"){
				game.pauseGame(this);
				this.value = "恢复";
			} else {
				this.value = "暂停";
				game.resumeGame();//开始游戏
			} 
			game.pauseGame(this);
		}
	};
	
</script>
</head>

<body>
	<div id="gameBoard">
    	
    </div>
    <div id="gameControl">
    	<span id="banner">JavaScript 贪吃蛇 By Zhang Bing</span>
        <div id="buttons">
        	<input type="button" value="开始" id="btnStart"/>
            <input type="button" value="暂停" id="btnPause"/>
        </div>
    </div>
</body>
</html>