index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arcade Shooter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="game-info">
            <div class="score">Score: <span id="score">0</span></div>
            <div class="lives">Lives: <span id="lives">3</span></div>
            <div class="level">Level: <span id="level">1</span></div>
        </div>
        
        <canvas id="gameCanvas" width="800" height="600"></canvas>
        
        <div class="controls">
            <p>Use <strong>Arrow Keys</strong> to move | <strong>Space</strong> to shoot</p>
            <button id="startBtn">Start Game</button>
            <button id="pauseBtn">Pause</button>
            <button id="resetBtn">Reset</button>
        </div>
        
        <div id="gameOver" class="modal hidden">
            <div class="modal-content">
                <h2>Game Over!</h2>
                <p>Final Score: <span id="finalScore">0</span></p>
                <button onclick="location.reload()">Play Again</button>
            </div>
        </div>
        
        <div id="levelUp" class="modal hidden">
            <div class="modal-content">
                <h2>Level Up!</h2>
                <p>Get ready for Level <span id="nextLevel">2</span></p>
                <button onclick="document.getElementById('levelUp').classList.add('hidden')">Continue</button>
            </div>
        </div>
    </div>
    
    <script src="game.js"></script>
</body>
</html>