欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2020年09月29日 17:00:05   作者:Cure The World  
這篇文章主要為大家詳細介紹了使用JavaScript實現(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

index.html代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>貪吃蛇</title>
 <link rel="stylesheet" href="css/index.css" >
</head>
<body>
<div id="map">

</div>


<script src="js/tool.js"></script>
<script src="js/food.js"></script>
<script src="js/snake.js"></script>
<script src="js/game.js"></script>
<script src="js/main.js"></script>
</body>
</html>

index.css代碼如下

#map {
 width: 600px;
 height: 400px;
 background-color: #ccc;
 position: relative;
}

food.js代碼如下

//自調(diào)函數(shù) 開啟一個新的作用域,避免命名沖突
(function () {
 //局部作用域

//記錄上一次創(chuàng)建的食物,為刪除做準備
 var elements=[];
 var position = 'absolute';
//構(gòu)造函數(shù)Food
 function Food(options) {
 options = options || {};
 this.color = options.color || 'green';

 this.width = options.width || 20;
 this.height = options.height || 20;
 //食物的位置
 this.x = options.x || 0;
 this.y = options.y || 0;
 }

//把食物渲染到map上
// prototype,每個函數(shù)都具有一個子對象prototype,prototype表示了該函數(shù)的原型
// prototype表示一個類屬性的集合。通過new來生成一個類的對象時,prototype對象的屬性就會變成實例化對象的屬性
 Food.prototype.render = function (map) {
 //刪除之前創(chuàng)建的食物
 remove();

 //動態(tài)創(chuàng)建div,顯示頁面上的食物
 var div = document.createElement('div');
 map.appendChild(div);

 elements.push(div);
 //隨機生成食物
 this.x = Tool.getRandom(0,map.offsetWidth/this.width - 1)*this.width;
 this.y = Tool.getRandom(0,map.offsetHeight/this.height - 1)*this.height;

 //設置div樣式
 div.style.position = position; //脫離文檔流
 div.style.background = this.color;
 div.style.width = this.width + 'px';
 div.style.height = this.height + 'px';
 div.style.left = this.x + 'px';
 div.style.top = this.y + 'px';
 };

 function remove() {
 for (var i = elements.length-1;i >= 0;i-- ){
 //刪除div
 elements[i].parentNode.removeChild(elements[i]);
 //刪除數(shù)組元素
 elements.splice(i,1); //第一個參數(shù),從哪個元素開始 第二個參數(shù),刪除幾個元素
 }
 }
 //把Food構(gòu)造函數(shù) 讓外部可以訪問
 window.Food = Food;
})()
//測試
// var map = document.getElementById('map');
// var food = new Food(); //這里的Food就是window.Food
// food.render(map);

snake.js代碼如下

(function () {
 var position = 'absolute';
 //記錄之前創(chuàng)建的蛇
 var elements = [];
 function Snake(options) {
 options = options || {};
 //蛇節(jié)的大小
 this.width = options.width || 20;
 this.height = options.height || 20;
 //蛇移動的方向
 this.direction = options.direction || 'right';
 //蛇身體(蛇節(jié)) 第一個元素是蛇頭
 this.body = [
 {x: 5, y: 2, color: 'red'},
 {x: 4, y: 2, color: 'blue'},
 {x: 3, y: 2, color: 'blue'},
 {x: 2, y: 2, color: 'blue'},
 {x: 1, y: 2, color: 'blue'}
 ];
 }
 Snake.prototype.render = function (map) {
 //刪除之前創(chuàng)建的蛇
 remove();
 //把每一蛇節(jié)渲染到地圖上
 for (var i = 0,len = this.body.length; i<len; i++){
 //蛇節(jié)
 var object = this.body[i];
 var div = document.createElement('div');
 map.appendChild(div);

 //記錄當前蛇
 elements.push(div);
 //設置樣式
 div.style.position = position;
 div.style.width = this.width + 'px';
 div.style.height = this.height + 'px';
 div.style.left = object.x * this.width + 'px';
 div.style.top = object.y * this.height + 'px';
 div.style.backgroundColor = object.color;
 }
 }
 //控制蛇移動的方法
 Snake.prototype.move = function (food,map) {
 //控制蛇的身體移動 (當前蛇節(jié) 到 上一蛇節(jié)的位置)
 for (var i = this.body.length - 1;i > 0;i--){
 this.body[i].x = this.body[i - 1].x;
 this.body[i].y = this.body[i - 1].y;
 }
 //控制蛇頭的移動
 //判斷蛇移動的方向
 var head = this.body[0];
 switch (this.direction){
 case 'right':
 head.x += 1;
 break;
 case 'left':
 head.x -=1;
 break;
 case 'top':
 head.y -=1;
 break;
 case 'bottom':
 head.y +=1;
 }


 //2.4判斷蛇頭是否和食物重合
 var headX = head.x * this.width;
 var headY = head.y * this.height;
 if (headX === food.x && headY === food.y){
 //讓蛇增加一節(jié)
 //獲取蛇的最后一節(jié)
 var last = this.body[this.body.length - 1];
 this.body.push({
 x:last.x,
 y:last.y,
 color:last.color
 })
 //隨機在地圖上重新生成食物
 food.render(map);
 }
 }

 function remove() {
 for (var i = elements.length -1;i>= 0;i--){
 //刪除div
 elements[i].parentNode.removeChild(elements[i]);
 //刪除數(shù)組中的元素
 elements.splice(i,1);
 }
 }
 //暴露構(gòu)造函數(shù)給外部
 window.Snake = Snake;
})()

