Day 11

2025 iThome 鐵人賽

DAY 11

Vue.js

從零開始學習TypeScript、Vue.js !!系列第 11 篇

17th鐵人賽

jay0519

2025-09-25 17:49:18

59 瀏覽

分享至

實作二：彈球遊戲

今天要做的這個實作，應該有些人都玩過類似的遊戲，規則非常簡單，球體會在畫面中飛來飛去，碰到左右及上方的牆體就反彈，而下方會有一塊擋板給你進行水平方向的移動，只需要當球體朝下時，使用擋板反彈，不讓它碰到底部即可。
這個遊戲的邏輯剛好跟我們這幾天所學的內容有關，可以透過監聽鍵盤事件操控擋板，再加上一點球體的回彈演算法就能完成了。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彈球遊戲</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
            margin: 0 auto;
            width: 440px;
            height: 440px;
            background-color: blanchedalmond;
        }
        
        .ball {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 0px;
            top: 0px;
            background-color: orange;
            border-radius: 30px;
        }
        
        .board {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 10px;
            width: 80px;
            border-radius: 5px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="Application">
        <!-- 遊戲區域 -->
        <div class="container">
            <!-- 底部擋板 -->
            <div class="board" :style="{left: boardX + 'px'}"></div>
            <!-- 彈球 -->
            <div class="ball" :style="{left: ballX+'px', top: ballY+'px'}"></div>
            <!-- 遊戲結束提示 -->
            <h1 v-if="fail" style="text-align: center;">遊戲失敗</h1>
        </div>
    </div>
    <script>
        const App = {
            data() {
                return {
                    boardX: 0,  // 控制擋板位置
                    ballX: 0,   // 控制彈球位置
                    ballY: 0,
                    rateX: 0.5, // 控制彈球移動速度
                    rateY: 0.5,
                    fail: false // 控制結束遊戲顯示的顯示
                }
            },
            mounted() {     // 元件生命週期函數，元件載入時會呼叫
                this.enterKeyup();  // 新增鍵盤事件
                this.rateX = (Math.random() + 0.3); // 隨機彈球的運動速度和方向
                this.rateY = (Math.random() + 0.3);
                this.timer = setInterval(() => {    // 開啟計數器，控制彈球移動
                    if (this.ballX + this.rateX >= 440 - 30) {
                        this.rateX *= -1;   // 到達右側邊緣進行反彈
                    }
                    if (this.ballX + this.rateX <= 0) {
                        this.rateX *= -1;   // 到達左側邊緣進行反彈
                    }
                    if (this.ballY + this.rateY <= 0) {
                        this.rateY *= -1;   // 到達上側邊緣進行反彈
                    }
                    // 修改小球的位置：當前位置加上單位時間的速度
                    this.ballX += this.rateX;
                    this.ballY += this.rateY;
                    // 失敗判定
                    if (this.ballY >= 440 - 30 - 10) {
                        if (this.boardX <= this.ballX + 30 && this.boardX + 80 >= this.ballX) {
                            this.rateY *= -1;   // 擋板接住了彈球，進行反彈
                        } else {
                            clearInterval(this.timer);
                            this.fail = true;   // 沒有接住彈球，遊戲結束
                        }
                    }
                }, 2);  //每隔2毫秒執行一次函數
            },
            methods: {
                // 控制擋板移動
                keydown(event) {
                    if (event.key == "ArrowLeft") {
                        if (this.boardX > 10) {
                            this.boardX -= 30;
                        }
                    } else if (event.key == "ArrowRight") {
                        if (this.boardX < 440 - 80) {
                            this.boardX += 30;
                        }
                    }
                },
                enterKeyup() {
                    document.addEventListener("keydown", this.keydown);
                }
            }
        }
        Vue.createApp(App).mount("#Application");
    </script>
</body>
</html>