使用JavaScript實現貪吃蛇游戲
本文實例為大家分享了JavaScript實現貪吃蛇游戲的具體代碼，供大家參考，具體內容如下
index.html代碼如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>貪吃蛇</title> <link rel='stylesheet' href='http://www.cgvv.com.cn/bcjs/css/index.css' ></head><body><div id='map'></div><script src='http://www.cgvv.com.cn/bcjs/js/tool.js'></script><script src='http://www.cgvv.com.cn/bcjs/js/food.js'></script><script src='http://www.cgvv.com.cn/bcjs/js/snake.js'></script><script src='http://www.cgvv.com.cn/bcjs/js/game.js'></script><script src='http://www.cgvv.com.cn/bcjs/js/main.js'></script></body></html>
index.css代碼如下
#map { width: 600px; height: 400px; background-color: #ccc; position: relative;}
food.js代碼如下
//自調函數 開啟一個新的作用域，避免命名沖突(function () { //局部作用域//記錄上一次創建的食物，為刪除做準備 var elements=[]; var position = ’absolute’;//構造函數Food function Food(options) { options = options || {}; this.color = options.color || ’green’; this.width = options.width || 20; this.height = options.height || 20; //食物的位置 this.x = options.x || 0; this.y = options.y || 0; }//把食物渲染到map上// prototype,每個函數都具有一個子對象prototype，prototype表示了該函數的原型// prototype表示一個類屬性的集合。通過new來生成一個類的對象時，prototype對象的屬性就會變成實例化對象的屬性 Food.prototype.render = function (map) { //刪除之前創建的食物 remove(); //動態創建div，顯示頁面上的食物 var div = document.createElement(’div’); map.appendChild(div); elements.push(div); //隨機生成食物 this.x = Tool.getRandom(0,map.offsetWidth/this.width - 1)*this.width; this.y = Tool.getRandom(0,map.offsetHeight/this.height - 1)*this.height; //設置div樣式 div.style.position = position; //脫離文檔流 div.style.background = this.color; div.style.width = this.width + ’px’; div.style.height = this.height + ’px’; div.style.left = this.x + ’px’; div.style.top = this.y + ’px’; }; function remove() { for (var i = elements.length-1;i >= 0;i-- ){ //刪除div elements[i].parentNode.removeChild(elements[i]); //刪除數組元素 elements.splice(i,1); //第一個參數，從哪個元素開始 第二個參數，刪除幾個元素 } } //把Food構造函數 讓外部可以訪問 window.Food = Food;})()//測試// var map = document.getElementById(’map’);// var food = new Food(); //這里的Food就是window.Food// food.render(map);
snake.js代碼如下
(function () { var position = ’absolute’; //記錄之前創建的蛇 var elements = []; function Snake(options) { options = options || {}; //蛇節的大小 this.width = options.width || 20; this.height = options.height || 20; //蛇移動的方向 this.direction = options.direction || ’right’; //蛇身體（蛇節） 第一個元素是蛇頭 this.body = [ {x: 5, y: 2, color: ’red’}, {x: 4, y: 2, color: ’blue’}, {x: 3, y: 2, color: ’blue’}, {x: 2, y: 2, color: ’blue’}, {x: 1, y: 2, color: ’blue’} ]; } Snake.prototype.render = function (map) { //刪除之前創建的蛇 remove(); //把每一蛇節渲染到地圖上 for (var i = 0,len = this.body.length; i<len; i++){ //蛇節 var object = this.body[i]; var div = document.createElement(’div’); map.appendChild(div); //記錄當前蛇 elements.push(div); //設置樣式 div.style.position = position; div.style.width = this.width + ’px’; div.style.height = this.height + ’px’; div.style.left = object.x * this.width + ’px’; div.style.top = object.y * this.height + ’px’; div.style.backgroundColor = object.color; } } //控制蛇移動的方法 Snake.prototype.move = function (food,map) { //控制蛇的身體移動 (當前蛇節 到 上一蛇節的位置) for (var i = this.body.length - 1;i > 0;i--){ this.body[i].x = this.body[i - 1].x; this.body[i].y = this.body[i - 1].y; } //控制蛇頭的移動 //判斷蛇移動的方向 var head = this.body[0]; switch (this.direction){ case ’right’: head.x += 1; break; case ’left’: head.x -=1; break; case ’top’: head.y -=1; break; case ’bottom’: head.y +=1; } //2.4判斷蛇頭是否和食物重合 var headX = head.x * this.width; var headY = head.y * this.height; if (headX === food.x && headY === food.y){ //讓蛇增加一節 //獲取蛇的最后一節 var last = this.body[this.body.length - 1]; this.body.push({ x:last.x, y:last.y, color:last.color }) //隨機在地圖上重新生成食物 food.render(map); } } function remove() { for (var i = elements.length -1;i>= 0;i--){ //刪除div elements[i].parentNode.removeChild(elements[i]); //刪除數組中的元素 elements.splice(i,1); } } //暴露構造函數給外部 window.Snake = Snake;})()//測試// var map =document.getElementById(’map’);// var sanke = new Snake();// sanke.render(map);
game.js代碼如下
//使用自調函數，創建一個新的局部作用域，防止命名沖突(function () { function Game(map) { this.food = new Food(); this.snake = new Snake(); this.map = map; that=this; } Game.prototype.start = function () { //1.把蛇和食物對象渲染到地圖上 this.food.render(this.map); this.snake.render(this.map); //2.開始游戲邏輯 //2.1 讓蛇移動起來 //2.2當蛇遇到邊界游戲結束 runSnake(); //2.3通過鍵盤控制蛇移動的方向 bindKey(); //2.4當蛇遇到食物 做相應的處理 } function bindKey() { document.onkeydown = function (e) { switch (e.keyCode){ case 37: if (that.snake.direction === ’right’) return; that.snake.direction = ’left’; break; case 38: if (that.snake.direction === ’bottom’) return; that.snake.direction = ’top’; break; case 39: if (that.snake.direction === ’left’) return; that.snake.direction = ’right’; break; case 40: if (that.snake.direction === ’top’) return; that.snake.direction = ’bottom’; break; } } } // function runSnake() { var timerId = setInterval(function () { //讓蛇走一格 //在定時器中的function中this是指向window對象的 that.snake.move(that.food,that.map); that.snake.render(that.map); //2.2當蛇遇到邊界游戲結束 var maxX = that.map.offsetWidth / that.snake.width; var maxY = that.map.offsetHeight / that.snake.height; //獲取蛇頭的坐標 var headX = that.snake.body[0].x; var headY = that.snake.body[0].y; if (headX <0 || headX>=maxX){ alert(’Game Over’); clearInterval(timerId); } if (headY <0 || headY >= maxY){ alert(’Game Over’); clearInterval(timerId); } for (var i = that.snake.body.length - 1;i > 0;i--){ if (headX == that.snake.body[i].x && headY == that.snake.body[i].y){ alert(’Game Over’); clearInterval(timerId); break; } } },300) } //暴露構造函數給外部 window.Game = Game;})()// //測試// var map =document.getElementById(’map’);// var game = new Game(map);// game.start();
main.js代碼如下
(function () { var map =document.getElementById(’map’); var game = new Game(map); game.start();})()
Tool.js代碼如下
// 工具對象(function () { var Tool = { getRandom: function (min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } } window.Tool = Tool;})()
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備