braintrain-game/math.html at main · Shadowed-Monarch/braintrain-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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/jpeg" href="maths.png">
    <title>Maths Train</title>
    <script src="theme.js"></script>
    <style>
        @property --accent { syntax: '<color>'; initial-value: #ff0000; inherits: true; }
        :root[data-theme="dark"] { --bg: #050505; --text: #fff; --border: #333; --overlay: rgba(0,0,0,0.9); --shadow-color: var(--accent); }
        :root[data-theme="light"] { --bg: #f5f5f5; --text: #000; --border: #ddd; --overlay: rgba(255,255,255,0.9); --shadow-color: transparent; }
        @keyframes rainbow-loop { 0%{--accent:#f00} 20%{--accent:#ff0} 40%{--accent:#0f0} 60%{--accent:#0ff} 80%{--accent:#90f} 100%{--accent:#f00} }
        .rainbow-active { animation: rainbow-loop 5s infinite linear !important; }
        body { font-family: sans-serif; background: var(--bg); color: var(--text); margin: 0; display: flex; flex-direction: column; align-items: center; height: 100vh; overflow: hidden; }
        header { width: 100%; padding: 10px 20px; display: flex; justify-content: space-between; border-bottom: 2px solid var(--accent); align-items: center; background: var(--bg); box-sizing: border-box; }
        .brain-wrap { display: flex; align-items: center; gap: 8px; color: #ff77ff; font-weight: bold; }
        #game-container { position: relative; width: 95%; max-width: 800px; height: 70vh; margin-top: 20px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
        #input-area { width: 95%; max-width: 800px; display: flex; gap: 10px; margin-top: 20px; justify-content: center; }
        #ans { padding: 15px; font-size: 1.5rem; text-align: center; border: 2px solid var(--accent); border-radius: 10px; width: 200px; outline: none; background: var(--bg); color: var(--text); }
        .bubble { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-weight: bold; background: var(--bg); box-shadow: 0 0 10px var(--shadow-color); font-size: 1.2rem; animation-timing-function: linear; }
        @keyframes drift { from { top: -100px; } to { top: 100%; } }
        .game-btn { padding: 15px 40px; font-size: 1.5rem; background: var(--bg); color: var(--text); border: 2px solid var(--accent); border-radius: 30px; cursor: pointer; margin-top: 50px; }
        #btn-container { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: var(--overlay); z-index: 20; text-align: center; padding: 20px; }
        #stats { display: flex; gap: 20px; margin-top: 10px; font-size: 1.2rem; }
    </style>
</head>
<body>
    <header>
        <a href="index.html" style="text-decoration:none; color:var(--text); font-weight:bold;">← HOME</a>
        <div style="font-weight:bold;">LEVEL <span id="lvl-display">1</span></div>
        <div class="brain-wrap"><span>🧠</span> <span id="total-brains">0</span></div>
    </header>
    <div id="stats">
        <div>Solved: <span id="count">0</span>/10</div>
        <div>Time: <span id="time">30</span>s</div>
    </div>
    <div id="game-container">
        <div id="btn-container"></div>
    </div>
    <div id="input-area">
        <input type="number" id="ans" placeholder="?" autocomplete="off">
    </div>
    <button id="start-btn" class="game-btn" onclick="game.start()">START GAME</button>
    <script>
        let selectedLvl = parseInt(localStorage.getItem('bt_unlocked_math')) || 1;
        class MathGame {
            constructor() {
                this.brains = parseInt(localStorage.getItem('bt_coins')) || 0;
                this.isPlaying = false;
                this.solved = 0;
                this.time = 30;
                this.active = null;
                this.timer = null;
                this.updateUI();
            }
            updateUI() {
                document.getElementById('total-brains').innerText = this.brains;
                document.getElementById('lvl-display').innerText = selectedLvl;
            }
            initMenu() {
                const btnContainer = document.getElementById('btn-container');
                btnContainer.style.display = 'none';
                btnContainer.innerHTML = "";
                this.solved = 0;
                this.time = 30;
                document.getElementById('count').innerText = "0";
                document.getElementById('time').innerText = "30";
            }
            start() {
                document.getElementById('start-btn').style.display = 'none';
                this.initMenu();
                this.isPlaying = true;
                this.spawn();
                this.timer = setInterval(() => {
                    this.time--;
                    document.getElementById('time').innerText = this.time;
                    if(this.time <= 0) this.end("time");
                }, 1000);
                document.getElementById('ans').focus();
            }
            spawn() {
                if(!this.isPlaying) return;
                const container = document.getElementById('game-container');
                const el = document.createElement('div');
                el.className = 'bubble';
                let speed = Math.max(2, 8 - (selectedLvl * 0.3));
                el.style.animation = `drift ${speed}s linear forwards`;
                el.style.left = Math.random() * (container.clientWidth - 80) + "px";
                const n1 = Math.floor(Math.random() * (5 + selectedLvl));
                const n2 = Math.floor(Math.random() * (5 + selectedLvl));
                el.innerText = `${n1}+${n2}`;
                container.appendChild(el);
                this.active = { el, ans: (n1 + n2).toString() };
                el.addEventListener('animationend', () => { if(this.isPlaying) { el.remove(); this.spawn(); } });
            }
            end(reason) {
                this.isPlaying = false;
                clearInterval(this.timer);
                if(this.active) this.active.el.remove();
                this.active = null;
                const btnContainer = document.getElementById('btn-container');
                const title = document.createElement('h1');
                title.style.fontSize = "2.2rem";
                btnContainer.appendChild(title);
                btnContainer.style.display = 'flex';
                if(reason === "win") {
                    this.brains += (selectedLvl * 5);
                    if(selectedLvl === (parseInt(localStorage.getItem('bt_unlocked_math'))||1)) {
                         localStorage.setItem('bt_unlocked_math', selectedLvl + 1);
                    }
                    localStorage.setItem('bt_coins', this.brains);
                    title.innerText = "LEVEL CLEAR!";
                    const nextBtn = document.createElement('button');
                    nextBtn.className = 'game-btn';
                    nextBtn.innerText = "NEXT LEVEL";
                    nextBtn.onclick = () => { selectedLvl++; this.initMenu(); this.updateUI(); this.start(); };
                    btnContainer.appendChild(nextBtn);
                } else {
                    title.innerText = "TIME OVER ! TOO LATE, YOU CAN'T DO THIS LEVEL 💀";
                    const retryBtn = document.createElement('button');
                    retryBtn.className = 'game-btn';
                    retryBtn.innerText = "PLAY AGAIN";
                    retryBtn.onclick = () => this.start();
                    btnContainer.appendChild(retryBtn);
                }
            }
        }
        const game = new MathGame();
        document.getElementById('ans').addEventListener('input', (e) => {
            if(game.isPlaying && game.active && e.target.value === game.active.ans) {
                game.active.el.remove();
                game.active = null;
                game.solved++;
                game.time += 1;
                document.getElementById('time').innerText = game.time;
                document.getElementById('count').innerText = game.solved;
                document.getElementById('ans').value = "";
                if(game.solved >= 10) { game.end("win"); } else { game.spawn(); }
            }
        });
    </script>
</body>
</html>