Spaces:

Ramesh-vani
/

code-game

Running

App Files Files Community

Ramesh-vani commited on Feb 27

Commit

34d9b9c

verified ·

1 Parent(s): 3154d99

Update index.html

Browse files

Files changed (1) hide show

index.html +443 -181

index.html CHANGED Viewed

@@ -3,91 +3,117 @@
 <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 &gt; 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 ---
@@ -95,204 +121,440 @@ console.log("jump 0.05");
           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>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>JS Coding Game - Ultra Advanced Template</title>
+  <!-- CodeMirror CSS & JS -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.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; padding: 10px; }
+    #editor { width: 100%; height: 200px; }
+    #runBtn, #stopBtn { padding: 8px 15px; margin-top: 5px; margin-right: 5px; cursor: pointer; }
+    #output { background: black; color: lime; padding: 10px; height: 100px; overflow-y: auto; font-family: monospace; }
+    #gameCanvas { border: 1px solid black; background: lightblue; display: block; margin-top: 10px; }
+    #guide { background: #f4f4f4; border: 1px solid #ccc; padding: 10px; margin-bottom: 15px; }
+    #status { margin-top: 10px; font-family: monospace; }
+    h3, h4 { margin: 5px 0; }
+    .cooldown { color: gray; }
   </style>
 </head>
 <body>
+  <!-- How To Play Guide -->
+  <div id="guide">
+    <h3>How to Play</h3>
+    <p>
+      Write JavaScript in the editor to control the hero in a dynamic world. Define an <code>update()</code> function that runs every 100ms when you click "Run Code." Use "Stop" to pause.
+    </p>
+    <h4>Commands (with Cooldowns)</h4>
+    <ul>
+      <li><code>console.log("move 5");</code> – Sets x-velocity (no cooldown).</li>
+      <li><code>console.log("jump 0.05");</code> – Jumping force (0.5s cooldown).</li>
+      <li><code>console.log("attack sword");</code> – Sword attack (1s cooldown).</li>
+      <li><code>console.log("attack bow");</code> – Fires arrow (2s cooldown).</li>
+      <li><code>console.log("attack bomb");</code> – Throws bomb (3s cooldown).</li>
+      <li><code>console.log("heal 20");</code> – Heals hero (5s cooldown, requires potion).</li>
+    </ul>
+    <h4>Advanced Features</h4>
+    <p>Create continuous logic:</p>
+    <pre style="background:#eee; padding:10px;">
+function update() {
+  if (hero.position.x < portal.position.x) console.log("move 5");
+  if (enemies.length > 0 && hero.inventory.potions > 0 && hero.health < 50) console.log("heal 20");
+}
+    </pre>
+    <p>Key variables:</p>
+    <ul>
+      <li><code>hero</code> – Hero body (<code>.health</code>, <code>.inventory</code>, <code>.abilities</code>).</li>
+      <li><code>enemies</code> – Array of enemies (incl. boss).</li>
+      <li><code>items</code> – Array of collectibles.</li>
+      <li><code>portal</code> – Exit portal body.</li>
+      <li><code>obstacles</code> – Array of hazards.</li>
+      <li><code>engine</code>, <code>world</code> – Matter.js instances.</li>
+    </ul>
   </div>
+  <!-- Task Display -->
+  <h4>Task: <span id="taskText"></span></h4>
+  <!-- Game Status -->
+  <div id="status">
+    <p>Health: <span id="health">100</span> | Score: <span id="score">0</span> | Potions: <span id="potions">0</span></p>
+    <p>Cooldowns: Jump: <span id="cdJump">Ready</span> | Sword: <span id="cdSword">Ready</span> | Bow: <span id="cdBow">Ready</span> | Bomb: <span id="cdBomb">Ready</span> | Heal: <span id="cdHeal">Ready</span></p>
+  </div>
+  <!-- Code Editor -->
+  <textarea id="editor">
+// Continuous game logic to clear first level (Collect a potion)
+function update() {
+  // Target the first potion at x=200
+  const targetX = 200;
+  // Move toward the potion
+  if (hero.position.x < targetX - 10) {
+    console.log("move 5");
+  } else if (hero.position.x > targetX + 10) {
+    console.log("move -5");
+  } else {
+    console.log("move 0"); // Stop near the potion
+  }
+  // Jump over obstacles if close
+  obstacles.forEach(obstacle => {
+    const distanceX = Math.abs(hero.position.x - obstacle.position.x);
+    const distanceY = hero.position.y - obstacle.position.y;
+    if (distanceX < 50 && distanceY > 0) {
+      console.log("jump 0.05");
+    }
+  });
+  // Stop once potion is collected
+  if (hero.inventory.potions > 0) {
+    console.log("move 0");
+  }
+}
+  </textarea>
+  <br>
+  <button id="runBtn">Run Code</button>
+  <button id="stopBtn">Stop</button>
+  <!-- Console Output -->
+  <h4>Output:</h4>
+  <div id="output"></div>
+  <!-- Game Canvas -->
+  <canvas id="gameCanvas"></canvas>
   <script>
