案例：貪吃蛇小游戲
可以玩的小游戲，略復雜，過了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(".map")); //初始化游戲---開始游戲 gm.init(); </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/158304.html
標籤：JavaScript
上一篇：PHP正則運算式常用例子