小精靈遊戲

2024/01/04閱讀時間約 5 分鐘

網頁

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>健康小精靈遊戲</title>
    <style>
        #gameArea {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .sprite {
            width: 50px;
            height: 50px;
            position: absolute;
        }
        .food {
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: green; /* 健康食物 */
        }
        .unhealthy {
            background-color: red; /* 不健康食物 */
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <div id="sprite" class="sprite"></div>
    </div>
    <script src="game.js"></script>
</body>
</html>

JavaScript (game.js)

document.addEventListener('DOMContentLoaded', () => {
    const sprite = document.getElementById('sprite');
    let spriteSpeed = 5;

    let gameArea = document.getElementById('gameArea');
    let gameWidth = gameArea.offsetWidth;
    let gameHeight = gameArea.offsetHeight;

    function moveSprite(event) {
        let x = sprite.offsetLeft;
        let y = sprite.offsetTop;

        switch (event.key) {
            case 'ArrowUp': y -= spriteSpeed; break;
            case 'ArrowDown': y += spriteSpeed; break;
            case 'ArrowLeft': x -= spriteSpeed; break;
            case 'ArrowRight': x += spriteSpeed; break;
        }

        // 保持小精靈在遊戲區域內
        if (x < 0) x = 0;
        if (y < 0) y = 0;
        if (x > gameWidth - sprite.offsetWidth) x = gameWidth - sprite.offsetWidth;
        if (y > gameHeight - sprite.offsetHeight) y = gameHeight - sprite.offsetHeight;

        sprite.style.left = x + 'px';
        sprite.style.top = y + 'px';
    }

    // 鍵盤控制
    document.addEventListener('keydown', moveSprite);
});

// 這裡您可以添加食物生成的邏輯，以及與食物交互時的效果等。