Spaces:

Ramesh-vani
/

code-game

Running

File size: 21,345 Bytes

<!DOCTYPE html>
<html lang="en">
<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 ---
    const Engine = Matter.Engine,
          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>