Spaces:

Ramesh-vani
/

code-game

Running

App Files Files Community

Ramesh-vani commited on Feb 27, 2025

Commit

3154d99

verified ·

1 Parent(s): 5faa8a4

Update index.html

Browse files

Files changed (1) hide show

index.html +181 -443

index.html CHANGED Viewed

@@ -3,117 +3,91 @@
 <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 ---
@@ -121,440 +95,204 @@ function update() {
           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>

 <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 ---
           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>