使用JavaScript實現(xiàn)貪吃蛇游戲
更新時間:2020年09月29日 17:00:05 作者:Cure The World
這篇文章主要為大家詳細介紹了使用JavaScript實現(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)貪吃蛇游戲的具體代碼,供大家參考,具體內容如下
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="css/index.css" > </head> <body> <div id="map"> </div> <script src="js/tool.js"></script> <script src="js/food.js"></script> <script src="js/snake.js"></script> <script src="js/game.js"></script> <script src="js/main.js"></script> </body> </html>
index.css代碼如下
#map { width: 600px; height: 400px; background-color: #ccc; position: relative; }
food.js代碼如下
//自調函數(shù) 開啟一個新的作用域,避免命名沖突 (function () { //局部作用域 //記錄上一次創(chuàng)建的食物,為刪除做準備 var elements=[]; var position = 'absolute'; //構造函數(shù)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,每個函數(shù)都具有一個子對象prototype,prototype表示了該函數(shù)的原型 // prototype表示一個類屬性的集合。通過new來生成一個類的對象時,prototype對象的屬性就會變成實例化對象的屬性 Food.prototype.render = function (map) { //刪除之前創(chuàng)建的食物 remove(); //動態(tài)創(chuàng)建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]); //刪除數(shù)組元素 elements.splice(i,1); //第一個參數(shù),從哪個元素開始 第二個參數(shù),刪除幾個元素 } } //把Food構造函數(shù) 讓外部可以訪問 window.Food = Food; })() //測試 // var map = document.getElementById('map'); // var food = new Food(); //這里的Food就是window.Food // food.render(map);
snake.js代碼如下
(function () { var position = 'absolute'; //記錄之前創(chuàng)建的蛇 var elements = []; function Snake(options) { options = options || {}; //蛇節(jié)的大小 this.width = options.width || 20; this.height = options.height || 20; //蛇移動的方向 this.direction = options.direction || 'right'; //蛇身體(蛇節(jié)) 第一個元素是蛇頭 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) { //刪除之前創(chuàng)建的蛇 remove(); //把每一蛇節(jié)渲染到地圖上 for (var i = 0,len = this.body.length; i<len; i++){ //蛇節(jié) 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) { //控制蛇的身體移動 (當前蛇節(jié) 到 上一蛇節(jié)的位置) 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){ //讓蛇增加一節(jié) //獲取蛇的最后一節(jié) 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]); //刪除數(shù)組中的元素 elements.splice(i,1); } } //暴露構造函數(shù)給外部 window.Snake = Snake; })() //測試 // var map =document.getElementById('map'); // var sanke = new Snake(); // sanke.render(map);
game.js代碼如下
//使用自調函數(shù),創(chuàng)建一個新的局部作用域,防止命名沖突 (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) } //暴露構造函數(shù)給外部 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; })()
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能
這篇文章主要介紹了bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-02JavaScript 拾碎[三] 使用className屬性
Javascript 還可以通過className 屬性靈活的更改一個標簽元素的CSS 類選擇器來實現(xiàn)樣式的變化。2010-10-10JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)
這篇文章主要介紹了JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06JS+flash實現(xiàn)chrome和ie瀏覽器下同時可以復制粘貼
chrome和ie同時可以復制粘貼,想必大家一直思索的問題在本文將有一個不錯的實現(xiàn),下面為大家介紹下JS+flash是如何實現(xiàn)的,感興趣的朋友可以參考下2013-09-09