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