您的位置: 首页 > IT文章 > JavaScript， 兑现贪吃蛇小游戏 JavaScript， 兑现贪吃蛇小游戏 分类: IT文章 • 2022-08-02 09:20:19 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 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>
