模塊化開發

為什么要用面向物件寫，有三大特性：封裝、繼承、多型，

為什么要封裝：實作模塊化開發，封裝為一個塊一個塊的，利于維護，有某個模塊出現bug只用修改這個模塊，其他模塊不受影響，在作業中，開發速度快，同時開發模塊，

分三個模塊寫：地圖，食物，蛇，

蛇模塊分為：定義蛇、蛇移動、蛇死亡、蛇吃食物、蛇移動方向、蛇顯示，

地圖模塊：

創建地圖板塊，設定樣式

function Map() {
        // 創建一個div
        this.map = document.createElement('div')
        this.setStyle(this.map, {
            width: "700px",
            height: '500px',
            border: "10px solid #ccc",
            backgroundColor: "#abcdef",
            position: "relative"
        })
        // 將div放到body中
        document.body.appendChild(this.map)
    }
    // 添加一個設定樣式的函式
    Map.prototype.setStyle = function (ele, styleObj) {
        for (var attr in styleObj) {
            ele.style[attr] = styleObj[attr]
        }
    }
    // 添加一個獲取亂數的方法
    Map.prototype.getRandom = function (a, b = 0) {
        var max = Math.max(a, b);
        var min = Math.min(a, b)
        return Math.floor(Math.random() * (max - min)) + min
    }

    var m = new Map()

食物模塊：

創建食物div
放入到地圖中
隨機產生食物的范圍，隨機位置函式

    function Food() {
        // 創建一個小div
        this.food = document.createElement('div')
        m.setStyle(this.food, {
            width: "10px",
            height: "10px",
            backgroundColor: "blue",
            position: "absolute",
            left: parseInt(m.getRandom(m.map.clientWidth - 10) / 10) * 10 + 'px',
            top: parseInt(m.getRandom(m.map.clientHeight - 10) / 10) * 10 + 'px',
        })
        // 放到地圖中
        m.map.appendChild(this.food)
    }

    var f = new Food()

定義蛇模塊：

蛇由多個div組成，蛇頭樣式和蛇身區分設定
初始蛇大小由三個div組成，蛇移動以后，創建三個新的div給蛇，洗掉原有的三個div
隨著蛇吃食物，組成蛇的div越多，根據原來的身體的位置，多加相應的div
每個div都是一個物件組成，由left top坐標組成
蛇移動方向默認是向右移動

