案例:貪吃蛇

時間 2019-12-01

標籤案例貪吃简体版

原文原文鏈接

1、面向對象編程思想：

根據需求，抽象出相關的對象，總結對象的特徵和行爲，把特徵變成屬性，行爲變成方法
而後定義（js）構造函數，實例化對象
經過對象調用屬性和方法，完成相應的需求

2、貪吃蛇代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>貪吃蛇遊戲</title>
    <style>
        .map{
            width: 800px;
            height: 600px;
            background: #ccc;
            position: relative;
        }
        .start{
            width: 800px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-top: 5px;
        }
        .start span, .start button{
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="map"></div>
    <div class="start">
        <span>請使用方向鍵控制蛇的方向</span>
        <button id="btn">開始遊戲</button>
    </div>
    <script src="js/food.js"></script>
    <script src="js/snake.js"></script>
    <script src="js/game.js"></script>
</body>
<script>
    document.getElementById('btn').onclick=function(){
        //初始化遊戲對象
        var gm = new Game(document.querySelector(".map"));
        //初始化遊戲---開始遊戲
        gm.init();
    }
</script>
</html>

index.html

/* ---------貪吃蛇食物部分-------------- */
(function () {
    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";
    }

    //爲原型添加初始化的方法(做用：在頁面上顯示這個食物)
    //由於食物要在地圖上顯示,因此,須要地圖的這個參數(map---就是頁面上的.class=map的這個div)
    Food.prototype.init = function (map) {
        //先刪除這個小食物
        remove();

        //建立div
        var div = document.createElement("div");
        //把div加到map中
        map.appendChild(div);
        //設置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中的這個子元素也要刪除
            elements.splice(i, 1);
        }
    }

    //把Food暴露給Window,外部可使用
    window.Food = Food;
}());
// var sankefood=new Food()
// sankefood.init(document.querySelector('.map'))

food.js

/* ------蛇的身體------ */
(function () {
        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 obj = this.body[i];
                //建立div
                var div = document.createElement("div");
                //把div加入到map地圖中
                map.appendChild(div);
                //設置div的樣式
                div.style.position = "absolute";
                div.style.width = this.width + "px";
                div.style.height = this.height + "px";
                //橫縱座標
                div.style.left = obj.x * this.width + "px";
                div.style.top = obj.y * this.height + "px";
                //背景顏色
                div.style.backgroundColor = obj.color;
                //方向暫時不定
                //把div加入到elements數組中----目的是爲了刪除
                elements.push(div);
            }
        };

        //爲原型添加方法---小蛇動起來
        Snake.prototype.move = function (food, map) {
            //改變小蛇的身體的座標位置
            var i = this.body.length - 1; //2
            for (; 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;
                    break;
            }

            //判斷有沒有吃到食物
            //小蛇的頭的座標和食物的座標一致
            var headX = this.body[0].x * this.width;
            var headY = this.body[0].y * this.height;
            //判斷小蛇的頭的座標和食物的座標是否相同
            if (headX == food.x && headY == food.y) {
                //獲取小蛇的最後的尾巴
                var last = this.body[this.body.length - 1];
                //把最後的蛇尾複製一個,從新的加入到小蛇的body中
                this.body.push({x: last.x,y: last.y,color: last.color});
                //把食物刪除,從新初始化食物
                food.init(map);
            }
        }; 
        //刪除小蛇的私有的函數
        function remove() {
            //刪除map中的小蛇的每一個div,同時刪除elements數組中的每一個元素,從蛇尾向蛇頭方向刪除div
            var i = elements.length - 1;
            for (; i >= 0; i--) {
                //先從當前的子元素中找到該子元素的父級元素,而後再去除這個子元素
                var ele = elements[i];
                //從map地圖上刪除這個子元素div
                ele.parentNode.removeChild(ele);
                elements.splice(i, 1);
            }
        }

        //把Snake暴露給window,外部能夠訪問
        window.Snake = Snake;
}());

snake.js

/* ------遊戲初始化------- */
(function () {

    var that = null; //該變量的目的就是爲了保存遊戲Game的實例對象-------

    //遊戲的構造函數
    function Game(map) {
        this.food = new Food(); //食物對象
        this.snake = new Snake(); //小蛇對象
        this.map = map; //地圖
        that = this; //保存當前的實例對象到that變量中-----------------此時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是window
            //移動小蛇
            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;
            //橫座標
            if (headX < 0 || headX >= maxX) {
                //撞牆了,中止定時器
                clearInterval(timeId);
                alert("遊戲結束");
                //從新刷新頁面
                window.location.reload()
            }
            //縱座標
            if (headY < 0 || headY >= maxY) {
                //撞牆了,中止定時器
                clearInterval(timeId);
                alert("遊戲結束");
                //從新刷新頁面
                window.location.reload()
            }
        }.bind(that), 200);
    };

    //添加原型方法---設置用戶按鍵,改變小蛇移動的方向
    Game.prototype.bindKey = function () {

        //獲取用戶的按鍵,改變小蛇的方向
        document.addEventListener("keydown", function (e) {
            //這裏的this應該是觸發keydown的事件的對象---document,
            //因此,這裏的this就是document
            //獲取按鍵的值
            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);
    };

    //把Game暴露給window,外部就能夠訪問Game對象了
    window.Game = Game;
}());