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

JS實現貪吃蛇小游戲

 更新時間：2021年11月25日 16:39:09   作者：愛做夢的沙丁魚  
本文詳細講解了JS實現貪吃蛇小游戲的過程，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

頁面效果：

貪吃蛇游戲是中介者模式開發(fā)的，我們這個貪吃蛇案例不是像之前一樣都寫在一個HTML文件中，而是進行了類的拆分，單獨js表示每一個類，中介類是Game類

一、初始化結構

首先我們要進行頁面的初始化，初始化布局不是直接寫html標簽里面，而是通過game進行初始化結點上樹

我們設置的是20行20列的表格，用this.row表示行，this.col表示列

Games.prototype.init = function () {
    this.dom = document.createElement('table');
    var tr, td;
    //遍歷行和列上樹
    for (var i = 0; i < this.row; i++) {
        // 遍歷行，創(chuàng)建結點上樹
        tr = document.createElement('tr');
 
        for (var j = 0; j < this.col; j++) {
            // 遍歷列，創(chuàng)建結點上樹
            td = document.createElement('td');
            // 追加結點上樹
            tr.appendChild(td);
 
 
            // 追加結點上樹
            this.dom.appendChild(tr);
 
        }
    }
    // 表格上樹
    document.getElementById('app').appendChild(this.dom);
}

實現效果：

二、渲染蛇的顏色?

渲染蛇的邏輯：蛇類調用Game類的setColor方法，因為本質就是table表格渲染顏色，table表格在Game類初始化創(chuàng)建的，所以理因讓Game設置渲染顏色的方法

// 設置顏色的方法
Games.prototype.setColor = function (row, col, color) {
    // 讓表格的第幾行第幾列設置什么顏色
    this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.backgroundColor = color;
}

此時我們讓Snake類調用game的setColor方法

Snake.prototype.render = function () {
    //   蛇的渲染
    game.setColor(this.body[0].row, this.body[0].col, 'pink');
    // 蛇的身體
    for (var i = 1; i < this.body.length; i++) {
        game.setColor(this.body[i].row, this.body[i].col, 'skyblue');
    }
}

此時有一個問題,Snake的render誰來調用？用過我們Snake自己的構造函數中調用得不到game，因為此時的Game類的四部走還沒有執(zhí)行完，所有現在是undefined

解決方法就是定時器去調用，因為定時器是異步的，所以不會阻止Game類的四部走

    this.timer = setInterval(function () {
        // 定時器里面的核心就是游戲的渲染本質，清屏-更新-渲染
        // 渲染蛇
        game.snake.render();
    }, 20);

實現效果：?

三、蛇的運動

蛇的運動其實就是蛇在進行body數組的更新，本質就是body數組中尾部刪除，頭部增加，所以蛇會渲染新的狀態(tài)

Snake.prototype.update = function () {
 
    // 當前的direction接收willdirection
    this.direction = this.willDirection;
    switch (this.direction) {
        case 'R':
            this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col + 1 });
            break;
        case 'D':
            this.body.unshift({ 'row': this.body[0].row + 1, 'col': this.body[0].col });
            break;
        case 'L':
            this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col - 1 });
            break;
        case 'T':
            this.body.unshift({ 'row': this.body[0].row - 1, 'col': this.body[0].col });
            break;
    }

此時你會發(fā)現蛇會越來越長

是因為我們只是告訴了蛇如何渲染顏色，之前渲染過的我們需要擦除一下

我們給Game設置一個擦除屏幕的方法

// 清屏
Games.prototype.clear = function () {
    for (var i = 0; i < this.row; i++) {
        for (var j = 0; j < this.col; j++) {
            this.dom.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].style.backgroundColor = '#fff';
            this.dom.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].innerHTML = '';
        }
    }
}

接下來我們要在定時器中進行游戲的三步走：清屏-更新和渲染

 // 清屏
        game.clear();
        // 蛇的運動/更新
        // 蛇的更新速度  當蛇邊長的時候，速度加快
        var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
        // 蛇的更新
        game.f % during == 0 && game.snake.update();
        // 渲染蛇
        game.snake.render();

