js/puzzle-dungeon/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Puzzle Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <form id="commandForm">
        <textarea id="commands" rows="10" cols="30"></textarea><br>
        <button type="submit">Submit</button>
    </form>
    <div id="playerStatus">
        <h3>Player Status</h3>
        <p id="playerPosition">Position: (0, 0)</p>
        <p id="playerHealth">Health: 10</p>
        <p id="playerEndurance">Endurance: 10</p>
        <p id="playerInventory">Inventory: []</p>
        <p id="playerScore">Score: 0</p>
    </div>
    <script type="module">
        import { parseCommands } from './parser.js';
        import { initializeGame, resizeCanvas } from './game.js';

        document.getElementById('commandForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const commands = document.getElementById('commands').value;
            parseCommands(commands);
        });

        window.addEventListener('resize', resizeCanvas);

        // Initialize the game
        initializeGame();
    </script>
</body>
</html>