sandbox-game/index.html at main · mehmetkahya0/sandbox-game · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Physics Sandbox Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="toolbar">
            <h1>PHYSICS SANDBOX</h1>
            <div class="element-buttons">
                <button class="element-btn active" data-element="dirt">DIRT</button>
                <button class="element-btn" data-element="water">WATER</button>
                <button class="element-btn" data-element="fire">FIRE</button>
                <button class="element-btn" data-element="plant">PLANT</button>
                <button class="element-btn" data-element="stone">STONE</button>
                <button class="element-btn" data-element="sand">SAND</button>
                <button class="element-btn" data-element="steam">STEAM</button>
                <button class="element-btn" data-element="oil">OIL</button>
                <button class="element-btn" data-element="ice">ICE</button>
                <button class="element-btn" data-element="lava">LAVA</button>
                <button class="element-btn" data-element="acid">ACID</button>
                <button class="element-btn" data-element="metal">METAL</button>
                <button class="element-btn" data-element="wood">WOOD</button>
                <button class="element-btn" data-element="gunpowder">GUNPOWDER</button>
                <button class="element-btn" data-element="electricity">ELECTRICITY</button>
                <button class="element-btn" data-element="virus">VIRUS</button>
                <button class="element-btn" data-element="magnet">MAGNET</button>
                <button class="element-btn" data-element="gas">GAS</button>
                <button class="element-btn" data-element="plasma">PLASMA</button>
            </div>
            <div class="tool-buttons">
                <button class="tool-btn" data-tool="brush" title="Brush">🖌️</button>
                <button class="tool-btn" data-tool="eraser" title="Eraser">🧽</button>
                <button class="tool-btn" data-tool="eyedropper" title="Eyedropper">💧</button>
                <button class="tool-btn" data-tool="line" title="Line">📏</button>
                <button class="tool-btn" data-tool="explosion" title="Explosion">💥</button>
                <button class="tool-btn" data-tool="rectangle" title="Rectangle">⬜</button>
                <button class="tool-btn" data-tool="circle" title="Circle">⭕</button>
                <button class="tool-btn" data-tool="gravity" title="Gravity">🌍</button>
                <button class="tool-btn" data-tool="wind" title="Wind">💨</button>
                <button class="tool-btn" data-tool="vacuum" title="Vacuum">🌪️</button>
                <button class="tool-btn" data-tool="heat" title="Heater">🔥</button>
                <button class="tool-btn" data-tool="cool" title="Cooler">❄️</button>
            </div>
            <div class="controls">
                <button id="clearBtn">CLEAR</button>
                <button id="pauseBtn">PAUSE</button>
                <button id="saveBtn">SAVE</button>
                <button id="loadBtn">LOAD</button>
                <button id="reverseGravity">⬆️ REVERSE GRAVITY</button>
                <button id="timeControl">⏰ TIME</button>
                <button id="windControl">💨 WIND</button>
                <button id="magneticField">🧲 MAGNETIC</button>
                <button id="randomMode">🎲 RANDOM</button>
                <label>
                    Brush:
                    <input type="range" id="brushSize" min="1" max="20" value="3">
                    <span id="brushSizeValue">3</span>
                </label>
                <label>
                    Speed:
                    <input type="range" id="speedControl" min="1" max="10" value="5">
                    <span id="speedValue">5</span>
                </label>
                <label>
                    Pressure:
                    <input type="range" id="pressureControl" min="1" max="10" value="5">
                    <span id="pressureValue">5</span>
                </label>
                <label>
                    Wind:
                    <input type="range" id="windStrength" min="0" max="10" value="0">
                    <span id="windValue">0</span>
                </label>
            </div>
        </div>
        <canvas id="gameCanvas" width="800" height="600"></canvas>
        <div class="info">
            <p>🎮 <strong>New:</strong> Hold mouse = Continuous flow! Wind, Magnet, Vacuum tools!</p>
            <p>🧪 <strong>Special:</strong> Magnet attracts metals, Gas is flammable, Plasma melts everything</p>
            <p>⚡ <strong>Tools:</strong> Heater/Cooler changes temperature, Vacuum attracts elements</p>
        </div>
        <div class="status-bar">
            <span id="elementCount">Elements: 0</span>
            <span id="fpsCounter">FPS: 60</span>
            <span id="temperatureInfo">Temperature: 20°C</span>
            <span id="windInfo">Wind: ⬅️➡️</span>
            <span id="modeInfo">Mode: Normal</span>
        </div>
        <input type="file" id="fileInput" style="display: none;" accept=".json">

        <footer class="developer-credit">
            <span>Developed by Mehmet Kahya</span>
        </footer>
    </div>
    <script src="script.js"></script>
</body>
</html>