使用JavaScript實(shí)現(xiàn)貪吃蛇游戲
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下
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.b3g6.com/bcjs/css/index.css' ></head><body><div id='map'></div><script src='http://www.b3g6.com/bcjs/js/tool.js'></script><script src='http://www.b3g6.com/bcjs/js/food.js'></script><script src='http://www.b3g6.com/bcjs/js/snake.js'></script><script src='http://www.b3g6.com/bcjs/js/game.js'></script><script src='http://www.b3g6.com/bcjs/js/main.js'></script></body></html>
index.css代碼如下
#map { width: 600px; height: 400px; background-color: #ccc; position: relative;}
food.js代碼如下
//自調(diào)函數(shù) 開(kāi)啟一個(gè)新的作用域，避免命名沖突(function () { //局部作用域//記錄上一次創(chuàng)建的食物，為刪除做準(zhǔn)備 var elements=[]; var position = ’absolute’;//構(gòu)造函數(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,每個(gè)函數(shù)都具有一個(gè)子對(duì)象prototype，prototype表示了該函數(shù)的原型// prototype表示一個(gè)類屬性的集合。通過(guò)new來(lái)生成一個(gè)類的對(duì)象時(shí)，prototype對(duì)象的屬性就會(huì)變成實(shí)例化對(duì)象的屬性 Food.prototype.render = function (map) { //刪除之前創(chuàng)建的食物 remove(); //動(dòng)態(tài)創(chuàng)建div，顯示頁(yè)面上的食物 var div = document.createElement(’div’); map.appendChild(div); elements.push(div); //隨機(jī)生成食物 this.x = Tool.getRandom(0,map.offsetWidth/this.width - 1)*this.width; this.y = Tool.getRandom(0,map.offsetHeight/this.height - 1)*this.height; //設(shè)置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); //第一個(gè)參數(shù)，從哪個(gè)元素開(kāi)始 第二個(gè)參數(shù)，刪除幾個(gè)元素 } } //把Food構(gòu)造函數(shù) 讓外部可以訪問(wèn) window.Food = Food;})()//測(cè)試// 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; //蛇移動(dòng)的方向 this.direction = options.direction || ’right’; //蛇身體（蛇節(jié)） 第一個(gè)元素是蛇頭 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); //記錄當(dāng)前蛇 elements.push(div); //設(shè)置樣式 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; } } //控制蛇移動(dòng)的方法 Snake.prototype.move = function (food,map) { //控制蛇的身體移動(dòng) (當(dāng)前蛇節(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; } //控制蛇頭的移動(dòng) //判斷蛇移動(dòng)的方向 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 }) //隨機(jī)在地圖上重新生成食物 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); } } //暴露構(gòu)造函數(shù)給外部 window.Snake = Snake;})()//測(cè)試// var map =document.getElementById(’map’);// var sanke = new Snake();// sanke.render(map);
game.js代碼如下
//使用自調(diào)函數(shù)，創(chuàng)建一個(gè)新的局部作用域，防止命名沖突(function () { function Game(map) { this.food = new Food(); this.snake = new Snake(); this.map = map; that=this; } Game.prototype.start = function () { //1.把蛇和食物對(duì)象渲染到地圖上 this.food.render(this.map); this.snake.render(this.map); //2.開(kāi)始游戲邏輯 //2.1 讓蛇移動(dòng)起來(lái) //2.2當(dāng)蛇遇到邊界游戲結(jié)束 runSnake(); //2.3通過(guò)鍵盤(pán)控制蛇移動(dòng)的方向 bindKey(); //2.4當(dāng)蛇遇到食物 做相應(yīng)的處理 } 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 () { //讓蛇走一格 //在定時(shí)器中的function中this是指向window對(duì)象的 that.snake.move(that.food,that.map); that.snake.render(that.map); //2.2當(dāng)蛇遇到邊界游戲結(jié)束 var maxX = that.map.offsetWidth / that.snake.width; var maxY = that.map.offsetHeight / that.snake.height; //獲取蛇頭的坐標(biāo) 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) } //暴露構(gòu)造函數(shù)給外部 window.Game = Game;})()// //測(cè)試// 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代碼如下
// 工具對(duì)象(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;})()
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. idea自定義快捷鍵的方法步驟2. 解析原生JS getComputedStyle3. Docker容器如何更新打包并上傳到阿里云4. IntelliJ IDEA設(shè)置條件斷點(diǎn)的方法步驟5. IntelliJ IDEA設(shè)置編碼格式的方法6. 使用IDEA編寫(xiě)jsp時(shí)EL表達(dá)式不起作用的問(wèn)題及解決方法7. Docker究竟是什么 為什么這么流行 它的優(yōu)點(diǎn)和缺陷有哪些？8. idea設(shè)置代碼格式化的方法步驟9. IntelliJ IDEA導(dǎo)出項(xiàng)目的方法10. 刪除docker里建立容器的操作方法
網(wǎng)公網(wǎng)安備