用JavaScript實現貪吃蛇游戲
本文實例為大家分享了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='http://m.b3g6.com/bcjs/貪吃蛇案例.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, 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];//創建divvar 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);//初始化--重新畫一條小蛇（把之前的小蛇先刪除，再把現在得小蛇顯示出來）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備