用JavaScript實現(xiàn)貪吃蛇游戲

更新時間：2020年10月23日 11:26:49 作者：wms_swag

這篇文章主要為大家詳細介紹了用JavaScript實現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內容如下

地圖

地圖：寬，高，背景顏色，因為小蛇和食物都是相對于地圖顯示的，這里小蛇和食物都是地圖的子元素，隨機位置顯示，脫離文檔流的，地圖也需要脫離文檔流relative，----css需要設置：寬，高，背景顏色，脫標

食物—div元素

elements---->存儲div的數(shù)組（將來刪除的食物div時候，先從map中刪除div，再從數(shù)組中移除div）
食物：寬，高，背景顏色，橫坐標，縱坐標
一個食物就是一個對象，這個對象有相應的屬性，這個對象需要在地圖上顯示
最終要創(chuàng)建食物的對象，先有構造函數(shù)，并且把相應的值作為參數(shù)傳入到構造函數(shù)中
食物要想顯示在地圖上，食物的初始化就是一個行為

1、食物的構造函數(shù)—>創(chuàng)建食物對象
2、食物的顯示的方法—>通過對象調用方法，顯示食物，設置相應的樣式
2.1.1 因為食物要被小蛇吃掉，吃掉后應該再次出現(xiàn)食物，原來的食物就刪除了
2.1.2 每一次初始化食物的時候先刪除原來的食物，然后重新的初始化食物
2.1.3 通過一個私有的函數(shù)（外面不能調用的函數(shù)）刪除地圖上的食物，同時最開始的食物也相應的保存到一個數(shù)組中，再從這個數(shù)組中把食物刪除

小蛇

小蛇就是一個對象
屬性：每個身體都有寬、高、方向
屬性：身體分三個部分，每個部分都是一個對象，每個部分都有橫縱坐標，背景顏色
方法：小蛇要想顯示在地圖上，先刪除之前的小蛇，然后再初始化小蛇（小蛇要移動）
移動思路：把小蛇的頭的坐標給小蛇第一部分的身體，第一部分的身體的坐標給下一個部分身體小蛇的頭，需要單獨的設置：方向

<!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>

//自調用函數(shù)--食物
(function () {
 var elements = [];//用來保存每個小方塊元素
 //創(chuàng)建小方塊對象，需要先構造函數(shù) 小方塊有寬高顏色 橫縱坐標屬性
 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';
 }

 //為原型添加初始化的方法（作用：在頁面上顯示食物）
 //因為食物要在地圖上顯示這個食物，所以需要地圖這個參數(shù)（map--就是class=“.map”這個div）
 Food.prototype.init = function (map) {
 //先刪除這個小食物
 //外部無法訪問到這個函數(shù)
 remove();
 //創(chuàng)建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加到數(shù)組elements中
 elements.push(div);
 };

 //私有的函數(shù)---刪除食物
 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;
}());

//自調用函數(shù)--小蛇
(function () {
 //放小蛇的每個部分
 var elements = [];

 //創(chuàng)建小蛇的構造函數(shù)
 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();
  //循環(huán)遍歷創(chuàng)建div
  for (var i = 0; i < this.body.length; i++) {
  //數(shù)組中的每個元素都是數(shù)組對象
  var obj = this.body[i];
  //創(chuàng)建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;
  //把小蛇每部分加到數(shù)組中
  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);
  }
 };

 //刪除小蛇的私有函數(shù)
 function remove() {
  //獲取數(shù)組
  var i = elements.length - 1;
  for (; i >= 0; i--) {
  //先從當前的子元素中找到該元素的父即元素，然后在刪除這個子元素 (i>=0因為包括頭部)
  var ele = elements[i];
  //從map地圖上刪除這個子元素
  ele.parentNode.removeChild(ele);
  //再刪除數(shù)組中的每個元素
  elements.splice(i, 1);
  }
 }
 }

 //把Snake暴露給window
 window.Snake = Snake;
}());

//自調用函數(shù)--游戲對象
(function () {
 var that = null;

 //游戲的構造函數(shù)
 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應該是觸發(fā)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);//初始化--重新畫一條小蛇（把之前的小蛇先刪除，再把現(xiàn)在得小蛇顯示出來）

更多有趣的經典小游戲實現(xiàn)專題，分享給大家：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
貪吃蛇

JavaScript 防抖和節(jié)流詳解
這篇文章主要介紹了JavaScript 防抖和節(jié)流,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2021-09-09
給ListBox添加雙擊事件示例代碼
如何給ListBox添加雙擊事件，想必有很多的新手朋友們都不會吧，下面有個不錯的示例，感興趣的朋友可以參考下
2013-12-12
JavaScript控制Session操作方法
JavaScript代表客戶端，而Session代表的是服務器（不知道這樣說大家是否能夠理解）接下來介紹JavaScript如何控制Session，感興趣的朋友可以了解下啊
2013-01-01
CSS3+JavaScript實現(xiàn)翻頁幻燈片效果
這篇文章主要介紹了CSS3+JavaScript實現(xiàn)翻頁幻燈片效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-06-06
js document.write()使用介紹
一個最基本的JavaScript命令是document.write。這個命令簡單地打印指定的文本內容到頁面上。為了逐字打印文本，在打印的文本字符串加上單引號
2014-02-02
ES6與CommonJS中的模塊處理的區(qū)別
ES6和CommonJS都有自己的一套處理模塊化代碼的措施，這篇文章主要介紹了ES6與CommonJS中的模塊處理的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
Math.js解決js中小數(shù)精度丟失問題
在JavaScript中進行小數(shù)運算時,會容易出現(xiàn)精度丟失的問題,例如在進行兩個小數(shù)相加時,結果并不是預期的精確值,而是一個近似值,,使用第三方庫Math.js可以避免精度丟失的問題,本文導入Math.js庫和使用Math.js的方法來進行小數(shù)運算,同時還可以指定格式來保留小數(shù)位數(shù)
2023-12-12
JS控制GIF圖片的停止與顯示
這篇文章主要為大家詳細介紹了JS控制GIF圖片的停止與顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
javascript基礎知識講解
本篇適合javascript新手或者學了前端一段時間，對js概念不清晰的同學。本文將講述幾點對于初學者遇到的javascript的坑，相信對javascript基礎薄弱的同學，可以加深對javascript的理解
2017-01-01
Cropper.js進階之實現(xiàn)圓形頭像裁剪功能示例
這篇文章主要為大家介紹了Cropper.js進階之實現(xiàn)圓形頭像裁剪功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05