HTML5 雷霆战机游戏：关卡、人物、武器、道具 - 在线试玩 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 雷霆战机游戏</title>
    <style>
        #gameCanvas {
            width: 800px;
            height: 600px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
<pre><code>&lt;script&gt;
    // 创建画布
    var canvas = document.getElementById(&quot;gameCanvas&quot;);
    var context = canvas.getContext(&quot;2d&quot;);

    // 游戏状态
    var gameState = {
        score: 0,
        level: 1,
        player: &quot;Player1&quot;,
        weapon: &quot;Gun&quot;,
        item: &quot;Health Pack&quot;
    };

    // 绘制游戏状态
    function drawGameState() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = &quot;20px Arial&quot;;
        context.fillStyle = &quot;black&quot;;
        context.fillText(&quot;Score: &quot; + gameState.score, 10, 30);
        context.fillText(&quot;Level: &quot; + gameState.level, 10, 60);
        context.fillText(&quot;Player: &quot; + gameState.player, 10, 90);
        context.fillText(&quot;Weapon: &quot; + gameState.weapon, 10, 120);
        context.fillText(&quot;Item: &quot; + gameState.item, 10, 150);
    }

    // 更新游戏状态
    function updateGameState() {
        gameState.score += 10;
        gameState.level += 1;
        gameState.player = &quot;Player2&quot;;
        gameState.weapon = &quot;Rocket&quot;;
        gameState.item = &quot;Shield&quot;;
    }

    // 游戏循环
    function gameLoop() {
        updateGameState();
        drawGameState();
    }

    // 开始游戏
    function startGame() {
        setInterval(gameLoop, 1000);
    }

    // 监听页面加载事件
    window.onload = function() {
        startGame();
    };
&lt;/script&gt;
</code></pre>
</body>
</html>