+    // --- Setup CodeMirror Editor ---
+    const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
+      mode: "javascript",
+      lineNumbers: true
     });
     // --- Matter.js Game Setup ---
           Render = Matter.Render,
           World = Matter.World,
           Bodies = Matter.Bodies,
+          Body = Matter.Body,
+          Events = Matter.Events;
     const engine = Engine.create();
     const render = Render.create({
       canvas: document.getElementById("gameCanvas"),
       engine: engine,
+      options: { width: 800, height: 400, wireframes: false, background: '#87CEEB' }
+    });
+    // Collision Categories
+    const categoryHero = 0x0001;
+    const categoryEnemy = 0x0002;
+    const categoryProjectile = 0x0004;
+    const categoryWeapon = 0x0008;
+    const categoryItem = 0x0010;
+    const categoryStatic = 0x0020;
+    const categoryHazard = 0x0040;
+    // --- Procedural Level Generation ---
+    const ground = Bodies.rectangle(400, 390, 800, 20, {
+      isStatic: true,
+      render: { fillStyle: 'brown' },
+      collisionFilter: { category: categoryStatic }
+    });
+    const obstacles = [];
+    for (let i = 0; i < 5; i++) {
+      const x = 150 + i * 150;
+      const y = 350 - Math.random() * 100;
+      obstacles.push(Bodies.rectangle(x, y, 50, 20, {
+        isStatic: true,
+        render: { fillStyle: 'gray' },
+        collisionFilter: { category: categoryHazard, mask: categoryHero | categoryEnemy }
+      }));
+    }
+    const hero = Bodies.rectangle(50, 350, 40, 40, {
+      restitution: 0.5,
+      render: { fillStyle: 'blue' },
+      collisionFilter: { category: categoryHero, mask: 0xFFFF }
+    });
+    hero.health = 100;
+    hero.inventory = { potions: 0 };
+    hero.abilities = {
+      jump: { cooldown: 500, lastUsed: 0 },
+      sword: { cooldown: 1000, lastUsed: 0 },
+      bow: { cooldown: 2000, lastUsed: 0 },
+      bomb: { cooldown: 3000, lastUsed: 0 },
+      heal: { cooldown: 5000, lastUsed: 0 }
+    };
+    const sword = Bodies.rectangle(90, 350, 30, 10, {
+      isStatic: true,
+      render: { visible: false, fillStyle: 'silver' },
+      collisionFilter: { category: categoryWeapon }
     });
     let arrows = [];
     let bombs = [];
+    let enemyProjectiles = [];
     const enemies = [
+      Bodies.rectangle(300, 350, 40, 40, {
+        render: { fillStyle: 'red' },
+        collisionFilter: { category: categoryEnemy }
+      }),
+      Bodies.rectangle(450, 350, 40, 40, {
+        render: { fillStyle: 'red' },
+        collisionFilter: { category: categoryEnemy }
+      }),
+      Bodies.rectangle(700, 350, 60, 60, {
+        render: { fillStyle: 'purple' },
+        collisionFilter: { category: categoryEnemy },
+        isBoss: true, health: 50
+      })
     ];
+    enemies.forEach(e => e.isEnemy = true);
+    const items = [
+      Bodies.circle(200, 300, 10, {
+        isStatic: true,
+        render: { fillStyle: 'green' },
+        collisionFilter: { category: categoryItem },
+        isPotion: true
+      }),
+      Bodies.circle(500, 300, 10, {
+        isStatic: true,
+        render: { fillStyle: 'green' },
+        collisionFilter: { category: categoryItem },
+        isPotion: true
+      })
+    ];
+    const portal = Bodies.rectangle(750, 350, 40, 40, {
+      isStatic: true,
+      render: { fillStyle: 'cyan' },
+      collisionFilter: { category: categoryStatic },
+      isPortal: true
+    });
+    let score = 0;
+    World.add(engine.world, [ground, ...obstacles, hero, sword, ...enemies, ...items, portal]);
     Engine.run(engine);
     Render.run(render);
