Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JS Coding Game - Professional Template with Monaco Editor</title> | |
| <!-- Monaco Editor Loader --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/loader.js"></script> | |
| <!-- Matter.js Library --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } | |
| #container { max-width: 1000px; margin: auto; } | |
| #guide { background: #ffffff; border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; } | |
| #guide h3, #guide h4 { margin-top: 0; } | |
| #taskPanel { background: #ffffff; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } | |
| #editor { width: 100%; height: 250px; border: 1px solid #ccc; } | |
| #runBtn { padding: 10px 20px; margin-top: 10px; font-size: 16px; cursor: pointer; } | |
| #gameCanvas { display: block; margin-top: 20px; border: 1px solid #333; background: #e0f7fa; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <!-- How To Play Guide --> | |
| <div id="guide"> | |
| <h3>How to Play</h3> | |
| <p> | |
| Control the hero by writing JavaScript commands in the editor below. | |
| When you click "Run Code," your commands will be executed and affect the game in real time. | |
| </p> | |
| <h4>Basic Commands</h4> | |
| <ul> | |
| <li><code>console.log("move 5");</code> – Moves the hero to the right (sets hero’s x velocity to 5).</li> | |
| <li><code>console.log("jump 0.05");</code> – Makes the hero jump by applying an upward force.</li> | |
| <li><code>console.log("attack sword");</code> – Attacks with the sword (removes an enemy if in range).</li> | |
| <li><code>console.log("attack bow");</code> – Fires an arrow from the hero.</li> | |
| <li><code>console.log("attack bomb");</code> – Throws a bomb that explodes after a short delay.</li> | |
| </ul> | |
| <h4>Advanced Logic</h4> | |
| <p> | |
| You can access global game variables directly to build advanced logic. For example: | |
| </p> | |
| <pre style="background:#eee; padding:10px;">if (hero.velocity.x > 4) { | |
| console.log("Hero is speeding!"); | |
| }</pre> | |
| <p>The following game variables are available:</p> | |
| <ul> | |
| <li><code>hero</code> – The hero’s Matter.js body (position, velocity, etc.).</li> | |
| <li><code>engine</code> – The Matter.js engine instance.</li> | |
| <li><code>world</code> – The Matter.js world containing all game bodies.</li> | |
| <li><code>enemies</code> – An array of enemy bodies.</li> | |
| <li><code>sword</code> – The sword body used for melee attacks.</li> | |
| </ul> | |
| </div> | |
| <!-- Task Display Panel --> | |
| <div id="taskPanel"> | |
| <strong>Current Task:</strong> <span id="taskText"></span> | |
| </div> | |
| <!-- Monaco Editor Container --> | |
| <div id="editor"></div> | |
| <button id="runBtn">Run Code</button> | |
| <!-- Game Canvas --> | |
| <canvas id="gameCanvas" width="600" height="300"></canvas> | |
| </div> | |
| <script> | |
| // --- Initialize Monaco Editor --- | |
| require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs' }}); | |
| let monacoEditor; | |
| require(['vs/editor/editor.main'], function() { | |
| monacoEditor = monaco.editor.create(document.getElementById('editor'), { | |
| value: `// Example Commands: | |
| // Basic movement: | |
| console.log("move 5"); | |
| console.log("jump 0.05"); | |
| // Advanced logic example: | |
| // if (hero.velocity.x > 4) { console.log("Hero is speeding!"); } | |
| // To attack using different weapons: | |
| // console.log("attack sword"); | |
| // console.log("attack bow"); | |
| // console.log("attack bomb");`, | |
| language: "javascript", | |
| theme: "vs-light", | |
| automaticLayout: true | |
| }); | |
| }); | |
| // --- Matter.js Game Setup --- | |
| const Engine = Matter.Engine, | |
| Render = Matter.Render, | |
| World = Matter.World, | |
| Bodies = Matter.Bodies, | |
| Body = Matter.Body; | |
| const engine = Engine.create(); | |
| const render = Render.create({ | |
| canvas: document.getElementById("gameCanvas"), | |
| engine: engine, | |
| options: { width: 600, height: 300, wireframes: false } | |
| }); | |
| // --- Create Game Bodies --- | |
| const ground = Bodies.rectangle(300, 290, 600, 20, { isStatic: true }); | |
| const hero = Bodies.rectangle(100, 250, 40, 40, { restitution: 0.5 }); | |
| // Weapons: | |
| const sword = Bodies.rectangle(140, 250, 30, 10, { isStatic: true, render: { visible: false } }); | |
| let arrows = []; | |
| let bombs = []; | |
| // Enemies: | |
| const enemies = [ | |
| Bodies.rectangle(400, 250, 40, 40, { isStatic: false }), | |
| Bodies.rectangle(550, 250, 40, 40, { isStatic: false }) | |
| ]; | |
| World.add(engine.world, [ground, hero, sword, ...enemies]); | |
| Engine.run(engine); | |
| Render.run(render); | |
| // --- Expose Key Variables for Advanced Access --- | |
| window.engine = engine; | |
| window.render = render; | |
| window.world = engine.world; | |
| window.hero = hero; | |
| window.sword = sword; | |
| window.enemies = enemies; | |
| // --- Task System: 50 Tasks --- | |
| const tasks = [ | |
| { id: 1, text: "Reach x = 200", condition: () => hero.position.x >= 200 }, | |
| { id: 2, text: "Defeat at least one enemy", condition: () => enemies.some(e => e.isRemoved) }, | |
| { id: 3, text: "Defeat all enemies", condition: () => enemies.every(e => e.isRemoved) }, | |
| { id: 4, text: "Jump above y = 180", condition: () => hero.position.y <= 180 }, | |
| { id: 5, text: "Reach x = 300", condition: () => hero.position.x >= 300 }, | |
| { id: 6, text: "Reach x = 400", condition: () => hero.position.x >= 400 }, | |
| { id: 7, text: "Reach x = 500", condition: () => hero.position.x >= 500 }, | |
| { id: 8, text: "Move with speed > 3", condition: () => Math.abs(hero.velocity.x) > 3 }, | |
| { id: 9, text: "Move left with speed > 3", condition: () => hero.velocity.x < -3 }, | |
| { id: 10, text: "Land with low y-velocity (< 2)", condition: () => Math.abs(hero.velocity.y) < 2 }, | |
| { id: 11, text: "Stay on ground (y > 240)", condition: () => hero.position.y > 240 }, | |
| { id: 12, text: "Achieve x = 150", condition: () => hero.position.x >= 150 }, | |
| { id: 13, text: "Achieve x = 250", condition: () => hero.position.x >= 250 }, | |
| { id: 14, text: "Achieve x = 350", condition: () => hero.position.x >= 350 }, | |
| { id: 15, text: "Achieve x = 450", condition: () => hero.position.x >= 450 }, | |
| { id: 16, text: "Perform a moderate jump (y between 240 and 260)", condition: () => hero.position.y >= 240 && hero.position.y <= 260 }, | |
| { id: 17, text: "Move 100 units from start", condition: () => hero.position.x - 100 >= 100 }, | |
| { id: 18, text: "Hero's x velocity is nearly 0", condition: () => Math.abs(hero.velocity.x) < 0.1 }, | |
| { id: 19, text: "Hero's y velocity is nearly 0", condition: () => Math.abs(hero.velocity.y) < 0.1 }, | |
| { id: 20, text: "Attack using sword to defeat an enemy", condition: () => enemies.some(e => e.isRemoved) }, | |
| { id: 21, text: "Attack using bow to defeat an enemy", condition: () => enemies.some(e => e.isRemoved) }, | |
| { id: 22, text: "Attack using bomb to defeat an enemy", condition: () => enemies.some(e => e.isRemoved) }, | |
| { id: 23, text: "Move and jump simultaneously", condition: () => hero.position.x >= 120 && hero.position.y <= 240 }, | |
| { id: 24, text: "Achieve a sprint speed (|velocity.x| >= 7)", condition: () => Math.abs(hero.velocity.x) >= 7 }, | |
| { id: 25, text: "Perform a duck action", condition: () => hero.render && hero.render.fillStyle === "blue" }, | |
| { id: 26, text: "Perform a dash move (|velocity.x| >= 5)", condition: () => Math.abs(hero.velocity.x) >= 5 }, | |
| { id: 27, text: "Change direction (velocity.x becomes negative)", condition: () => hero.velocity.x < 0 }, | |
| { id: 28, text: "Move upward quickly (velocity.y < -2)", condition: () => hero.velocity.y < -2 }, | |
| { id: 29, text: "Stay completely still", condition: () => Math.abs(hero.velocity.x) < 0.1 && Math.abs(hero.velocity.y) < 0.1 }, | |
| { id: 30, text: "Reach far right (x >= 550)", condition: () => hero.position.x >= 550 }, | |
| { id: 31, text: "Reach far left (x <= 50)", condition: () => hero.position.x <= 50 }, | |
| { id: 32, text: "Perform a combo attack (all enemies defeated)", condition: () => enemies.every(e => e.isRemoved) }, | |
| { id: 33, text: "Attack with bow and bomb consecutively", condition: () => enemies.every(e => e.isRemoved) }, | |
| { id: 34, text: "Show high energy (dummy condition)", condition: () => hero.position.x > 0 }, | |
| { id: 35, text: "Perform a precise jump (y < 230)", condition: () => hero.position.y < 230 }, | |
| { id: 36, text: "Land softly (|velocity.y| < 1)", condition: () => Math.abs(hero.velocity.y) < 1 }, | |
| { id: 37, text: "Achieve horizontal acceleration > 4", condition: () => Math.abs(hero.velocity.x) > 4 }, | |
| { id: 38, text: "Avoid enemy collision", condition: () => enemies.every(e => !Matter.Bounds.overlaps(hero.bounds, e.bounds)) }, | |
| { id: 39, text: "Come near an enemy (within 50 units) without attacking", condition: () => enemies.some(e => Math.abs(hero.position.x - e.position.x) < 50 && !e.isRemoved) }, | |
| { id: 40, text: "Reset near starting point (x < 120)", condition: () => hero.position.x < 120 }, | |
| { id: 41, text: "Jump height exceeds 30 units", condition: () => (250 - hero.position.y) >= 30 }, | |
| { id: 42, text: "Maintain steady movement (velocity.x ~ 3)", condition: () => Math.abs(hero.velocity.x - 3) < 1 }, | |
| { id: 43, text: "Attack then move (enemy defeated and x > 150)", condition: () => enemies.some(e => e.isRemoved) && hero.position.x > 150 }, | |
| { id: 44, text: "Keep speed constant (velocity.x ~ 3)", condition: () => Math.abs(hero.velocity.x - 3) < 0.5 }, | |
| { id: 45, text: "Show agility (jump and dash with |velocity.x| > 4)", condition: () => hero.position.y < 240 && Math.abs(hero.velocity.x) > 4 }, | |
| { id: 46, text: "Combo move achieves x >= 350", condition: () => hero.position.x >= 350 }, | |
| { id: 47, text: "Recover from an attack (x >= 100)", condition: () => hero.position.x >= 100 }, | |
| { id: 48, text: "Dodge enemy attack (no overlap with any enemy)", condition: () => enemies.every(e => !Matter.Bounds.overlaps(hero.bounds, e.bounds)) }, | |
| { id: 49, text: "Exhibit erratic movement (|velocity.x| > 5)", condition: () => Math.abs(hero.velocity.x) > 5 }, | |
| { id: 50, text: "Final Task: Overcome all challenges (x >= 550 and all enemies defeated)", condition: () => hero.position.x >= 550 && enemies.every(e => e.isRemoved) } | |
| ]; | |
| let currentTaskIndex = 0; | |
| function updateTaskText() { | |
| document.getElementById("taskText").innerText = tasks[currentTaskIndex].text; | |
| } | |
| updateTaskText(); | |
| // --- Enemy Movement (Simple AI) --- | |
| function moveEnemies() { | |
| enemies.forEach((enemy) => { | |
| if (enemy.isRemoved) return; | |
| const dx = hero.position.x - enemy.position.x; | |
| const speed = dx > 0 ? 1.5 : -1.5; | |
| Body.setVelocity(enemy, { x: speed, y: 0 }); | |
| }); | |
| } | |
| setInterval(moveEnemies, 100); | |
| // --- Command Parser (No debug console output) --- | |
| function handleGameAction(command) { | |
| const parts = command.split(" "); | |
| const action = parts[0]; | |
| const param = parts[1]; | |
| const value = parseFloat(parts[1]); | |
| if (action === "move" && !isNaN(value)) { | |
| Body.setVelocity(hero, { x: value, y: hero.velocity.y }); | |
| } else if (action === "jump" && !isNaN(value)) { | |
| Body.applyForce(hero, hero.position, { x: 0, y: -value }); | |
| } else if (action === "attack") { | |
| if (param === "sword") performSwordAttack(); | |
| if (param === "bow") fireArrow(); | |
| if (param === "bomb") throwBomb(); | |
| } | |
| } | |
| function performSwordAttack() { | |
| Body.setPosition(sword, { x: hero.position.x + 30, y: hero.position.y }); | |
| sword.render.visible = true; | |
| enemies.forEach((enemy) => { | |
| if (!enemy.isRemoved && Matter.Bounds.overlaps(sword.bounds, enemy.bounds)) { | |
| World.remove(engine.world, enemy); | |
| enemy.isRemoved = true; | |
| } | |
| }); | |
| setTimeout(() => { sword.render.visible = false; }, 500); | |
| } | |
| function fireArrow() { | |
| const arrow = Bodies.rectangle(hero.position.x + 20, hero.position.y, 20, 5, { restitution: 0.2 }); | |
| Body.setVelocity(arrow, { x: 5, y: 0 }); | |
| arrows.push(arrow); | |
| World.add(engine.world, arrow); | |
| setTimeout(() => { World.remove(engine.world, arrow); }, 3000); | |
| } | |
| function throwBomb() { | |
| const bomb = Bodies.circle(hero.position.x, hero.position.y - 10, 10, { restitution: 0.5 }); | |
| Body.setVelocity(bomb, { x: 3, y: -3 }); | |
| bombs.push(bomb); | |
| World.add(engine.world, bomb); | |
| setTimeout(() => { | |
| bombs = bombs.filter(b => b !== bomb); | |
| World.remove(engine.world, bomb); | |
| enemies.forEach((enemy) => { | |
| if (!enemy.isRemoved && Matter.Bounds.overlaps(bomb.bounds, enemy.bounds)) { | |
| World.remove(engine.world, enemy); | |
| enemy.isRemoved = true; | |
| } | |
| }); | |
| }, 2000); | |
| } | |
| // --- Check Task Completion --- | |
| function checkTaskCompletion() { | |
| if (tasks[currentTaskIndex].condition()) { | |
| alert(`✅ Task Completed: ${tasks[currentTaskIndex].text}`); | |
| currentTaskIndex++; | |
| if (currentTaskIndex < tasks.length) { | |
| updateTaskText(); | |
| resetHeroPosition(); | |
| } else { | |
| alert("🎉 All Tasks Completed!"); | |
| } | |
| } | |
| } | |
| // --- Run Code Button Event --- | |
| document.getElementById("runBtn").addEventListener("click", () => { | |
| // Retrieve user code from Monaco Editor | |
| const userCode = monacoEditor.getValue(); | |
| try { | |
| // Override console.log temporarily to capture commands (without on-screen debug) | |
| const oldConsoleLog = console.log; | |
| console.log = function(msg) { | |
| handleGameAction(msg); | |
| }; | |
| new Function(userCode)(); | |
| console.log = oldConsoleLog; | |
| setTimeout(checkTaskCompletion, 1000); | |
| } catch (error) { | |
| alert("Error: " + error.message); | |
| } | |
| }); | |
| function resetHeroPosition() { | |
| Body.setPosition(hero, { x: 100, y: 250 }); | |
| Body.setVelocity(hero, { x: 0, y: 0 }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |