MarkOrps/discrete-equations-labyrinth-runner
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Discrete Maze Runner - Game</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');12 </style>13</head>14<body class="bg-gray-900 text-white font-['Space_Mono']">15 <equations-background></equations-background>16 <div class="relative min-h-screen z-10">17 <!-- Game Board Container -->18 <div class="container mx-auto px-4 py-8">19 <div class="flex flex-col lg:flex-row gap-8">20 <!-- Main Game Board (big box) -->21 <div class="flex-1 bg-gray-800 rounded-xl p-4 shadow-lg border-4 border-purple-500">22 <h2 class="text-2xl font-bold mb-4 text-center text-purple-300 uppercase">MAZE RUNNER - <span id="difficulty-display"></span></h2>23 <div class="w-full h-[70vh] bg-gray-900 rounded-lg relative overflow-hidden">24 <!-- Maze will be rendered here -->25 <div id="maze-container" class="w-full h-full grid grid-cols-10 grid-rows-10 gap-1 p-2"></div>26 </div>27 </div>28 29 <!-- Right Panel (small box) -->30 <div class="w-full lg:w-96 flex flex-col gap-6">31 <!-- Player Info -->32 <div class="bg-gray-800 p-4 rounded-xl border border-purple-400 shadow-lg">33 <h3 class="text-xl font-bold mb-4 text-purple-300">PLAYER <span id="current-player">1</span></h3>34 <div class="flex justify-between items-center">35 <span class="text-lg">Position:</span>36 <span id="player-position" class="text-xl font-mono">Start</span>37 </div>38 </div>39 <!-- Question Window -->40 <div class="bg-gray-800 p-4 rounded-xl border border-purple-400 shadow-lg">41 <h3 class="text-xl font-bold mb-4 text-purple-300">MATH CHALLENGE</h3>42 <div id="question-display" class="min-h-32 p-4 bg-gray-900 rounded-lg flex items-center justify-center">43 <p id="current-question" class="text-2xl text-center">Click ROLL to start!</p>44 </div>45 <div class="mt-4 flex gap-2">46 <input type="text" id="answer-input" class="flex-1 p-3 bg-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Enter your answer...">47 <button id="submit-answer" class="px-6 bg-purple-600 hover:bg-purple-700 rounded-lg transition-colors">Send</button>48 </div>49</div>50 51 <!-- Dice Section -->52<div class="bg-gray-800 p-6 rounded-xl border border-purple-400 shadow-lg">53 <div class="flex flex-col items-center gap-4">54 <div id="dice-circle" class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center text-4xl font-bold shadow-xl">55 <span id="dice-value">?</span>56 </div>57 58 <button id="roll-button" class="w-full px-8 py-4 text-xl font-bold bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg hover:scale-105 transition-transform duration-300 shadow-lg">59 ROLL DICE60 </button>61 </div>62 </div>63 </div>64 </div>65 </div>66 </div>67<script src="components/equations.js"></script>68 <script src="script.js"></script>69 <script>70 feather.replace();71 72 // Parse URL parameters73 const urlParams = new URLSearchParams(window.location.search);74 const players = urlParams.get('players') || 2;75 const mode = urlParams.get('mode') || 'medium';76 // Game logic77 document.addEventListener('DOMContentLoaded', () => {78 const rollButton = document.getElementById('roll-button');79 const diceValue = document.getElementById('dice-value');80 const questionDisplay = document.getElementById('current-question');81 const difficultyDisplay = document.getElementById('difficulty-display');82 const submitButton = document.getElementById('submit-answer');83 const answerInput = document.getElementById('answer-input');84 85 // Show current difficulty86 difficultyDisplay.textContent = mode;87 88 // Game state89 let currentPlayer = 1;90 let playerPositions = {91 1: {row: 9, col: 0}, // Start at bottom-left92 2: {row: 9, col: 0},93 3: {row: 9, col: 0},94 4: {row: 9, col: 0},95 5: {row: 9, col: 0}96 };97 let currentRoll = 0;98 99 // Update player position display100 function updatePlayerPosition() {101 document.getElementById('player-position').textContent = 102 `Row ${playerPositions[currentPlayer].row + 1}, Col ${playerPositions[currentPlayer].col + 1}`;103 }104 105 // Move player on the board106 function movePlayer(steps) {107 const mazeContainer = document.getElementById('maze-container');108 const cells = mazeContainer.querySelectorAll('div');109 110 // Clear previous position111 cells.forEach(cell => {112 cell.innerHTML = cell.innerHTML.replace('<div class="player-indicator">YOU</div>', '');113 });114 115 // Move player116 let newRow = playerPositions[currentPlayer].row;117 let newCol = playerPositions[currentPlayer].col;118 119 // Simple movement logic (move up first, then right)120 for (let i = 0; i < steps; i++) {121 if (newRow > 0 && Math.random() > 0.5) {122 newRow--;123 } else if (newCol < 9) {124 newCol++;125 } else if (newRow > 0) {126 newRow--;127 }128 }129 130 // Ensure we stay within bounds131 newRow = Math.max(0, Math.min(9, newRow));132 newCol = Math.max(0, Math.min(9, newCol));133 134 playerPositions[currentPlayer] = {row: newRow, col: newCol};135 136 // Update new position with player indicator137 const newCell = mazeContainer.querySelector(`div[data-row="${newRow}"][data-col="${newCol}"]`);138 if (newCell) {139 newCell.innerHTML += '<div class="player-indicator">YOU</div>';140 }141 142 updatePlayerPosition();143 }144// Math questions by difficulty145 const questions = {146 easy: [147 "What is 5 + 3?",148 "Solve: 10 - 4",149 "Calculate: 2 × 3",150 "What is 12 ÷ 3?",151 "Solve: 7 + 8 - 5",152 "Calculate: 4 × 2 + 1"153 ],154 medium: [155 "Solve: 3x + 5 = 17",156 "Find x: 2(x + 3) = 16",157 "Calculate: (4 + 3) × 2",158 "What is 15% of 200?",159 "Solve: 2² + 3²",160 "Find x: x/3 = 12"161 ],162 hard: [163 "Solve: 2x + 3y = 12 when x=3",164 "Calculate: √49 + ∛27",165 "Find derivative of x² + 3x",166 "Solve: log₂8 + ln(e³)",167 "Calculate: ∫(2x)dx from 0 to 3",168 "Find matrix product of [1,2][3,4] and [5,6][7,8]"169 ]170 };171 rollButton.addEventListener('click', () => {172 // Roll dice (1-6)173 currentRoll = Math.floor(Math.random() * 6) + 1;174 diceValue.textContent = currentRoll;175 176 // Get random question based on difficulty177 const randomQuestion = questions[mode][Math.floor(Math.random() * questions[mode].length)];178 questionDisplay.textContent = randomQuestion;179 180 // Enable answer input181 answerInput.disabled = false;182 answerInput.value = '';183 answerInput.focus();184 185 // Disable button temporarily186 rollButton.disabled = true;187 });188 // Handle answer submission189 function checkAnswer() {190 const answer = answerInput.value.trim();191 const currentQuestion = questionDisplay.textContent;192 193 if (answer) {194 // Simple answer check - in a real game you'd parse the question and verify the answer195 const isCorrect = Math.random() > 0.3; // 70% chance of being correct for demo196 197 if (isCorrect) {198 movePlayer(currentRoll);199 alert(`Correct! You move ${currentRoll} spaces.`);200 } else {201 alert('Wrong answer! Try again next turn.');202 }203 204 answerInput.value = '';205 answerInput.disabled = true;206 rollButton.disabled = false;207 208 // Switch players (simple rotation)209 currentPlayer = currentPlayer % players + 1;210 document.getElementById('current-player').textContent = currentPlayer;211 updatePlayerPosition();212 }213 }214 215 answerInput.addEventListener('keypress', (e) => {216 if (e.key === 'Enter') {217 checkAnswer();218 }219 });220 221 submitButton.addEventListener('click', checkAnswer);222 // Generate maze grid with special tiles223 const mazeContainer = document.getElementById('maze-container');224 mazeContainer.innerHTML = '';225 226 for (let row = 0; row < 10; row++) {227 for (let col = 0; col < 10; col++) {228 const cell = document.createElement('div');229 cell.className = 'bg-gray-600 rounded-sm flex items-center justify-center relative';230 cell.dataset.row = row;231 cell.dataset.col = col;232 233 // Start position (bottom-left)234 if (row === 9 && col === 0) {235 cell.className = 'bg-green-600 rounded-sm flex items-center justify-center relative';236 cell.innerHTML = '<i data-feather="flag" class="text-white"></i>';237 }238 // End position (top-right)239 else if (row === 0 && col === 9) {240 cell.className = 'bg-purple-600 rounded-sm flex items-center justify-center relative';241 cell.innerHTML = '<i data-feather="award" class="text-white"></i>';242 }243 // Random obstacles (10% chance)244 else if (Math.random() < 0.1) {245 cell.className = 'bg-red-600 rounded-sm flex items-center justify-center relative';246 cell.innerHTML = '<i data-feather="x" class="text-white"></i>';247 }248 // Random power-ups (5% chance)249 else if (Math.random() < 0.05) {250 cell.className = 'bg-yellow-500 rounded-sm flex items-center justify-center relative';251 cell.innerHTML = '<i data-feather="zap" class="text-black"></i>';252 }253 254 mazeContainer.appendChild(cell);255 }256 }257 258 // Initialize player position259 updatePlayerPosition();260 const startCell = mazeContainer.querySelector('div[data-row="9"][data-col="0"]');261 if (startCell) {262 startCell.innerHTML += '<div class="player-indicator">YOU</div>';263 }264feather.replace();265});266 </script>267</body>268</html>