JS高級----------------->貪吃蛇案例
阿新 • • 發佈：2018-09-01
ase nbsp eid 暫時 sele last 函數 height ctype
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .map { width: 800px; height: 600px; background-color: #CCC; position: relative; } </style></head> <body> <div class="map"></div> <script> //自調用函數-----食物的 ((function () { //用來保存每個小方塊食物 var elements = []; //食物就是一個對象有，顏色，寬高，橫縱坐標，先定義構造函數然後創建對象 function Food(x, y, width, height, color) { this.x = x || 0; this.y = y || 0; this.width = width || 20; this.height = height || 20; this.color = color || "green"; } //為原型添加初始化的方法（作用：在頁面上顯示這個食物） //因為食物要在地圖上顯示，所以，需要地圖這個參數 Food.prototype.init = function (map) { //每次創建先進行刪除 remove();//創建div var div = document.createElement("div"); //把div加到map中 map.appendChild(div); //設置div的樣式 div.style.width = this.width + "px"; div.style.height = this.height + "px"; div.style.backgroundColor = this.color; //脫離文檔流 div.style.position = "absolute"; //隨機橫縱坐標 this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width; this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height; div.style.left = this.x + "px"; div.style.top = this.y + "px"; //把div加到elements數組中 elements.push(div); }; //私有函數，刪除食物的 function remove() { //elements數組中有這個食物 for (var i = 0; i < elements.length; i++) { var ele = elements[i]; //找到這個元素的父級元素，然後刪除這個子元素 ele.parentNode.removeChild(ele); //把elements中的這個元素刪除 elements.splice(i, 1); } } window.Food = Food; })()); //自調用函數-----小蛇 (function () { var elements = []; //小蛇的構造函數 function Snake(width, height, direction) { //小蛇的每個部分的寬和高 this.width = width || 20; this.height = height || 20; //小蛇的身體 this.body = [ {x: 3, y: 2, color: "red"}, {x: 2, y: 2, color: "orange"}, {x: 1, y: 2, color: "orange"} ]; //方向 this.direction = direction || "right"; } //為原型添加方法-----小蛇初始化的方法 Snake.prototype.init = function (map) { //刪除原來的小蛇 remove(); //循環遍歷創建div for (var i = 0; i < this.body.length; i++) { //數組中的每個數組元素都是一個對象 var obj = this.body[i]; //創建div var div = document.createElement("div"); //把div加入到map中 map.appendChild(div); //設置div的樣式 div.style.width = this.width + "px"; div.style.height = this.height + "px"; div.style.position = "absolute"; div.style.left = obj.x * this.width + "px"; div.style.top = obj.y * this.height + "px"; div.style.backgroundColor = obj.color; //方向暫時不定 //把div加入到elements數組中------目的是為了刪除 elements.push(div); } }; //為原型添加方法，讓小蛇動起來 Snake.prototype.move = function (food, map) { //改變小蛇身體的坐標位置 var i = this.body.length - 1; for (; i > 0; i--) { this.body[i].x = this.body[i - 1].x; this.body[i].y = this.body[i - 1].y; } //判斷方向----改變小蛇的頭的坐標位置 switch (this.direction) { case "right": this.body[0].x += 1; break; case "left": this.body[0].x -= 1; break; case "top": this.body[0].y -= 1; break; case "bottom": this.body[0].y += 1; break; } //判斷有沒有吃到食物 //小蛇的頭的坐標和食物的坐標一致 var headX = this.body[0].x * this.width; var headY = this.body[0].y * this.height; //判斷坐標 if (headX == food.x && headY == food.y) { //獲取小蛇的最後的尾巴 var last = this.body[this.body.length - 1]; //把最後的蛇尾復制一個，重新的加入到小蛇的body中 this.body.push({ x: last.x, y: last.y, color: last.color }); //把食物刪除，重新初始化食物 food.init(map); } }; window.Snake = Snake; //刪除小蛇的私有函數 function remove() { //獲取數組 var i = elements.length - 1; for (; i >= 0; i--) { //從當前子元素找到其父級元素然後再刪除子元素 var ele = elements[i]; //從map中刪除這個元素 ele.parentNode.removeChild(ele); elements.splice(i, 1); } } }()); //自調用函數-----遊戲對象 (function () { var that = null; //遊戲的構造函數 function Game(map) { this.map = map; this.food = new Food(); this.snake = new Snake(); that = this; } Game.prototype.init = function () { //初始化遊戲 //食物初始化 this.food.init(this.map); //小蛇初始化 this.snake.init(this.map); //調用自動移動小蛇的方法 this.runSnake(this.food, this.map); //調用按鍵方法 this.bindKey(); // setInterval(function () { // that.snake.move(that.food, that.map); // that.snake.init(that.map); // }, 150) }; //添加原型方法-------設置小蛇可以自動的跑起來 Game.prototype.runSnake = function (food, map) { //自動的去移動 var timeId = setInterval(function () { //此時的this是window //移動小蛇 this.snake.move(food, map); //初始化小蛇 this.snake.init(map); //橫坐標的最大值 var maxX = map.offsetWidth / this.snake.width; //縱坐標的最大值 var maxY = map.offsetHeight / this.snake.width; //小蛇的頭的坐標 var headX = this.snake.body[0].x; var headY = this.snake.body[0].y; console.log(headX + "-------------" + headY); console.log(maxX); //橫坐標 if (headX < 0 || headX >= maxX) { //撞墻了，停止定時器 clearInterval(timeId); alert("遊戲結束"); } //縱坐標 if (headY < 0 || headY >= maxY) { //撞墻了，停止定時器 clearInterval(timeId); alert("遊戲結束"); } }.bind(that), 150) }; //添加原型方法-----設置用戶按鍵，改變小蛇移動的方向 Game.prototype.bindKey = function () { document.addEventListener("keydown", function (e) { //這裏的this應該是觸發keydown的時間的對象---document //所以這裏的this就是document //獲取按鍵的值 switch (e.keyCode) { case 37: this.snake.direction = "left"; break; case 38: this.snake.direction = "top"; break; case 39: this.snake.direction = "right"; break; case 40: this.snake.direction = "bottom"; break; } }.bind(that), false) }; window.Game = Game; }()); var gm = new Game(document.querySelector(".map")); gm.init(); </script> </body> </html>
JS高級----------------->貪吃蛇案例