蛇在不同的方向進行運動，可以給Game設置一個bindEvent事件，進行鍵盤事件監(jiān)聽，改變不同方向，并且進行判斷在蛇頭向下運動的時候不能按上鍵等

Games.prototype.bindEvent = function () {
    var self = this;
    // 鍵盤事件
    document.onkeydown = function (even) {
        switch (even.keyCode) {
            case 37:
                // 先進行判斷，如果當前的方向是向右移動，此時我們不能按左鍵
                if (self.snake.direction == 'R') return;
                self.snake.changeDirection('L');
                break;
            case 38:
                // 先進行判斷，如果當前的方向是向下移動，此時我們不能按上鍵
                if (self.snake.direction == 'D') return;
                self.snake.changeDirection('T');
                break;
            case 39:
                // 先進行判斷，如果當前的方向是向左移動，此時我們不能按右鍵
                if (self.snake.direction == 'L') return;
                self.snake.changeDirection('R');
                break;
            case 40:
                // 先進行判斷，如果當前的方向是向上移動，此時我們不能按下鍵
                if (self.snake.direction == 'T') return;
                self.snake.changeDirection('D');
                break;
        }
    }
}

此時Snake類也必須有對應的方向匹配，我們在Snake的初始化的時候設置一個this.direction='R'

Snake.prototype.update = function () {
 
    // 當前的direction接收willdirection
    this.direction = this.willDirection;
    switch (this.direction) {
        case 'R':
            this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col + 1 });
            break;
        case 'D':
            this.body.unshift({ 'row': this.body[0].row + 1, 'col': this.body[0].col });
            break;
        case 'L':
            this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col - 1 });
            break;
        case 'T':
            this.body.unshift({ 'row': this.body[0].row - 1, 'col': this.body[0].col });
            break;
    }

四、蛇死亡的判定方式 蛇有兩種判定死亡的方式

第一種就是蛇自己超出了表格部分

 // 超出了表格邊緣的部分
    if (this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0) {
        alert('游戲結束,您當前的得分為' + game.score);
        clearInterval(game.timer);
        this.body.shift();
        clearInterval(game.timer);
    }

第二種就是蛇自己和身體的某一部位重合了

  // 自己撞到自己
    for (var i = 1; i < this.body.length; i++) {
        if (this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row) {
            alert('游戲結束,您當前的得分為' + game.score);
            this.body.shift();
            clearInterval(game.timer);
        }
    }

五、食物的創(chuàng)建

此時我們創(chuàng)建一個Food類來產生食物，在Game中進行實例化，在定時器中進行渲染

我們在隨機生成食物的row和col的時候先判斷一下是否在蛇的身上

function Food(gameSnake) {
    var self = this;
    //    食物的位置
    // do-while循環(huán)語句作用是先創(chuàng)建一個row和col然后判斷這個row和col是否在蛇的身上
    do {
        this.row = parseInt(Math.random() * gameSnake.row);
        this.col = parseInt(Math.random() * gameSnake.col);
    } while ((function () {
        // 遍歷蛇的row和col 然后和Food新隨機出來的row和col進行判斷，是否重合
        for (var i = 0; i < gameSnake.snake.body.length; i++) {
            if (gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col) {
                return true;
            }
 
        }
        return false;
    })())
 
    console.log(this.row, this.col);
}
 
Food.prototype.render = function () {
    game.setHTML(this.row, this.col, '?');
}

六、蛇吃食物邊長

蛇在運動的時候會將數組body頭部添加一個元素，在尾部刪除一個元素，因此我們在蛇頭碰到食物之后只需要讓尾部不刪除就可以

   if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
        // 創(chuàng)建新的食物
        game.food = new Food(game);
        // 讓幀編號歸0
        // 加分數
        game.score++;
        game.f = 0;
    } else {
        this.body.pop();
    }

蛇吃食物變快

我們設置一個幀編號，在碰到食物之前一直自增，然后讓蛇的更新速度隨著蛇的長度增長而增快

         this.f = 0;
        game.f++;
       // 蛇的更新速度  當蛇邊長的時候，速度加快
        var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
        // 蛇的更新
        game.f % during == 0 && game.snake.update();
        // 渲染蛇

七、開始游戲功能