//測試
// var map =document.getElementById('map');
// var sanke = new Snake();
// sanke.render(map);

game.js代碼如下

//使用自調(diào)函數(shù),創(chuàng)建一個新的局部作用域,防止命名沖突
(function () {
 function Game(map) {
 this.food = new Food();
 this.snake = new Snake();
 this.map = map;
 that=this;
 }
 Game.prototype.start = function () {
 //1.把蛇和食物對象渲染到地圖上
 this.food.render(this.map);
 this.snake.render(this.map);
 //2.開始游戲邏輯
 //2.1 讓蛇移動起來
 //2.2當蛇遇到邊界游戲結(jié)束
 runSnake();
 //2.3通過鍵盤控制蛇移動的方向
 bindKey();
 //2.4當蛇遇到食物 做相應的處理
 }

 function bindKey() {
 document.onkeydown = function (e) {
 switch (e.keyCode){
 case 37:
 if (that.snake.direction === 'right') return;
 that.snake.direction = 'left';
 break;
 case 38:
 if (that.snake.direction === 'bottom') return;
 that.snake.direction = 'top';
 break;
 case 39:
 if (that.snake.direction === 'left') return;
 that.snake.direction = 'right';
 break;
 case 40:
 if (that.snake.direction === 'top') return;
 that.snake.direction = 'bottom';
 break;
 }
 }
 }

 //
 function runSnake() {
 var timerId = setInterval(function () {
 //讓蛇走一格
 //在定時器中的function中this是指向window對象的
 that.snake.move(that.food,that.map);
 that.snake.render(that.map);

 //2.2當蛇遇到邊界游戲結(jié)束

 var maxX = that.map.offsetWidth / that.snake.width;
 var maxY = that.map.offsetHeight / that.snake.height;
 //獲取蛇頭的坐標
 var headX = that.snake.body[0].x;
 var headY = that.snake.body[0].y;

 if (headX <0 || headX>=maxX){
 alert('Game Over');
 clearInterval(timerId);
 }
 if (headY <0 || headY >= maxY){
 alert('Game Over');
 clearInterval(timerId);
 }
 for (var i = that.snake.body.length - 1;i > 0;i--){
 if (headX == that.snake.body[i].x && headY == that.snake.body[i].y){
 alert('Game Over');
 clearInterval(timerId);
 break;
 }
 }
 },300)
 }


 //暴露構(gòu)造函數(shù)給外部
 window.Game = Game;
})()

// //測試
// var map =document.getElementById('map');
// var game = new Game(map);
// game.start();

main.js代碼如下

(function () {
 var map =document.getElementById('map');
 var game = new Game(map);
 game.start();
})()

Tool.js代碼如下

// 工具對象

(function () {
 var Tool = {
 getRandom: function (min, max) {
 min = Math.ceil(min);
 max = Math.floor(max);
 return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 }
 window.Tool = Tool;
})()

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

相關文章

  • bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能

    bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能

    這篇文章主要介紹了bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下
    2017-02-02
  • JavaScript 拾碎[三] 使用className屬性

    JavaScript 拾碎[三] 使用className屬性

    Javascript 還可以通過className 屬性靈活的更改一個標簽元素的CSS 類選擇器來實現(xiàn)樣式的變化。
    2010-10-10
  • Uniapp中使用Echarts的詳細過程

    Uniapp中使用Echarts的詳細過程

    這篇文章主要介紹了Uniapp中使用Echarts的示例詳解這里只舉例折線圖,介紹了uni-app微信小程序使用echarts的方法,下載echart組件,可以先隨便建個文件夾,然后 npm init,接著下載依賴,需要的朋友可以參考下
    2022-11-11
  • layui table復選框禁止某幾條勾選的實例

    layui table復選框禁止某幾條勾選的實例

    今天小編就為大家分享一篇layui table復選框禁止某幾條勾選的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)

    JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)

    這篇文章主要介紹了JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • 一次JavaScript正則的詭異經(jīng)歷記錄

    一次JavaScript正則的詭異經(jīng)歷記錄

    正則表達式是用于匹配字符串中字符組合的模式,下面這篇文章主要給大家介紹了一次JavaScript正則的詭異經(jīng)歷記錄,文中通過實例介紹的非常詳細,需要的朋友可以參考下
    2022-04-04
  • 微信小程序淘寶首頁雙排圖片布局排版代碼(推薦)

    微信小程序淘寶首頁雙排圖片布局排版代碼(推薦)

    這篇文章主要介紹了微信小程序淘寶首頁雙排圖片布局排版代碼,本文通過圖文實例相結(jié)合給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-10
  • JS+flash實現(xiàn)chrome和ie瀏覽器下同時可以復制粘貼

    JS+flash實現(xiàn)chrome和ie瀏覽器下同時可以復制粘貼

    chrome和ie同時可以復制粘貼,想必大家一直思索的問題在本文將有一個不錯的實現(xiàn),下面為大家介紹下JS+flash是如何實現(xiàn)的,感興趣的朋友可以參考下
    2013-09-09
  • ES6中參數(shù)的默認值語法介紹

    ES6中參數(shù)的默認值語法介紹

    這ES6允許為函數(shù)參數(shù)設置默認值,即直接寫在參數(shù)定義后面。下面篇文章主要介紹了ES6中參數(shù)默認值語法的相關資料,對大家具有一定的參考價值,需要的朋友下面來一起看看吧。
    2017-05-05
  • layui點擊按鈕添加可編輯的一行方法

    layui點擊按鈕添加可編輯的一行方法

    今天小編就為大家分享一篇layui點擊按鈕添加可編輯的一行方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

最新評論