回歸原生，使用javascript編寫小游戲 --- 貪食蛇

AlienZHOU 發布于2019-08-22 16:33 / 3101人閱讀

摘要：將應用抽象成一個對象。地圖使用一個二維數組作為結構。生成食物的范圍。蛇碰到墻壁計算出穿過墻的范圍蛇碰到自己的身體蛇吃到食物，長度加一并生成新的食物監聽鍵盤事件。對上下左右移動做出反應。

需求分析

生成地圖。

將應用抽象成一個對象。

地圖使用一個二維數組作為結構。

生成食物。

生成食物的范圍。

食物不能和身體生成位置重合。

生成蛇,開始移動。

蛇碰到墻壁,計算出穿過墻的范圍.

蛇碰到自己的身體,Game Over .

蛇吃到食物，長度加一,并生成新的食物

監聽鍵盤事件。

對上下左右移動做出反應。

代碼實現(也可以查看 github ） html (index.html)




    
    
    
    Document

css (./style/index.css)

* {
    margin: 0;
    padding: 0;
}

.wrap{
    display: flex;
    justify-content: center;
    align-content: center;
}

#container{
    width: 100%;
    text-align: center;
}

#container div{
    /* width: 20px;
    height: 20px; */
    float: left;
    border: 1px solid #000;
}

js(./js/index.js)

    (function(self){

    function GreedySnake(gridXN,gridYN){
        // 地圖
        this.gridXN = gridXN >= 10 ? gridXN : 10; 
        this.gridYN = gridYN >= 10 ? gridYN : 10;
        this.gridSize = 20; //每個格子的固定大小
        this.map = []; //保存地圖中dom對象的二維數組
        this.container = document.getElementById("container");
        

        // 食物屬性
        this.food = null;
        this.foodX = null;
        this.foodY = null;

        // 蛇
        this.snake = [];//將蛇抽象成一個二維列表，列為身體長度，排為坐標數組 
        this.snakeLen = null ; //默認蛇長為3
        // 初始蛇頭坐標
        this.snakeHead = []

        // 蛇的移動方向
        this.direction = "top"

        // 速度
        this.speed = 1 ;

        this.timer = null
    }

    GreedySnake.prototype.init = function(){
        this.initMap();
        this.createSnake();
        this.createFood();
        this.snakeMove()
        this.listenKeyBoardEvents()
    }

    GreedySnake.prototype.restart = function(gridXN,gridYN){
    
        // 地圖
        this.gridXN = null
        this.gridYN = null
        this.gridSize = null
        this.map = null
        this.container = null
        
        // 食物屬性
        this.food = null;
        this.foodX = null;
        this.foodY = null;

        // 蛇
        this.snake = null;
        this.snakeLen = null; 
        // 初始蛇頭坐標
        this.snakeHead = null;

        // 蛇的移動方向
        this.direction = null;

        // 速度
        this.speed = null;

    }


    // 初始化地圖
    GreedySnake.prototype.initMap = function(){
        var gridYN = this.gridYN,
            gridXN = this.gridXN,
            w = gridXN * this.gridSize + gridXN + 1 ,
            h = gridYN * this.gridSize + gridYN + 1;
        
        this.container.style.width = w + "px";
        this.container.style.height = h  + "px";

        for(let y = 0 ; y < gridXN ; y++){
            this.map[y] = [] //初始化二維數組
            for(let x = 0 ; x < gridYN ; x++){
                this.createGrid(x,y)
            }
        }   
    }
    // 創建每一個格子,x軸格子索引，y軸格子索引
    GreedySnake.prototype.createGrid = function(idxX,idxY){
        // 當idxY > 0 時，對應的grid的向左移動1px，將格子之間的線重合；
        // 當idxX > 0 時，對應的grid的向上移動1px，將格子之間的線重合；
        let grid = document.createElement("div");
        grid.style.width = this.gridSize + "px";
        grid.style.height = this.gridSize + "px";
        this.map[idxY][idxX] = grid
        if(idxX > 0 ){
            grid.style.marginLeft = "-1px";
        }
        if(idxY > 0 ){
            grid.style.marginTop = "-1px";
        }
        this.container.appendChild(grid);
    }

    // 創建食物:原理就是根據在范圍內的格子數，生成兩個隨機數，作為元素的坐標
    GreedySnake.prototype.createFood = function(){
        var gridYN = this.gridYN,
            gridXN = this.gridXN,
            temp = null ,
            flag = true;
        this.foodX = Math.floor(Math.random() * gridXN); //緩存
        this.foodY = Math.floor(Math.random() * gridYN);

        for(var i = 0 ; i= 0; i--){
            this.snake.push([this.gridYN - 1 - i ,this.gridXN - 1 - 3])
            this.map[this.gridYN - 1 - i][this.gridXN - 1 - 3].style.backgroundColor = "blue"
        }
        // 初始蛇頭坐標
        this.snakeHead = this.snake[0]
        // console.log(this.snake)
    }
    
    // 開始移動,移動后蛇頭坐標 +-1 
    GreedySnake.prototype.snakeMove = function(){
        let _this = this,
            sH = this.snakeHead,
            y = null,
            x = null,
            tempH = null,
            last = null,
            alive = true

        function common(){
            
            _this.map[tempH[0]][tempH[1]].style.backgroundColor = "blue"
            _this.snake.unshift(tempH);
            _this.snakeHead = tempH;
            // 檢測蛇頭是否和蛇的身體相撞
            for(var i = 1 ; i < _this.snake.length;i++){
                if(_this.snakeHead[0] == _this.snake[i][0] && _this.snakeHead[1] ==  _this.snake[i][2]){
                    alert("GAME OVER");
                    alive = false
                    return false
                }
            }
            // 當蛇吃到食物后再重新創建食物
            if(sH[0] === _this.foodY && sH[1] === _this.foodX){
                _this.createFood()
                return false
            }
            last = _this.snake.pop();
            _this.map[last[0]][last[1]].style.backgroundColor = ""
        }

        switch(this.direction){
            case "top":
                y = sH[0] //緩存
                tempH = [--y , sH[1] ];
                if(tempH[0] < 0){
                    tempH = [this.gridYN - 1 , sH[1]]
                }
                common();
                break;
            case "bottom":
                y = sH[0]
                tempH = [++y , sH[1] ];
                // 邊界判斷
                if(tempH[0] > this.gridYN - 1){
                    tempH = [ 0 , sH[1]]
                }
                common()
                break;
            case "left":
                x = sH[1]
                tempH = [sH[0] , --x ];
                if(tempH[1] < 0){
                    tempH = [ sH[0] , this.gridXN - 1]
                }
                common()
                break;
            case "right":
                x = sH[1]
                tempH = [sH[0] , ++x ];
                if(tempH[1] > this.gridXN - 1){
                    tempH = [  sH[0] ,  0 ]
                }
                common()
                break;
        }

        alive && setTimeout(function(){
            _this.snakeMove()
        },500 / this.speed)
    }

    // 注冊鍵盤事件
    GreedySnake.prototype.listenKeyBoardEvents = function(){
        let _this = this
        self.onkeyup = function(e){
            let dir = _this.direction
            switch(e.keyCode){
                case 37:
                    if(dir != "right"){
                       _this.direction = "left";
                    }
                    break;
                case 38:
                    if(dir != "bottom"){
                        _this.direction = "top";
                    }
                    break;
                case 39:
                    if(dir != "left"){
                        _this.direction = "right";
                    }
                    break;
                case 40:
                    if(dir != "top"){
                        _this.direction = "bottom";
                    }
                    break;
            }
        }
    }

    GreedySnake.prototype.print = function(){
        return this.map
    }
    
    // 參數含義：x軸，y軸上的格子數量
    var greedySnake = new GreedySnake(20,20);
    greedySnake.init()
})(window)

云服務器 GPU云服務器貪食蛇 javascript編寫游戲原生javascript javascript原生

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94456.html

python完成簡單的貪吃蛇小游戲附編號

　　此篇文章主要是詳細介紹了python完成簡單的貪吃蛇小游戲附編號，文章內容緊扣主題進行詳盡的基本介紹，具有很強的參考意義，需用的朋友可以學習一下　　序言：　　不知道有沒有同學們和我一樣，最開始觸碰程序編程的動機就是為了做一個游戲打？　　接下來要跟大家分享是指一個pygame所寫的貪食蛇手機游戲：　　貪食蛇這一個手機游戲在編程設計里的熟客，由于：　　簡易，最基本游戲情節你只需要蛇和食物2個就可以...

89542767 2022-12-28 13:46 評論0 收藏0
給你的網頁游戲添加游戲手柄支持

摘要：自從買了手柄后一直想試試給自己寫的小游戲增加手柄支持。表示該對象所表示的手柄是否還保持連接。。連接事件瀏覽器提供了兩個手柄相關的事件。。完筆者給自己的貪食蛇小游戲增加了手柄搖桿控制蛇頭方向功能之前筆者還寫過俄羅斯方塊之類的，代碼找不到了自從買了 Switch 手柄后一直想試試給自己寫的小游戲增加手柄支持。今天終于抽出時間搞了一把。以下是筆記 ;) navigator.getGamep...

stdying 2019-08-22 16:38 評論0 收藏0
曾探：愛JavaScript再多，它也只是生活的一部分

摘要：拿足球比賽的例子來說，我們的目標只是進球，下底傳中這種模式僅僅是達到進球目標的一種手段。但在這種動態解釋型語言中，給對象動態添加職責是再簡單不過的事情。這就造成了語言的裝飾者模式不再關注于給對象動態添加職責，而是關注于給函數動態添加職責。非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/article/199456 曾探...

cyqian 2019-08-21 10:35 評論0 收藏0
JavaScript 就要統治世界了？

摘要：歡迎使用中文文檔架構概覽是網易項目團隊開發的一個基于進行開發的應用層框架，提供了一個輕量級的容器來編寫簡單可維護的。 JavaScript 可以……嘛，不就是操作一下 DOM，可以讓元素飛來飛去嗎JavaScript 是……不就是用 jQuery 讓網頁動起來，頂多就是再用用 Ajax 和后端進行一下數據交換嗎JavaScript 是一門……最討厭和鄙視這種弱類型不需要編譯的腳本語言...

AbnerMing 2019-08-21 10:41 評論0 收藏0