用JavaScript實現貪吃蛇遊戲
阿新 • • 發佈:2020-10-13
本文例項為大家分享了JavaScript實現貪吃蛇遊戲的具體程式碼,供大家參考,具體內容如下
地圖
地圖:寬,高,背景顏色,因為小蛇和食物都是相對於地圖顯示的,這裡小蛇和食物都是地圖的子元素,隨機位置顯示,脫離文件流的,地圖也需要脫離文件流relative,----css需要設定:寬,高,背景顏色,脫標
食物—div元素
elements---->儲存div的陣列(將來刪除的食物div時候,先從map中刪除div,再從陣列中移除div)
食物:寬,高,背景顏色,橫座標,縱座標
一個食物就是一個物件,這個物件有相應的屬性,這個物件需要在地圖上顯示
最終要建立食物的物件,先有建構函式,並且把相應的值作為引數傳入到建構函式中
1、食物的建構函式—>建立食物物件
2、食物的顯示的方法—>通過物件呼叫方法,顯示食物,設定相應的樣式
2.1.1 因為食物要被小蛇吃掉,吃掉後應該再次出現食物,原來的食物就刪除了
2.1.2 每一次初始化食物的時候先刪除原來的食物,然後重新的初始化食物
2.1.3 通過一個私有的函式(外面不能呼叫的函式)刪除地圖上的食物,同時最開始的食物也相應的儲存到一個數組中,再從這個陣列中把食物刪除
小蛇
小蛇就是一個物件
屬性:每個身體都有寬、高、方向
屬性:身體分三個部分,每個部分都是一個物件,每個部分都有橫縱座標,背景顏色
方法:小蛇要想顯示在地圖上,先刪除之前的小蛇,然後再初始化小蛇(小蛇要移動)
<!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 src="貪吃蛇案例.js"></script> </body> </html>
js
//自呼叫函式--食物 (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.appendChild(div); //設定div的樣式 div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.backgroundColor = this.color; //橫縱座標需要隨機產生 在這先停止 //使div小方塊脫離文件流 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() { for (var i = 0; i < elements.length; i++) { var ele = elements[i]; //找到子元素的父元素,刪除這個子元素 ele.parentNode.removeChild(ele); // 再次把elements中的子元素刪除 elements.splice(0,1);//從0位置開始刪除1個 } } //把food暴露給頂級物件,外部可以使用 window.Food = Food; }()); //自呼叫函式--小蛇 (function () { //放小蛇的每個部分 var elements = []; //建立小蛇的建構函式 function Snake(width,direction) { //小蛇每個部分的寬和高 this.width = width || 20; this.height = height || 20; //小蛇的身體 this.body = [ {x: 3,y: 2,color: 'red'},{x: 2,color: 'orange'},{x: 1,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.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; //把小蛇每部分加到陣列中 elements.push(div); } }; //為小蛇新增原型方法使小蛇移動 Snake.prototype.move = function (food,map) { //先改變小蛇身體移動的位置 var i = this.body.length - 1;//2 for (; i > 0; i--) { //i>0 就不包括頭部 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() { //獲取陣列 var i = elements.length - 1; for (; i >= 0; i--) { //先從當前的子元素中找到該元素的父即元素,然後在刪除這個子元素 (i>=0因為包括頭部) var ele = elements[i]; //從map地圖上刪除這個子元素 ele.parentNode.removeChild(ele); //再刪除陣列中的每個元素 elements.splice(i,1); } } } //把Snake暴露給window window.Snake = Snake; }()); //自呼叫函式--遊戲物件 (function () { var that = null; //遊戲的建構函式 function Game(map) { this.food = new Food();//食物物件 this.snake = new Snake();//小蛇物件 this.map = map;//地圖物件 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) { //自動的去移動 //這裡的this指向window var timeID = setInterval(function () { //移動小蛇 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) }; window.Game = Game; }()); //例項化遊戲物件 var gm = new Game(document.querySelector('.map')); //初始化開始遊戲 gm.init(); //例項化食物物件 // var fd = new Food(); // var map = document.querySelector('.map'); // fd.init(map); // //例項化小蛇物件 // var snake = new Snake(); // snake.init(map);//先在地圖上看到小蛇 // setInterval(function () { // snake.init(map); // snake.move(fd,map); // },150); // snake.init(map);//先在地圖上看到小蛇 // snake.move(fd,map);//走一步 // snake.init(map);//初始化--重新畫一條小蛇(把之前的小蛇先刪除,再把現在得小蛇顯示出來)
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。