JavaScript， 实现贪吃蛇小游戏
欢迎大家提出宝贵的意见和建议，欢迎批评指正！
<!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 Divthis.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>
