案例：貪吃蛇小游戲 可以玩的小游戲，略複雜，過了2遍，先pass吧 先創建構造函數，再給原型添加方法。分別創建食物，小蛇和游戲對象。 食物，小蛇的橫縱坐標，設置最大最小值，運動起來的函數，按上下左右鍵的處理函數，吃到的處理函數 <!DOCTYPE html> <html lang="en"> <he ...
案例：貪吃蛇小游戲
可以玩的小游戲，略複雜，過了2遍，先pass吧
先創建構造函數，再給原型添加方法。分別創建食物，小蛇和游戲對象。
食物，小蛇的橫縱坐標，設置最大最小值，運動起來的函數，按上下左右鍵的處理函數，吃到的處理函數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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"; } //為原型添加初始化的方法(作用：在頁面上顯示這個食物) //因為食物要在地圖上顯示,所以,需要地圖的這個參數(map---就是頁面上的.class=map的這個div) 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); } } //把Food暴露給Window,外部可以使用 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.position = "absolute"; div.style.width = this.width + "px"; div.style.height = this.height + "px"; //橫縱坐標 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;//2 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); } } ;//刪除小蛇的私有的函數============================================================================= function remove() { //刪除map中的小蛇的每個div,同時刪除elements數組中的每個元素,從蛇尾向蛇頭方向刪除div var i = elements.length - 1; for (; i >= 0; i--) { //先從當前的子元素中找到該子元素的父級元素,然後再弄死這個子元素 var ele = elements[i]; //從map地圖上刪除這個子元素div ele.parentNode.removeChild(ele); elements.splice(i, 1); } } //把Snake暴露給window,外部可以訪問 window.Snake = Snake; }()); //自調用函數---游戲對象================================================ (function () { var that = null;//該變數的目的就是為了保存游戲Game的實例對象------- //游戲的構造函數 function Game(map) { this.food = new Food();//食物對象 this.snake = new Snake();//小蛇對象 this.map = map;//地圖 that = this;//保存當前的實例對象到that變數中-----------------此時that就是this } //初始化游戲-----可以設置小蛇和食物顯示出來 Game.prototype.init = function () { //初始化游戲 //食物初始化 this.food.init(this.map); //小蛇初始化 this.snake.init(this.map); //調用自動移動小蛇的方法========================||調用了小蛇自動移動的方法 this.runSnake(this.food, this.map); //調用按鍵的方法 this.bindKey();//======================================== }; //添加原型方法---設置小蛇可以自動的跑起來 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.height; //小蛇的頭的坐標 var headX = this.snake.body[0].x; var headY = this.snake.body[0].y; //橫坐標 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); }; //把Game暴露給window,外部就可以訪問Game對象了 window.Game = Game; }()); //初始化游戲對象 var gm = new Game(document.querySelector("