我們只需要寫一個按鈕在html里面然后通過定位將它放到合適的地方 ，給它一個點擊事件，只有我們點擊開始按鈕之后在執(zhí)行Game里面的代碼

 <div id="app"></div>
    <div class="startgame"><img src="images/btn1.gif" alt=""></div>
    <div class="stopgame"><img src="images/btn4.png" alt=""></div>
    <script>
        var game = null;
        var btnstart = document.querySelector('.startgame');
        var btnstop = document.querySelector('.stopgame')
        btnstart.addEventListener('click', function () {
            btnstart.style.display = 'none';
            game = new Games();
            // console.log(table);
            var table = document.querySelector('table');
            table.addEventListener('click', function () {
                clearInterval(game.timer);
                btnstop.style.display = 'block';
            })

八、暫停/繼續(xù)游戲功能

我們給暫停的按鈕和table都給一個點擊事件，當我們點擊table表格的時候停止按鈕顯現出來并且停止Game里面的定時器，當我們點擊暫停按鈕之后就開啟定時器并讓它自己隱藏起來

     btnstop.addEventListener('click', function () {
                btnstop.style.display = 'none';
                game.timer = setInterval(function () {
                    // 定時器里面的核心就是游戲的渲染本質，清屏-更新-渲染
                    game.f++;
                    // document.getElementById('f').innerHTML = '幀編號:' + game.f;
                    // // 渲染分數
                    // document.getElementById('score').innerHTML = '分數:' + game.score;
                    // 清屏
                    game.clear();
                    // 蛇的運動/更新
                    // 蛇的更新速度  當蛇邊長的時候，速度加快
                    var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
                    // 蛇的更新
                    game.f % during == 0 && game.snake.update();
                    // 渲染蛇
                    game.snake.render();
                    // 渲染食物
                    game.food.render();
                }, 10);
            })

到此這篇關于JS實現貪吃蛇小游戲的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • JavaScript 打地鼠游戲代碼說明

    JavaScript 打地鼠游戲代碼說明

    打地鼠游戲代碼說明，喜歡用js開發(fā)游戲的朋友可以參考下。
    2010-10-10
  • 使用JS+CSS實現俄羅斯方塊游戲

    使用JS+CSS實現俄羅斯方塊游戲

    這篇文章主要介紹了使用JS+CSS實現俄羅斯方塊游戲,使用簡單的js+css就能在網頁實現俄羅斯方塊小游戲,感興趣的小伙伴快來看吧
    2023-04-04
  • JS實現貪吃蛇小游戲

    JS實現貪吃蛇小游戲

    本文詳細講解了JS實現貪吃蛇小游戲的過程，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-11-11
  • JS模擬抽獎序效果實現代碼

    JS模擬抽獎序效果實現代碼

    JS模擬抽獎效果，聽起來都很難以置信，如果你對抽獎的要求不高，或許這個小小的抽獎程序就能幫上您的大忙，因為它真的很實用。我覺得還不錯的網頁特效，按興趣的朋友可以參考下
    2012-12-12
  • js 鉆石棋網頁游戲代碼

    js 鉆石棋網頁游戲代碼

    基于JavaScript+CSS共同完成的一款小型網頁游戲，鉆石棋，具體玩法還不太懂，你在網上搜搜玩法，應該比較有意思，一共有32個棋子。
    2010-03-03
  • 圖片拼圖記憶力測試游戲，網頁+JS版

    圖片拼圖記憶力測試游戲，網頁+JS版

    每次隨機給出一塊，在問號區(qū)域中找到它的位置并單擊該位置。每選對一個區(qū)域得一分，得15分才算獲勝，每次游戲只有15次機會。
    2011-02-02
  • 使用JavaScript做一款無框架瀏覽器直接運行的益智類數字棋牌小游戲

    使用JavaScript做一款無框架瀏覽器直接運行的益智類數字棋牌小游戲

    這篇文章主要介紹了使用JavaScript做一款無框架瀏覽器直接運行的益智類數字棋牌小游戲,沒有使用任何游戲框架，就簡單使用HTML做布局，CSS做動畫，JavaScript做事件響應,需要的朋友可以參考下
    2023-03-03

最新評論