JavaScript-開發一個簡單的貪吃蛇小遊戲

�木�發表於2019-03-25
JavaScript遊戲

JavaScript開發一個簡單的貪吃蛇小遊戲

對於很多JavaScript初學者而言，使用JS開發出自己的第一個網頁小遊戲是很有成就感的事情，那麼我們怎麼使用JS來開發一個簡單的小遊戲呢？希望初學JS的同學可以通過這段程式碼加深對建構函式以及原型的理解，程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .map {
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background-color: #ccc;
            position: relative;
        }
        .left {
            width: 200px;
            height: 600px;
            background-color: orangered;
            position: absolute;
            left: -200px;
        }
        #start {
            width: 90px;
            height: 50px;
            margin: 50px 55px;
            background-color: #ccc;
            border: 1px solid blue;
            border-radius: 5px;
            cursor: pointer;
        }
        .score {
            width: 150px;
            height: 100px;
            margin: 50px 25px;
            text-align: center;
            line-height: 100px;
            background-color: #fff;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div class="map">
    <div class="left">
        <button id="start">開始遊戲</button>
        <div class="score" id="score">當前分數：0</div>
    </div>
</div>
<script>
    // 自呼叫函式-食物
    (function(window){
        var elements = [];//用來儲存每個小方塊食物的
        // 定義建構函式
        function Food (x,y,width,height,color){
            //橫縱座標
            this.x = x||0;
            this.y = y||0;
            //寬高
            this.width = width||20;
            this.height = height||20;
            //背景顏色
            this.color = color||"green";
        }
        // 為原型新增初始化方法（作用：在頁面上顯示這個食物）
        Food.prototype.init = function (map) {
            // 初始化刪除食物
            remove();
            // 建立div
            var div = document.createElement("div");
            // 加到父節點下
            map.appendChild(div);
            // 設定樣式
            div.style.width = this.width+"px";
            div.style.height = this.height+"px";
            div.style.backgroundColor = this.color;
            div.style.position = "absolute";
            // 隨機橫縱座標
            this.x = parseInt(Math.random()*map.offsetWidth/this.width)*this.width;
            this.y = parseInt(Math.random()*map.offsetHeight/this.height)*this.height;
            div.style.left = this.x+"px";
            div.style.top = this.y+"px";
            // 把div加入到陣列elements中
            elements.push(div);
        };
        // 刪除食物
        function remove (){
            // elements陣列中有這個食物
            for(var i = 0; i < elements.length; i++){
                var ele = elements[i];
                // 刪除元素
                ele.parentNode.removeChild(ele);
                // 刪除陣列中的該元素
                elements.splice(i,1);
            }
        }
        // 把Food暴露給window
        window.Food = Food;
    }(window));

    // 自呼叫函式-蛇
    (function(window){
        var elements = [];// 存放小蛇的每個身體部分

        // 定義建構函式
        function Snake (width,height,direction) {
            // 小蛇每個部位的寬高
            this.width = width||20;
            this.height = height||20;

            // 小蛇的身體
            this.body = [
                {x:3,y:2,color:"red"},   // 頭
                {x:2,y:2,color:"orange"},// 身體
                {x:1,y:2,color:"orange"} // 身體
            ];

            // 方向
            this.direction = direction||"right";
        }

        // 為原型新增方法 -- 小蛇初始化
        Snake.prototype.init = function ( map ) {
            // 刪除之前的小蛇
            remove();
            // 迴圈建立div
            for (var i = 0; i < this.body.length; i++) {
                var div = document.createElement("div");
                map.appendChild(div);
                // 設定div的樣式
                div.style.position = "absolute";
                div.style.width = this.width+"px";
                div.style.height = this.height+"px";
                div.style.left = this.body[i].x*this.width+"px";
                div.style.top = this.body[i].y*this.height+"px ";
                div.style.backgroundColor = this.body[i].color;
                elements.push(div);
            }
        };

        // 為原型新增方法-- 移動
        Snake.prototype.move = function ( food,map ){
            // 改變小蛇身體的座標位置
            for (var i = this.body.length-1; i > 0; i--) {
                this.body[i].x = this.body[i-1].x;
                this.body[i].y = this.body[i-1].y;
            }

            // 判斷方向----改變小蛇的頭的座標位置
            switch (this.direction) {
                case "right": this.body[0].x += 1;
                break;
                case "left": this.body[0].x -= 1;
                break;
                case "top": this.body[0].y -= 1;
                break;
                case "bottom": this.body[0].y += 1;
            }

            // 判斷是否吃到食物
            var headX = this.body[0].x*this.width;
            var headY = this.body[0].y*this.height;
            var scoreDiv = document.querySelector("#score");
            if(headX === food.x && headY === food.y){
                // 獲取小蛇的最後的尾巴
                var last = this.body[this.body.length-1];
                this.body.push({
                    x: last.x,
                    y: last.y,
                    color: last.color
                });
                food.init(map);
                score += 1;
                scoreDiv.innerHTML = "當前分數："+score;
            };
        };

        // 刪除小蛇的函式
        function remove () {
            // 獲取陣列
            for (var i = elements.length-1; i >= 0; i--){
                var ele = elements[i];
                ele.parentNode.removeChild(ele);
                elements.splice(i,1);
            }
        }
        window.Snake = Snake;
    }(window));

    // 自呼叫函式-遊戲物件
    (function(window){
        var that = null;
        // 定義建構函式
        function Game(map){
            this.food = new Food();
            this.snake = new Snake();
            this.map = map;
            that = this;
        }
        Game.prototype.init = function () {
            // 初始化遊戲
            this.food.init(this.map);
            this.snake.init(this.map);
            this.runSnake(this.food,this.map);
            this.bindKey();
        };
        // 新增原型方法---小蛇移動
        Game.prototype.runSnake = function (food,map) {
            // 自動移動
            var timeId = setInterval(function(){
                this.snake.move(food,map);
                // 初始化小蛇
                this.snake.init(map);
                var maxX = map.offsetWidth/this.snake.width;
                var maxY = map.offsetHeight/this.snake.height;
                // 蛇頭的座標
                var headX = this.snake.body[0].x;
                var headY = this.snake.body[0].y;
                for (var i = 1; i < this.snake.body.length; i++) { 
                // 迴圈判斷蛇頭的座標和身體任一部位的座標是否相同
                    if(headX === this.snake.body[i].x && headY === this.snake.body[i].y ){
                        clearInterval(timeId);
                        alert("遊戲結束");
                    }
                }
                // 判斷蛇頭是否出界
                if (headX<0||headX>=maxX) {
                    // 停止定時器
                    clearInterval(timeId);
                    alert("遊戲結束");
                }
                if (headY < 0 || headY >= maxY) {
                    clearInterval(timeId);
                    alert("遊戲結束");
                }
            }.bind(that),150);
        };
        // 新增原型方法---新增按鍵事件
        Game.prototype.bindKey = function () {
            // 獲取使用者按鍵，改變小蛇的方向
            document.addEventListener("keydown",function(e){
                switch(e.keyCode){
                    case 37: this.snake.direction = "left";
                    break;
                    case 38: this.snake.direction = "top";
                    break;
                    case 39: this.snake.direction = "right";
                    break;
                    case 40: this.snake.direction = "bottom";
                    break;
                };
            }.bind(that),false);
        };
        window.Game = Game;
    }(window));
    // 通過開始按鈕來開始遊戲
    var gameStart = document.querySelector("#start");
    gameStart.onclick = function () {
        var game = new Game(document.querySelector(".map"));
        game.init();
    };
    // 遊戲計分
    var score = 0;

</script>
</body>
</html>

這樣，我們就做出了一個簡單的貪吃蛇小遊戲，快去試試你能得多少分吧！

相關文章