+    // --- Expose Variables Globally ---
     window.engine = engine;
     window.world = engine.world;
     window.hero = hero;
     window.enemies = enemies;
+    window.items = items;
+    window.obstacles = obstacles;
+    window.portal = portal;
+    window.sword = sword;
+    // --- Task System ---
     const tasks = [
+      { id: 1, text: "Collect a potion", condition: () => hero.inventory.potions > 0 },
+      { id: 2, text: "Defeat 2 regular enemies", condition: () => enemies.filter(e => !e.isBoss && e.isRemoved).length >= 2 },
+      { id: 3, text: "Defeat the boss (purple enemy)", condition: () => enemies.filter(e => e.isBoss)[0].isRemoved },
+      { id: 4, text: "Reach the portal with all enemies defeated", condition: () => enemies.every(e => e.isRemoved) && Matter.Bounds.overlaps(hero.bounds, portal.bounds) }
     ];
     let currentTaskIndex = 0;
     function updateTaskText() {
       document.getElementById("taskText").innerText = tasks[currentTaskIndex].text;
     }
     updateTaskText();
+    // --- Advanced Enemy AI ---
     function moveEnemies() {
+      enemies.forEach(enemy => {
         if (enemy.isRemoved) return;
         const dx = hero.position.x - enemy.position.x;
+        const speed = enemy.isBoss ? 2 : 1.5;
+        Body.setVelocity(enemy, { x: dx > 0 ? speed : -speed, y: enemy.velocity.y });
+        if (Math.random() < (enemy.isBoss ? 0.02 : 0.01)) Body.applyForce(enemy, enemy.position, { x: 0, y: -0.05 });
+        if (Math.random() < (enemy.isBoss ? 0.02 : 0.005)) enemyFireProjectile(enemy);
       });
     }
     setInterval(moveEnemies, 100);
+    function enemyFireProjectile(enemy) {
+      const projectile = Bodies.circle(enemy.position.x, enemy.position.y, enemy.isBoss ? 10 : 5, {
+        restitution: 0.2,
+        render: { fillStyle: enemy.isBoss ? 'magenta' : 'orange' },
+        collisionFilter: { category: categoryProjectile },
+        isProjectile: true,
+        damage: enemy.isBoss ? 20 : 10
+      });
+      const dx = hero.position.x - enemy.position.x;
+      const dy = hero.position.y - enemy.position.y;
+      const angle = Math.atan2(dy, dx);
+      Body.setVelocity(projectile, { x: 5 * Math.cos(angle), y: 5 * Math.sin(angle) });
+      enemyProjectiles.push(projectile);
+      World.add(engine.world, projectile);
+      setTimeout(() => {
+        enemyProjectiles = enemyProjectiles.filter(p => p !== projectile);
+        World.remove(engine.world, projectile);
+      }, 3000);
+    }
+    // --- Command Handlers with Cooldowns ---
+    function customConsoleLog(...args) {
+      const outputDiv = document.getElementById("output");
+      outputDiv.innerHTML += args.join(" ") + "<br>";
+      handleGameAction(args.join(" "));
+    }
     function handleGameAction(command) {
       const parts = command.split(" ");
       const action = parts[0];
       const param = parts[1];
       const value = parseFloat(parts[1]);
+      const now = Date.now();
+      function isCooldownReady(ability) {
+        return now - hero.abilities[ability].lastUsed >= hero.abilities[ability].cooldown;
+      }
+      function updateCooldownDisplay(ability, ready) {
+        document.getElementById(`cd${ability.charAt(0).toUpperCase() + ability.slice(1)}`).innerText = ready ? "Ready" : `${((hero.abilities[ability].lastUsed + hero.abilities[ability].cooldown - now) / 1000).toFixed(1)}s`;
+      }
       if (action === "move" && !isNaN(value)) {
         Body.setVelocity(hero, { x: value, y: hero.velocity.y });
+      } else if (action === "jump" && !isNaN(value) && isCooldownReady("jump")) {
         Body.applyForce(hero, hero.position, { x: 0, y: -value });
+        hero.abilities.jump.lastUsed = now;
+        updateCooldownDisplay("jump", false);
       } else if (action === "attack") {
+        if (param === "sword" && isCooldownReady("sword")) {
+          performSwordAttack();
+          hero.abilities.sword.lastUsed = now;
+          updateCooldownDisplay("sword", false);
+        } else if (param === "bow" && isCooldownReady("bow")) {
+          fireArrow();
+          hero.abilities.bow.lastUsed = now;
+          updateCooldownDisplay("bow", false);
+        } else if (param === "bomb" && isCooldownReady("bomb")) {
+          throwBomb();
+          hero.abilities.bomb.lastUsed = now;
+          updateCooldownDisplay("bomb", false);
+        }
+      } else if (action === "heal" && !isNaN(value) && isCooldownReady("heal") && hero.inventory.potions > 0) {
+        hero.health = Math.min(100, hero.health + value);
+        hero.inventory.potions--;
+        hero.abilities.heal.lastUsed = now;
+        document.getElementById("health").innerText = hero.health;
+        document.getElementById("potions").innerText = hero.inventory.potions;
+        updateCooldownDisplay("heal", false);
       }
     }
     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)) {
+          if (enemy.isBoss) {
+            enemy.health -= 10;
+            if (enemy.health <= 0) {
+              World.remove(engine.world, enemy);
+              enemy.isRemoved = true;
+              score += 50;
+            }
+          } else {
+            World.remove(engine.world, enemy);
+            enemy.isRemoved = true;
+            score += 10;
+          }
+          document.getElementById("score").innerText = score;
         }
       });
+      setTimeout(() => sword.render.visible = false, 500);
     }
     function fireArrow() {
+      const arrow = Bodies.rectangle(hero.position.x + 20, hero.position.y, 20, 5, {
+        restitution: 0.2,
+        render: { fillStyle: 'yellow' },
+        collisionFilter: { category: categoryWeapon },
+        isArrow: true
+      });
       Body.setVelocity(arrow, { x: 5, y: 0 });
       arrows.push(arrow);
       World.add(engine.world, arrow);
+      setTimeout(() => {
+        arrows = arrows.filter(a => a !== arrow);
+        World.remove(engine.world, arrow);
+      }, 3000);
     }
     function throwBomb() {
+      const bomb = Bodies.circle(hero.position.x, hero.position.y - 10, 10, {
+        restitution: 0.5,
+        render: { fillStyle: 'black' },
+        collisionFilter: { category: categoryWeapon }
+      });
       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)) {
+            if (enemy.isBoss) {
+              enemy.health -= 20;
+              if (enemy.health <= 0) {
+                World.remove(engine.world, enemy);
+                enemy.isRemoved = true;
+                score += 50;
+              }
+            } else {
+              World.remove(engine.world, enemy);
+              enemy.isRemoved = true;
+              score += 10;
+            }
+            document.getElementById("score").innerText = score;
           }
         });
       }, 2000);
     }
+    // --- Collision Handling ---
+    Events.on(engine, 'collisionStart', function(event) {
+      const pairs = event.pairs;
+      pairs.forEach(pair => {
+        const bodyA = pair.bodyA;
+        const bodyB = pair.bodyB;
+        // Hero vs Enemy
+        if ((bodyA === hero && bodyB.isEnemy) || (bodyB === hero && bodyA.isEnemy)) {
+          hero.health -= bodyA.isBoss || bodyB.isBoss ? 30 : 20;
+          checkHeroHealth();
+        }
+        // Hero vs Enemy Projectile
+        if ((bodyA === hero && bodyB.isProjectile) || (bodyB === hero && bodyA.isProjectile)) {
+          const projectile = bodyA.isProjectile ? bodyA : bodyB;
+          hero.health -= projectile.damage;
+          World.remove(engine.world, projectile);
+          enemyProjectiles = enemyProjectiles.filter(p => p !== projectile);
+          checkHeroHealth();
+        }
+        // Enemy vs Hero Weapon
+        if ((bodyA.isArrow && bodyB.isEnemy) || (bodyB.isArrow && bodyA.isEnemy)) {
+          const arrow = bodyA.isArrow ? bodyA : bodyB;
+          const enemy = bodyA.isEnemy ? bodyA : bodyB;
+          if (enemy.isBoss) {
+            enemy.health -= 5;
+            if (enemy.health <= 0) {
+              World.remove(engine.world, enemy);
+              enemy.isRemoved = true;
+              score += 50;
+            }
+          } else {
+            World.remove(engine.world, enemy);
+            enemy.isRemoved = true;
+            score += 10;
+          }
+          World.remove(engine.world, arrow);
+          arrows = arrows.filter(a => a !== arrow);
+          document.getElementById("score").innerText = score;
+        }
+        // Hero vs Item
+        if ((bodyA === hero && bodyB.isPotion) || (bodyB === hero && bodyA.isPotion)) {
+          const potion = bodyA === hero ? bodyB : bodyA;
+          hero.inventory.potions++;
+          World.remove(engine.world, potion);
+          items.splice(items.indexOf(potion), 1);
+          document.getElementById("potions").innerText = hero.inventory.potions;
+        }
+        // Hero vs Obstacle (Hazard)
+        if ((bodyA === hero && bodyB.collisionFilter.category === categoryHazard) || (bodyB === hero && bodyA.collisionFilter.category === categoryHazard)) {
+          hero.health -= 5;
+          checkHeroHealth();
+        }
+      });
+    });
+    function checkHeroHealth() {
+      document.getElementById("health").innerText = hero.health;
+      if (hero.health <= 0) {
+        alert("Game Over! Hero defeated.");
+        resetGame();
+      }
+    }
+    // --- Game Logic ---
     function checkTaskCompletion() {
       if (tasks[currentTaskIndex].condition()) {
         alert(`✅ Task Completed: ${tasks[currentTaskIndex].text}`);
         currentTaskIndex++;
         if (currentTaskIndex < tasks.length) {
           updateTaskText();
+          resetGame(false);
         } else {
+          alert("🎉 Victory! You’ve conquered the level!");
         }
       }
     }
+    function resetGame(fullReset = true) {
+      hero.health = 100;
+      Body.setPosition(hero, { x: 50, y: 350 });
+      Body.setVelocity(hero, { x: 0, y: 0 });
+      document.getElementById("health").innerText = hero.health;
+      if (fullReset) {
+        hero.inventory.potions = 0;
+        score = 0;
+        document.getElementById("score").innerText = score;
+        document.getElementById("potions").innerText = hero.inventory.potions;
+        enemies.forEach(e => e.isRemoved && World.remove(engine.world, e));
+        enemies.length = 0;
+        enemies.push(...[
+          Bodies.rectangle(300, 350, 40, 40, { render: { fillStyle: 'red' }, collisionFilter: { category: categoryEnemy } }),
+          Bodies.rectangle(450, 350, 40, 40, { render: { fillStyle: 'red' }, collisionFilter: { category: categoryEnemy } }),
+          Bodies.rectangle(700, 350, 60, 60, { render: { fillStyle: 'purple' }, collisionFilter: { category: categoryEnemy }, isBoss: true, health: 50 })
+        ]);
+        enemies.forEach(e => e.isEnemy = true);
+        World.add(engine.world, enemies);
+        items.length = 0;
+        items.push(...[
+          Bodies.circle(200, 300, 10, { isStatic: true, render: { fillStyle: 'green' }, collisionFilter: { category: categoryItem }, isPotion: true }),
+          Bodies.circle(500, 300, 10, { isStatic: true, render: { fillStyle: 'green' }, collisionFilter: { category: categoryItem }, isPotion: true })
+        ]);
+        World.add(engine.world, items);
+        currentTaskIndex = 0;
+        updateTaskText();
+      }
+    }
+    // --- Continuous Code Execution ---
+    let updateInterval;
     document.getElementById("runBtn").addEventListener("click", () => {
+      if (updateInterval) clearInterval(updateInterval);
+      document.getElementById("output").innerHTML = "";
+      const userCode = editor.getValue();
       try {
         const oldConsoleLog = console.log;
+        console.log = customConsoleLog;
+        const userFunction = new Function(userCode + '; return update;');
+        const updateFn = userFunction();
+        if (typeof updateFn === 'function') {
+          updateInterval = setInterval(() => {
+            try {
+              updateFn();
+              checkTaskCompletion();
+              const now = Date.now();
+              ['jump', 'sword', 'bow', 'bomb', 'heal'].forEach(ability => {
+                if (now - hero.abilities[ability].lastUsed >= hero.abilities[ability].cooldown) {
+                  document.getElementById(`cd${ability.charAt(0).toUpperCase() + ability.slice(1)}`).innerText = "Ready";
+                }
+              });
+            } catch (error) {
+              document.getElementById("output").innerHTML += 'Error in update: ' + error.message + '<br>';
+            }
+          }, 100);
+        }
         console.log = oldConsoleLog;
       } catch (error) {
+        document.getElementById("output").innerHTML = "Error: " + error.message;
       }
     });
+    document.getElementById("stopBtn").addEventListener("click", () => {
+      if (updateInterval) clearInterval(updateInterval);
+    });
   </script>
 </body>
+</html>