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

AlienZHOU 發(fā)布于2019-08-22 16:33 / 3093人閱讀

摘要：將應(yīng)用抽象成一個(gè)對(duì)象。地圖使用一個(gè)二維數(shù)組作為結(jié)構(gòu)。生成食物的范圍。蛇碰到墻壁計(jì)算出穿過(guò)墻的范圍蛇碰到自己的身體蛇吃到食物，長(zhǎng)度加一并生成新的食物監(jiān)聽(tīng)鍵盤(pán)事件。對(duì)上下左右移動(dòng)做出反應(yīng)。

需求分析

生成地圖。

將應(yīng)用抽象成一個(gè)對(duì)象。

地圖使用一個(gè)二維數(shù)組作為結(jié)構(gòu)。

生成食物。

生成食物的范圍。

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

生成蛇,開(kāi)始移動(dòng)。

蛇碰到墻壁,計(jì)算出穿過(guò)墻的范圍.

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

蛇吃到食物，長(zhǎng)度加一,并生成新的食物

監(jiān)聽(tīng)鍵盤(pán)事件。

對(duì)上下左右移動(dòng)做出反應(yīng)。

代碼實(shí)現(xiàn)(也可以查看 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; //每個(gè)格子的固定大小
        this.map = []; //保存地圖中dom對(duì)象的二維數(shù)組
        this.container = document.getElementById("container");
        

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

        // 蛇
        this.snake = [];//將蛇抽象成一個(gè)二維列表，列為身體長(zhǎng)度，排為坐標(biāo)數(shù)組 
        this.snakeLen = null ; //默認(rèn)蛇長(zhǎng)為3
        // 初始蛇頭坐標(biāo)
        this.snakeHead = []

        // 蛇的移動(dòng)方向
        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; 
        // 初始蛇頭坐標(biāo)
        this.snakeHead = null;

        // 蛇的移動(dòng)方向
        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] = [] //初始化二維數(shù)組
            for(let x = 0 ; x < gridYN ; x++){
                this.createGrid(x,y)
            }
        }   
    }
    // 創(chuàng)建每一個(gè)格子,x軸格子索引，y軸格子索引
    GreedySnake.prototype.createGrid = function(idxX,idxY){
        // 當(dāng)idxY > 0 時(shí)，對(duì)應(yīng)的grid的向左移動(dòng)1px，將格子之間的線重合；
        // 當(dāng)idxX > 0 時(shí)，對(duì)應(yīng)的grid的向上移動(dòng)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);
    }

    // 創(chuàng)建食物:原理就是根據(jù)在范圍內(nèi)的格子數(shù)，生成兩個(gè)隨機(jī)數(shù)，作為元素的坐標(biāo)
    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"
        }
        // 初始蛇頭坐標(biāo)
        this.snakeHead = this.snake[0]
        // console.log(this.snake)
    }
    
    // 開(kāi)始移動(dòng),移動(dòng)后蛇頭坐標(biāo) +-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;
            // 檢測(cè)蛇頭是否和蛇的身體相撞
            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
                }
            }
            // 當(dāng)蛇吃到食物后再重新創(chuàng)建食物
            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)
    }

    // 注冊(cè)鍵盤(pán)事件
    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
    }
    
    // 參數(shù)含義：x軸，y軸上的格子數(shù)量
    var greedySnake = new GreedySnake(20,20);
    greedySnake.init()
})(window)

GPU云服務(wù)器云服務(wù)器貪食蛇 javascript編寫(xiě)游戲原生javascript javascript原生

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94456.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

AlienZHOU

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#黑五#virtono：全場(chǎng)最低3折優(yōu)惠，標(biāo)準(zhǔn)vps首月€2.68起，大內(nèi)存vps首月€18起，大硬

閱讀 2080·2021-11-24 10:34
新晉獨(dú)角獸房企估值10億美元！品牌域名Place.com價(jià)值七位數(shù)！

閱讀 3055·2021-11-22 11:58
二十五歲零基礎(chǔ)轉(zhuǎn)行做軟件測(cè)試怎么樣？一個(gè)過(guò)來(lái)人的心路歷程送給迷茫的你

閱讀 3712·2021-09-28 09:35
CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

閱讀 1724·2019-08-30 15:53
輕松自定義一個(gè)響應(yīng)式的timeline時(shí)間線組件（橫向和縱向）

閱讀 2770·2019-08-30 14:11
如何實(shí)現(xiàn)中間大兩頭小的輪播效果

閱讀 1551·2019-08-29 17:31
30分鐘用Node.js構(gòu)建一個(gè)API服務(wù)器

閱讀 542·2019-08-26 13:53
js中深拷貝與淺拷貝（堆內(nèi)存、棧內(nèi)存的關(guān)系）

閱讀 2141·2019-08-26 13:45

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

**python完成簡(jiǎn)單的貪吃蛇小游戲附編號(hào)**

給你的網(wǎng)頁(yè)游戲添加游戲手柄支持

**曾探：愛(ài)JavaScript再多，它也只是生活的一部分**

JavaScript 就要統(tǒng)治世界了？

發(fā)表評(píng)論

0條評(píng)論

AlienZHOU

男|高級(jí)講師

TA的文章

#黑五#virtono：全場(chǎng)最低3折優(yōu)惠，標(biāo)準(zhǔn)vps首月€2.68起，大內(nèi)存vps首月€18起，大硬

新晉獨(dú)角獸房企估值10億美元！品牌域名Place.com價(jià)值七位數(shù)！

二十五歲零基礎(chǔ)轉(zhuǎn)行做軟件測(cè)試怎么樣？一個(gè)過(guò)來(lái)人的心路歷程送給迷茫的你

CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

輕松自定義一個(gè)響應(yīng)式的timeline時(shí)間線組件（橫向和縱向）

如何實(shí)現(xiàn)中間大兩頭小的輪播效果

30分鐘用Node.js構(gòu)建一個(gè)API服務(wù)器

js中深拷貝與淺拷貝（堆內(nèi)存、棧內(nèi)存的關(guān)系）

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！