Spaces:

Ramesh-vani
/

code-game

Running

App Files Files Community

Ramesh-vani commited on Feb 27, 2025

Commit

5faa8a4

verified ·

1 Parent(s): 06e6aad

Update index.html

Browse files

Files changed (1) hide show

index.html +560 -19

index.html CHANGED Viewed

@@ -1,19 +1,560 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

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