用JS實現貪吃蛇遊戲

2022-07-03 18:01:51

本文範例為大家分享了JS實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

效果圖：

完整程式碼如下：

html：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css" >
    <script src="index.js"></script>
</head>
 
<body>
    <div class="content">
        <div class="btn startBtn"><button></button></div>
        <div class="btn pauseBtn"><button></button></div>
        <div id="snakeWrap">
            <!-- <div class="snakeHead"></div>
            <div class="snakeBody"></div>
            <div class="food"></div> -->
        </div>
    </div>
 
</body>
 
</html>

css：

.content {
    position: relative;
    width: 640px;
    height: 640px;
    margin: 100px auto;
}
 
.btn {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    opacity: .1;
    z-index: 2;
}
 
.btn button {
    background: none;
    border: none;
    background-size: 100% 100%;
    cursor: pointer;
    outline: none;
    position: absolute;
    left: 50%;
    top: 50%;
}
 
.startBtn button {
    width: 200px;
    height: 80px;
    background-image: url(../貪吃蛇/img/btn.gif);
    margin-left: -100px;
    margin-top: -40px;
}
 
.pauseBtn {
    display: none;
}
 
.pauseBtn button {
    width: 70px;
    height: 70px;
    background-image: url(../貪吃蛇/img/btn4.png);
    margin-left: -35px;
    margin-top: -35px;
}
 
#snakeWrap {
    width: 600px;
    height: 600px;
    background-color: pink;
    border: 20px solid purple;
    position: relative;
}
 
 
/* #snakeWrap div {
    width: 20px;
    height: 20px;
} */
 
.snakeHead {
    background-image: url(../貪吃蛇/img/snake.png);
    background-size: cover;
}
 
.snakeBody {
    background-color: rgb(85, 146, 126);
    border-radius: 50%;
}
 
.food {
    background-image: url(../貪吃蛇/img/草莓.png);
    background-size: cover;
}

js：

