目錄

效果展示

原理分析

 Game.js文檔

Snake.js文檔

Food.js文檔

附上源代碼

寫了這么久的代碼

是否你和我一樣感到枯燥乏味了呢？

是否沒有前進的動力了呢？

別忘了當時的你躊躇滿志將前端Web一舉拿下的斗志??！

今天博主要給大家展現一個好玩的游戲

貪吃蛇小游戲！

嘿，你可別小瞧這東西！

制作過程是從無到有

等做完它

你就能從中體會到比玩游戲還快樂的居然是打代碼!

效果展示

原理分析

我們制作前為了代碼更清晰就分成幾個js文檔來編寫。

其中Game.js可以看作是一個媒介的作用；Snake.js是當蛇初始化時在最左邊向右走的狀態；

 貪吃蛇在游戲中的運動可以想象成這條蛇是在一張25*25的表格中運動：

 如圖所示

 Game.js文檔

所以我們在Game.js中添加表格節點：

 


    


        


            


            

        

        


            

                function Game() {
            

        

    

    


        


            


            

        

        


            

                this.row = 25;
            

        

    

    


        


            


            

        

        


            

                this.col = 25;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                Game.prototype.init = function() {
            

        

    

    


        


            


            

        

        


            

                this.dom = document.createElement('table');
            

        

    

    


        


            


            

        

        


            

                // 創建表格--父元素為document（頁面中創建表格） 
            

        

    

    


        


            


            

        

        


            

                // var tr, td; 
            

        

    

    


        


            


            

        

        


            

                for (var i = 0; i < this.row; i++) { //追加行 
            

        

    

    


        


            


            

        

        


            

                var tr = document.createElement('tr');
            

        

    

    


        


            


            

        

        


            

                for (var j = 0; j < this.td; j++) { //追加列 
            

        

    

    


        


            


            

        

        


            

                var td = document.createElement('col');
            

        

    

    


        


            


            

        

        


            

                td.appendChild(tr);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

Snake.js文檔

Snake.js中當蛇初始化時在最左邊向右走的狀態：

如圖所示

 


    


        


            


            

        

        


            

                function Snake() {
            

        

    

    


        


            


            

        

        


            

                // 蛇的初始化身體 
            

        

    

    


        


            


            

        

        


            

                this.body = [
            

        

    

    


        


            


            

        

        


            

                { 'row': 3, 'col': 5 },
            

        

    

    


        


            


            

        

        


            

                { 'row': 3, 'col': 4 },
            

        

    

    


        


            


            

        

        


            

                { 'row': 3, 'col': 3 },
            

        

    

    


        


            


            

        

        


            

                { 'row': 3, 'col': 2 }
            

        

    

    


        


            


            

        

        


            

                ];
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                Snake.prototype.render = function() {
            

        

    

    


        


            


            

        

        


            

                // 蛇頭的渲染 
            

        

    

    


        


            


            

        

        


            

                game.setColorHead(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, 'cyan')
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

當蛇在運動的時候它的原理是“頭增尾刪”。

因為蛇的長度先是不變的，而我們改變的也是改變這個四個格子的顏色，走一格頭部那一格顏色變為粉色，尾巴那一格的顏色變為白色。

接下來讓蛇通過我們按鍵來進行運動：放在一個監聽事件內

 


    


        


            


            

        

        


            

                // 設置鍵盤的事件監聽 
            

        

    

    


        


            


            

        

        


            

                Game.prototype.bindEvent = function() {
            

        

    

    


        


            


            

        

        


            

                var self = this;
            

        

    

    


        


            


            

        

        


            

                document.addEventListener('keydown', function(e) {
            

        

    

    


        


            


            

        

        


            

                // 用ASCII碼值判斷鍵盤方向 
            

        

    

    


        


            


            

        

        


            

                switch (e.keyCode) {
            

        

    

    


        


            


            

        

        


            

                case 37: //左 
            

        

    

    


        


            


            

        

        


            

                if (self.snake.direction == 'R') return; // 先進行判斷，如果當前的方向是向右移動，此時我們不能按左鍵 
            

        

    

    


        


            


            

        

        


            

                self.snake.changeDirection('L');
            

        

    

    


        


            


            

        

        


            

                self.d = 'L';
            

        

    

    


        


            


            

        

        


            

                break;
            

        

    

    


        


            


            

        

        


            

                case 38: //上 
            

        

    

    


        


            


            

        

        


            

                if (self.snake.direction == 'D') return; // 先進行判斷，如果當前的方向是向下移動，此時我們不能按上鍵 
            

        

    

    


        


            


            

        

        


            

                self.snake.changeDirection('U');
            

        

    

    


        


            


            

        

        


            

                self.d = 'U';
            

        

    

    


        


            


            

        

        


            

                break;
            

        

    

    


        


            


            

        

        


            

                case 39: //右 
            

        

    

    


        


            


            

        

        


            

                if (self.snake.direction == 'L') return; // 先進行判斷，如果當前的方向是向左移動，此時我們不能按右鍵 
            

        

    

    


        


            


            

        

        


            

                self.snake.changeDirection('R');
            

        

    

    


        


            


            

        

        


            

                self.d = 'R';
            

        

    

    


        


            


            

        

        


            

                break;
            

        

    

    


        


            


            

        

        


            

                case 40: //下 
            

        

    

    


        


            


            

        

        


            

                if (self.snake.direction == 'U') return; // 先進行判斷，如果當前的方向是向上移動，此時我們不能按下鍵 
            

        

    

    


        


            


            

        

        


            

                self.snake.changeDirection('D');
            

        

    

    


        


            


            

        

        


            

                self.d = 'D';
            

        

    

    


        


            


            

        

        


            

                break;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    


 

接下來我們判定蛇是否撞到墻而結束

 


    


        


            


            

        

        


            

                // 死亡的判斷,超出了表格邊緣的部分 
            

        

    

    


        


            


            

        

        


            

                if (this.body[0].col > game.col - 1 || this.body[0].col < 0 || this.body[0].row > game.row - 1 || this.body[0].row < 0) {
            

        

    

    


        


            


            

        

        


            

                alert('撞到墻了哦，一共吃掉了' + game.score + '顆草莓');
            

        

    

    


        


            


            

        

        


            

                this.body.shift();
            

        

    

    


        


            


            

        

        


            

                clearInterval(game.timer);
            

        

    

    


        


            


            

        

        


            

                location.reload();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


        

    

接下來我們判定蛇是否撞到自己而結束

 


    


        


            


            

        

        


            

                // 自己撞到自己的時候會判定死亡 
            

        

    

    


        


            


            

        

        


            

                for (var i = 1; i < this.body.length; i++) {
            

        

    

    


        


            


            

        

        


            

                // 如果當前蛇的頭部和身體的某一個部位的 row 和 col 完全重合的時候 
            

        

    

    


        


            


            

        

        


            

                if (this.body[0].row == this.body[i].row && this.body[0].col == this.body[i].col) {
            

        

    

    


        


            


            

        

        


            

                alert('撞到自己了,吃掉了' + game.score + '顆草莓');
            

        

    

    


        


            


            

        

        


            

                this.body.shift();
            

        

    

    


        


            


            

        

        


            

                clearInterval(game.timer);
            

        

    

    


        


            


            

        

        


            

                location.reload();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

Food.js文檔

食物food類，用來產生食物

 


    


        


            


            

        

        


            

                function Food(gameSnake) {
            

        

    

    


        


            


            

        

        


            

                // 食物的位置 
            

        

    

    


        


            


            

        

        


            

                this.row = parseInt(Math.random() * gameSnake.row)
            

        

    

    


        


            


            

        

        


            

                this.col = parseInt(Math.random() * gameSnake.col)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                Food.prototype.render = function() {
            

        

    

    


        


            


            

        

        


            

                game.setHTML(this.row, this.col);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


        

    

食物隨機生成在單元格中，利用do...while來實現

 


    


        


            


            

        

        


            

                function Food(gameSnake) {
            

        

    

    


        


            


            

        

        


            

                var self = this;
            

        

    

    


        


            


            

        

        


            

                // 下面的 do-while 循環語句作用是先創建一個 row 和 col 
            

        

    

    


        


            


            

        

        


            

                然后判斷這個 row 和 col 是否在蛇的身上
            

        

    

    


        


            


            

        

        


            

                //do...while來創建食物 
            

        

    

    


        


            


            

        

        


            

                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 (self.row == gameSnake.snake.body[i].row && self.col == gameSnake.snake.body[i].col) {
            

        

    

    


        


            


            

        

        


            

                return true;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return false;
            

        

    

    


        


            


            

        

        


            

                })());
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

文章來源：csdn   作者：實習期小潘

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務