function Snake() {
        // 屬性
        // 身體
        this.body = [
            {
                x: 0,
                y: 0
            },
            {
                x: 10,
                y: 0
            },
            {
                x: 20,
                y: 0
            },
            {
                x: 30,
                y: 0
            },
            {
                x: 40,
                y: 0
            },
            {
                x: 50,
                y: 0
            }
        ]

        this.direction = 'right'
        this.timer = null

        // 讓蛇顯示的方法
        this.show()
        // 改變蛇移動的方向方法
        this.changeDirection()

    }
    // 初始化方法
    Snake.prototype.init = function () {
        // 移動方法
        this.timer = setInterval(() => {
            this.move()
        }, 100)
    }
    // 蛇移動的方法
    Snake.prototype.move = function () {
        // 根據方向移動
        // 先移動除了蛇頭的其他身體
        for (var i = 0; i < this.body.length - 1; i++) { // 少回圈一次，把蛇頭排除了
            // 注意：這里是復雜資料型別賦值，賦的是地址
            // this.body[i] = this.body[i+1]

            this.body[i].x = this.body[i + 1].x
            this.body[i].y = this.body[i + 1].y
        }

蛇移動模塊：

移動時，當前蛇div坐標就是上一個蛇div的坐標
先移動其他身體，最后再移動蛇頭，身體不能跑到蛇頭的位置
改變蛇頭方向

Snake.prototype.move = function () {
        // 根據方向移動
        // 先移動除了蛇頭的其他身體
        for (var i = 0; i < this.body.length - 1; i++) { // 少回圈一次，把蛇頭排除了
            // 注意：這里是復雜資料型別賦值，賦的是地址
            // this.body[i] = this.body[i+1]

            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[this.body.length - 1].x += 10
                break;
            case 'left':
                this.body[this.body.length - 1].x -= 10;
                break;
            case 'up':
                this.body[this.body.length - 1].y -= 10
                break;
            case 'down':
                this.body[this.body.length - 1].y += 10
                break;
        }
        this.show()

        // 檢測是否遲到食物
        this.eat()
        // 檢測是否死亡
        this.die()
    }

蛇死亡模塊：

蛇撞墻死、和蛇撞自己身體死
蛇的left 和top 大于地圖的右邊界和下邊界，判斷撞墻
身體div的x和蛇頭div的x相等或身體div的y和蛇頭div的y相等，蛇撞自己

Snake.prototype.die = function () {
        // 撞墻
        if (this.body[this.body.length - 1].x < 0 || this.body[this.body.length - 1].y < 0 || this.body[this.body.length - 1].x > m.map.clientWidth - 10 || this.body[this.body.length - 1].y > m.map.clientHeight - 10) {
            clearInterval(this.timer)
            alert('GAME OVER')
        }
        // 撞自己身體
        for (var i = 0; i < this.body.length - 1; i++) {
            if (this.body[i].x === this.body[this.body.length - 1].x && this.body[i].y === this.body[this.body.length - 1].y) {
                clearInterval(this.timer)
                alert('GAME OVER')
                break;
            }
        }
    }
    // 蛇吃食物的方法
    Snake.prototype.eat = function () {
        // 蛇頭和食物的坐標重合就是吃到了
        if (this.body[this.body.length - 1].x === f.food.offsetLeft && this.body[this.body.length - 1].y === f.food.offsetTop) {
            // 從開頭添加一節身體
            this.body.unshift({
                x: this.body[0].x,
                y: this.body[0].y
            })
            // 讓食物洗掉并重新創建食物
            m.map.removeChild(f.food)
            // 重新創建食物
            f = new Food()
        }
    }

蛇吃食物模塊：

蛇頭如果和食物重疊，就吃到食物了，
注意設定蛇移動大小的像素和食物生成位置的坐標，需要讓蛇和食物能重疊
蛇吃到食物后，洗掉食物div，再生成隨機坐標的新食物

  Snake.prototype.eat = function () {
        // 蛇頭和食物的坐標重合就是吃到了
        if (this.body[this.body.length - 1].x === f.food.offsetLeft && this.body[this.body.length - 1].y === f.food.offsetTop) {
            // 從開頭添加一節身體
            this.body.unshift({
                x: this.body[0].x,
                y: this.body[0].y
            })
            // 讓食物洗掉并重新創建食物
            m.map.removeChild(f.food)
            // 重新創建食物
            f = new Food()
        }
    }

https://blog.csdn.net/weixin_44070254/article/details/117846779

改變蛇移動方向模塊：

設定蛇移動方向對應的鍵盤按鍵碼

 Snake.prototype.changeDirection = function () {
        document.onkeydown = e => {
            var e = e || window.event;
            var keycode = e.keyCode || e.which;
            // console.log(keycode);
            var keyword = String.fromCharCode(keycode).toLowerCase()
            switch (keyword) {
                case 'a':
                    this.direction = 'left'
                    break;
                case 'd':
                    this.direction = 'right';
                    break;
                case 'w':
                    this.direction = 'up';
                    break;
                case 's':
                    this.direction = 'down';
                    break;
            }
        }
    }

蛇顯示模塊：

每一節身體div設定大小10個像素，應該和食物一樣大
設定蛇的樣式蛇頭蛇身顏色和坐標
蛇放入地圖中
先洗掉原來的身體，再顯示新的身體

Snake.prototype.show = function () {
        // 先洗掉原來的身體再顯示新的身體
        var snakes = document.querySelectorAll('.snake')
        if (snakes.length) {
            for (var i = 0; i < snakes.length; i++) {
                m.map.removeChild(snakes[i])
            }
        }

        // 根據身體陣列創建div，設定坐標
        for (var i = 0; i < this.body.length; i++) {
            var div = document.createElement('div')
            div.className = 'snake'
            m.setStyle(div, {
                width: "10px",
                height: "10px",
                backgroundColor: "#000",
                position: "absolute",
                left: this.body[i].x + "px",
                top: this.body[i].y + "px"
            })
            // 放到地圖中
            m.map.appendChild(div)
            if (i === this.body.length - 1) {
                m.setStyle(div, {
                    backgroundColor: "red",
                    borderRadius: "50%"
                })
            }
        }
    }

原始碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>document</title>
</head>

<body>
    <button>開始</button>
</body>
<script>
    // 地圖
    function Map() {
        // 創建一個div
        this.map = document.createElement('div')
        this.setStyle(this.map, {
            width: "700px",
            height: '500px',
            border: "10px solid #ccc",
            backgroundColor: "#abcdef",
            position: "relative"
        })
        // 將div放到body中
        document.body.appendChild(this.map)
    }
    // 添加一個設定樣式的函式
    Map.prototype.setStyle = function (ele, styleObj) {
        for (var attr in styleObj) {
            ele.style[attr] = styleObj[attr]
        }
    }
    // 添加一個獲取亂數的方法
    Map.prototype.getRandom = function (a, b = 0) {
        var max = Math.max(a, b);
        var min = Math.min(a, b)
        return Math.floor(Math.random() * (max - min)) + min
    }

    var m = new Map()
    // 食物
    function Food() {
        // 創建一個小div
        this.food = document.createElement('div')
        m.setStyle(this.food, {
            width: "10px",
            height: "10px",
            backgroundColor: "blue",
            position: "absolute",
            left: parseInt(m.getRandom(m.map.clientWidth - 10) / 10) * 10 + 'px',
            top: parseInt(m.getRandom(m.map.clientHeight - 10) / 10) * 10 + 'px',
        })
        // 放到地圖中
        m.map.appendChild(this.food)
    }

    var f = new Food()
    // 蛇
    function Snake() {
        // 屬性
        // 身體
        this.body = [
            {
                x: 0,
                y: 0
            },
            {
                x: 10,
                y: 0
            },
            {
                x: 20,
                y: 0
            },
            {
                x: 30,
                y: 0
            },
            {
                x: 40,
                y: 0
            },
            {
                x: 50,
                y: 0
            }
        ]

        this.direction = 'right'
        this.timer = null

        // 讓蛇顯示的方法
        this.show()
        // 改變蛇移動的方向方法
        this.changeDirection()

    }
    // 初始化方法
    Snake.prototype.init = function () {
        // 移動方法
        this.timer = setInterval(() => {
            this.move()
        }, 100)
    }
    // 蛇移動的方法
    Snake.prototype.move = function () {
        // 根據方向移動
        // 先移動除了蛇頭的其他身體
        for (var i = 0; i < this.body.length - 1; i++) { // 少回圈一次，把蛇頭排除了
            // 注意：這里是復雜資料型別賦值，賦的是地址
            // this.body[i] = this.body[i+1]

            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[this.body.length - 1].x += 10
                break;
            case 'left':
                this.body[this.body.length - 1].x -= 10;
                break;
            case 'up':
                this.body[this.body.length - 1].y -= 10
                break;
            case 'down':
                this.body[this.body.length - 1].y += 10
                break;
        }
        this.show()

        // 檢測是否遲到食物
        this.eat()
        // 檢測是否死亡
        this.die()
    }
    // 蛇死亡的方法
    Snake.prototype.die = function () {
        // 撞墻
        if (this.body[this.body.length - 1].x < 0 || this.body[this.body.length - 1].y < 0 || this.body[this.body.length - 1].x > m.map.clientWidth - 10 || this.body[this.body.length - 1].y > m.map.clientHeight - 10) {
            clearInterval(this.timer)
            alert('GAME OVER')
        }
        // 撞自己身體
        for (var i = 0; i < this.body.length - 1; i++) {
            if (this.body[i].x === this.body[this.body.length - 1].x && this.body[i].y === this.body[this.body.length - 1].y) {
                clearInterval(this.timer)
                alert('GAME OVER')
                break;
            }
        }
    }
    // 蛇吃食物的方法
    Snake.prototype.eat = function () {
        // 蛇頭和食物的坐標重合就是吃到了
        if (this.body[this.body.length - 1].x === f.food.offsetLeft && this.body[this.body.length - 1].y === f.food.offsetTop) {
            // 從開頭添加一節身體
            this.body.unshift({
                x: this.body[0].x,
                y: this.body[0].y
            })
            // 讓食物洗掉并重新創建食物
            m.map.removeChild(f.food)
            // 重新創建食物
            f = new Food()
        }
    }
    // 改變移動方向
    Snake.prototype.changeDirection = function () {
        document.onkeydown = e => {
            var e = e || window.event;
            var keycode = e.keyCode || e.which;
            // console.log(keycode);
            var keyword = String.fromCharCode(keycode).toLowerCase()
            switch (keyword) {
                case 'a':
                    this.direction = 'left'
                    break;
                case 'd':
                    this.direction = 'right';
                    break;
                case 'w':
                    this.direction = 'up';
                    break;
                case 's':
                    this.direction = 'down';
                    break;
            }
        }
    }
    // 讓蛇顯示的方法
    Snake.prototype.show = function () {
        // 先洗掉原來的身體再顯示新的身體
        var snakes = document.querySelectorAll('.snake')
        if (snakes.length) {
            for (var i = 0; i < snakes.length; i++) {
                m.map.removeChild(snakes[i])
            }
        }

        // 根據身體陣列創建div，設定坐標
        for (var i = 0; i < this.body.length; i++) {
            var div = document.createElement('div')
            div.className = 'snake'
            m.setStyle(div, {
                width: "10px",
                height: "10px",
                backgroundColor: "#000",
                position: "absolute",
                left: this.body[i].x + "px",
                top: this.body[i].y + "px"
            })
            // 放到地圖中
            m.map.appendChild(div)
            if (i === this.body.length - 1) {
                m.setStyle(div, {
                    backgroundColor: "red",
                    borderRadius: "50%"
                })
            }
        }
    }

    var s = new Snake()

    document.querySelector('button').onclick = function () {
        s.init()
    }
</script>

</html>

覺得博主總結的不錯的，可以收藏支持一波~

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/287246.html

標籤：其他

上一篇：[專案實戰，原始碼完整]手把手教你怎么封裝組件，React 重寫學成在線 III

下一篇：嚴格上升子序列數（樹狀陣列）（離散化優化）

我用端午假期寫了個貪吃蛇，學弟玩的不亦樂乎！附（思路注釋+原始碼）

模塊化開發