window.addEventListener('load', function() {
    // 宣告方塊的寬高，行數和列數
    var sw = 20,
        sh = 20,
        tr = 30,
        td = 30;
 
    var snake = null, //蛇的範例
        food = null, //食物的範例
        game = null; //遊戲的範例
 
    function Square(x, y, classname) {
        this.x = sw * x;
        this.y = sh * y;
        this.class = classname;
 
        this.viewContent = document.createElement('div'); //方塊對應的DOM元素
        this.viewContent.className = this.class;
        this.parent = document.getElementById('snakeWrap'); //方塊的父級
    }
    //建立方塊DOM，並新增到頁面裡
    Square.prototype.create = function() {
        this.viewContent.style.position = 'absolute';
        this.viewContent.style.width = sw + 'px';
        this.viewContent.style.height = sh + 'px';
        this.viewContent.style.left = this.x + 'px';
        this.viewContent.style.top = this.y + 'px';
        this.parent.appendChild(this.viewContent);
 
    };
    Square.prototype.remove = function() {
        this.parent.removeChild(this.viewContent);
    };
    //蛇
    function Snake() {
        this.head = null //存蛇頭的資訊
        this.tail = null //存蛇尾的資訊
        this.pos = []; //存蛇身上每個方塊的位置
 
        //儲存蛇走的方向，用一個物件來表示
        this.directionNum = {
            left: {
                x: -1,
                y: 0,
                rotate: 180
            },
            right: {
                x: 1,
                y: 0,
                rotate: 0
            },
            up: {
                x: 0,
                y: -1,
                rotate: -90
            },
            down: {
                x: 0,
                y: 1,
                rotate: 90
            }
        };
    }
    //初始化
    Snake.prototype.init = function() {
        //建立蛇頭
        var snakeHead = new Square(2, 0, 'snakeHead');
        snakeHead.create();
        this.head = snakeHead; //儲存蛇頭資訊
        this.pos.push([2, 0]); //把蛇頭的位置存起來
 
        //建立蛇身體1
        var snakeBody1 = new Square(1, 0, 'snakeBody');
        snakeBody1.create();
        this.pos.push([1, 0]); //把蛇身1的座標存起來
 
        //建立蛇身體2
        var snakeBody2 = new Square(0, 0, 'snakeBody');
        snakeBody2.create();
        this.tail = snakeBody2; //把蛇尾的資訊存起來
        this.pos.push([0, 0]); //把蛇身1的座標存起來
 
        //形成連結串列關係
        snakeHead.last = null;
        snakeHead.next = snakeBody1;
 
        snakeBody1.last = snakeHead;
        snakeBody1.next = snakeBody2;
 
        snakeBody2.last = snakeBody1;
        snakeBody2.next = null;
 
        //給蛇新增一條屬性，用來表示蛇的走向
        this.direction = this.directionNum.right; //預設讓蛇往右走
    };
 
    //該方法用來獲取蛇頭的下一個位置對應的元素，要根據元素做不同的事情
    Snake.prototype.getNextPos = function() {
        var nextPos = [ //蛇頭要走的下一個點的座標
            this.head.x / sw + this.direction.x,
            this.head.y / sh + this.direction.y
        ];
        // console.log(nextPos[0]);
 
        //下個點是自己，遊戲結束
        var selfCollied = false; //是否撞到自己，預設是否
        //value表示陣列中的某一項
        this.pos.forEach(function(value) {
            // console.log(nextPos[0], value[0]);
            if (value[0] == nextPos[0] && value[1] == nextPos[1]) {
                selfCollied = true;
                // console.log(2);
            }
        });
        if (selfCollied) {
            console.log('撞到自己了!');
            this.strategies.die.call(this);
            return;
        }
 
        // 下個點是牆，遊戲結束
        if (nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {
            console.log('撞牆!');
            this.strategies.die.call(this);
            return;
        }
 
        // 下個點是食物，吃
        if (food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {
            //如這條件成立，說明蛇頭走的下一點是食物的點
            console.log('撞到食物了');
            this.strategies.eat.call(this);
            return;
        }
 
        // 下個點什麼都不是，繼續走
        this.strategies.move.call(this);
 
    };
    // 處理碰撞後要做的事
    Snake.prototype.strategies = {
        move: function(format) { //format這個引數用於決定要不要刪除最後一個方塊（蛇尾）,當傳了這個引數就表示要做的事情是吃
            //建立新身體（在舊蛇頭的位置）
 
            var newBody = new Square(this.head.x / sw, this.head.y / sh, 'snakeBody');
            //更新連結串列的關係
            newBody.next = this.head.next;
            newBody.next.last = newBody;
            newBody.last = null;
 
            //把舊蛇頭從原來的位置刪除
            this.head.remove();
            newBody.create();
 
            //建立新的蛇頭（蛇頭下一個要走到的點nextPos）
            var newHead = new Square(this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, 'snakeHead');
 
            //更新連結串列關係
            newHead.next = newBody;
            newHead.last = null;
            newBody.last = newHead;
            newHead.viewContent.style.transform = 'rotate(' + this.direction.rotate + 'deg)';
            newHead.create();
 
            //蛇身上的每一個方塊的座標也要更新
            this.pos.splice(0, 0, [this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y])
            this.head = newHead; //還要把this.head的資訊更新一下
 
            if (!format) { //如果format的值為false，表示需要刪除（除了吃之外的操作）
                this.tail.remove();
                this.tail = this.tail.last;
                this.pos.pop();
            }
        },
        eat: function() {
            this.strategies.move.call(this, true);
            createFood();
            game.score++;
        },
        die: function() {
            // console.log('die');
            game.over();
        }
    }
 
 
    snake = new Snake();
 
 
 
    //建立食物
    function createFood() {
        //食物小方塊的隨機座標
 
        var x = null;
        var y = null;
 
        var include = true; //迴圈跳出的條件，true表示食物座標在蛇身上。（需要繼續迴圈）false表示食物的座標不再蛇身上（不用繼續迴圈）
        while (include) {
            x = Math.round(Math.random() * (td - 1));
            y = Math.round(Math.random() * (tr - 1));
 
            snake.pos.forEach(function(value) {
                if (x != value[0] && y != value[1]) {
                    //這個條件成立說明現在隨機出來的這個座標，在蛇身上沒有找到。
                    include = false;
                }
            });
        }
 
        //生成食物
        food = new Square(x, y, 'food');
        //儲存生成食物的座標，用於跟蛇頭要走的下一座標對比
        food.pos = [x, y];
 
        var foodDom = document.querySelector('.food');
        if (foodDom) {
            foodDom.style.left = x * sw + 'px';
            foodDom.style.top = y * sh + 'px';
        } else {
            food.create();
        }
 
    }
    //建立遊戲邏輯
    function Game() {
        this.timer = null;
        this.score = 0;
    }
    Game.prototype.init = function() {
        snake.init();
        // snake.getNextPos();
        createFood();
        var flag = true;
        document.onkeydown = function(ev) {
            //當蛇在往右走，不能按左鍵
            if (ev.which == 37 && snake.direction != snake.directionNum.right) {
                if (flag) {
                    flag = false;
                    setTimeout(function() {
                        snake.direction = snake.directionNum.left;
                        flag = true;
                    }, 150)
                }
 
            } else if (ev.which == 38 && snake.direction != snake.directionNum.down) {
                if (flag) {
                    flag = false;
                    setTimeout(function() {
                        snake.direction = snake.directionNum.up;
                        flag = true;
                    }, 150)
                }
            } else if (ev.which == 39 && snake.direction != snake.directionNum.left) {
                if (flag) {
                    flag = false;
                    setTimeout(function() {
                        snake.direction = snake.directionNum.right;
                        flag = true;
                    }, 150)
                }
            } else if (ev.which == 40 && snake.direction != snake.directionNum.up) {
                if (flag) {
                    flag = false;
                    setTimeout(function() {
                        snake.direction = snake.directionNum.down;
                        flag = true;
                    }, 150)
                }
            }
        }
        this.start();
    };
    //開始遊戲
    Game.prototype.start = function() {
        this.timer = setInterval(function() {
            snake.getNextPos();
        }, 150);
    };
    //暫停遊戲
    Game.prototype.pause = function() {
        clearInterval(this.timer);
    };
    //遊戲結束
    Game.prototype.over = function() {
        clearInterval(this.timer);
        alert('你的得分為' + this.score);
 
        //遊戲回到初始狀態
        var snakeWrap = document.getElementById('snakeWrap');
        snakeWrap.innerHTML = '';
 
        snake = new Snake();
        game = new Game();
 
        var startBtnWrap = document.querySelector('.startBtn');
        startBtnWrap.style.display = 'block';
    };
    //開啟遊戲
    game = new Game();
    var startBtn = document.querySelector('.startBtn button');
    console.log(startBtn);
    startBtn.onclick = function() {
        startBtn.parentNode.style.display = 'none';
        game.init();
    };
    //暫停遊戲
    var snakeWrap = document.getElementById('snakeWrap');
    console.log(snakeWrap);
    var pauseBtn = document.querySelector('.pauseBtn button');
    console.log(pauseBtn);
    snakeWrap.onclick = function() {
        game.pause();
        pauseBtn.parentNode.style.display = 'block';
        console.log(123);
    };
    pauseBtn.onclick = function() {
        game.start();
        pauseBtn.parentNode.style.display = 'none';
    }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

用JS實現貪吃蛇遊戲

熱門文章