493 Academy

CHAT

TREE

can you make a game where you are guy and you cant hit the xs but you hit the os

BUDDY

Yes! I made you a game where your little guy runs, jumps, and needs to smash the Os while dodging the Xs. Use arrow keys or A/D to move, and space to jump. Try it and tell me what to add next, like more lives or a score board upgrade!

TREE

it should follow your mous

BUDDY

Good idea! Now your guy follows your mouse left and right instead of the arrow keys. Move your mouse over the game box and watch him zoom to it! Want me to also add jumping with a mouse click?

TREE

no jump but you can go up and if you mis a o loos a life and more livs like 40

BUDDY

Awesome idea! Now your guy can move up, down, left, and right by following your mouse (no more jumping needed), you start with 40 lives, and missing an O costs a life too. Try it out — want me to add a "level up" message when your score gets really high?

TREE

biger space where you get and different levles

BUDDY

You got it! I made the game area much bigger so you have way more room to move, and now the game gets harder in real "levels" — every time you hit a score milestone, you level up, things fall faster, and you'll see a fun "LEVEL UP!" message pop up. Want me to add cool colors or backgrounds that change with each level next?

TREE

the os should be moreim lines with x around

BUDDY

Fun idea! Now the Os come in wavy line patterns with Xs scattered around them, so you have to swoop through carefully to smash the Os and dodge the Xs in each group. Want me to make each level spawn a different shaped pattern, like circles or zig-zags?

TREE

yes

BUDDY

Yes! Now each level has its own special pattern of Os: straight wavy lines, circles, and zig-zags, and they change as you level up! See if you can spot the different shapes. Want me to add a fun sound or color flash when you level up next?

TREE

more in line and once you finish one levle you cango to the next

BUDDY

Great idea! Now each level is its own stage - you finish one pattern set (a batch of Os in a line) before the next level's shapes start appearing, and the line patterns have more Os in a row to smash through. Want me to add a little "Level Complete!" banner between levels?

TREE

and more in a line

BUDDY

You got it! I made the lines even longer with more Os to smash through in a row. Try it out! Want me to add a "Level Complete!" banner that pops up right before the next level starts?

TREE

to fast and withthe more lines and vacum powerups thet fall

BUDDY

Great ideas! I made things slower and easier to control, put in even longer O lines, and added a super cool Vacuum power-up that sometimes falls down - grab it and it will suck in all nearby Os for a few seconds! Try grabbing the purple vacuum icon. Want me to add a countdown timer showing how long the vacuum power lasts?

TREE

to fast

BUDDY

Okay, I slowed everything way down! The items fall slower, speed builds up much more gently, and levels take longer to get fast. Try it now - much easier to control. Want me to slow the mouse-follow speed too so your guy feels smoother?

TREE

they should be in virdicul lines

BUDDY

Got it! Now the Os fall in straight vertical lines (stacked up and down) with some Xs mixed in nearby, instead of side-to-side waves. Try dodging and smashing through the columns! Want me to make some columns move side to side as they fall for extra challenge?

TREE

in one line

BUDDY

Now every level makes just ONE straight vertical line of Os (with a few Xs mixed in) instead of switching between shapes. Simple and clean! Want me to bring back the circle and zig-zag levels later as a fun surprise mode?

TREE

les circuls one line

BUDDY

Got it! Now every level is just one single straight line of Os with Xs mixed in - no more circles or zig-zags. Nice and simple to dodge and smash! Want me to make the line spawn in a totally random spot each time for extra fun?

TREE

to messy

BUDDY

Cleaned it up! Now only about half the Os have an X near them (instead of almost every one), so the line looks much neater and less crowded. Want me to make the X's spacing bigger too so there's even more room to dodge?

CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dodge the Xs</title>
<style>
  body {
    margin: 0;
    background: linear-gradient(to bottom, #87CEEB, #b3e0ff);
    font-family: 'Comic Sans MS', sans-serif;
    overflow: hidden;
    text-align: center;
  }
  #gameArea {
    position: relative;
    width: 1000px;
    height: 650px;
    margin: 20px auto;
    background: #dff6ff;
    border: 6px solid #4a90d9;
    border-radius: 16px;
    overflow: hidden;
  }
  #player {
    position: absolute;
    bottom: 10px;
    left: 50px;
    width: 40px;
    height: 60px;
    font-size: 40px;
    line-height: 60px;
    user-select: none;
  }
  .falling {
    position: absolute;
    top: -40px;
    font-size: 32px;
    font-weight: bold;
    user-select: none;
  }
  .o { color: #2ecc71; }
  .x { color: #e74c3c; }
  .v { color: #9b59b6; font-size: 34px; }
  h1 { color: #34495e; margin-bottom: 0; }
  #info {
    font-size: 20px;
    color: #34495e;
    margin: 8px;
  }
  #message {
    font-size: 26px;
    color: #e74c3c;
    font-weight: bold;
    height: 30px;
  }
  #levelMsg {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: bold;
    color: #f39c12;
    text-shadow: 2px 2px 6px white;
    display: none;
    z-index: 10;
    user-select: none;
  }
  #restartBtn {
    display: none;
    font-size: 18px;
    padding: 8px 20px;
    border-radius: 10px;
    border: none;
    background: #4a90d9;
    color: white;
    cursor: pointer;
    margin-top: 6px;
  }
</style>
</head>
<body>

<h1>Dodge the Xs, Smash the Os!</h1>
<div id="info">Score: <span id="score">0</span> &nbsp;&nbsp; Lives: <span id="lives">3</span></div>
<div id="message"></div>
<div id="gameArea">
  <div id="player">🧍</div>
  <div id="levelMsg">LEVEL UP!</div>
</div>
<button id="restartBtn" onclick="restartGame()">Play Again</button>

<script>
const gameArea = document.getElementById('gameArea');
const player = document.getElementById('player');
const scoreEl = document.getElementById('score');
const livesEl = document.getElementById('lives');
const messageEl = document.getElementById('message');
const restartBtn = document.getElementById('restartBtn');
const levelMsgEl = document.getElementById('levelMsg');

const areaWidth = 1000;
const areaHeight = 650;

let playerX = 50;
let playerY = 10; // bottom offset
let velocityY = 0;
let isJumping = false;
const gravity = 1.1;
const jumpPower = 18;
const moveSpeed = 7;
const speedMultiplier = 0.5;
let vacuumActive = false;
let vacuumTimer = 0;

let keys = {};
let score = 0;
let lives = 40;
let gameOver = false;
let fallItems = [];
let spawnTimer = 0;
let spawnInterval = 90;
let gameSpeed = 1;
let frame = 0;
let level = 1;
let nextLevelScore = 100;
let itemsSpawnedThisLevel = 0;
let itemsNeededThisLevel = 3;
let waitingForLevelClear = false;

let mouseTargetX = null;
let mouseTargetY = null;
gameArea.addEventListener('mousemove', (e) => {
  const rect = gameArea.getBoundingClientRect();
  mouseTargetX = e.clientX - rect.left - 20;
  mouseTargetY = areaHeight - (e.clientY - rect.top) - 30;
});

function spawnSingle(x, y, isX) {
  const item = document.createElement('div');
  item.className = 'falling ' + (isX ? 'x' : 'o');
  item.textContent = isX ? '✖' : '⭕';
  item.style.left = x + 'px';
  item.dataset.type = isX ? 'x' : 'o';
  item.dataset.y = y;
  item.style.top = y + 'px';
  gameArea.appendChild(item);
  fallItems.push(item);
}

function spawnVacuum() {
  const item = document.createElement('div');
  item.className = 'falling v';
  item.textContent = '🌀';
  const x = Math.random() * (areaWidth - 40);
  const y = -40;
  item.style.left = x + 'px';
  item.dataset.type = 'v';
  item.dataset.y = y;
  item.style.top = y + 'px';
  gameArea.appendChild(item);
  fallItems.push(item);
}

function spawnItem() {
  const count = 14 + Math.floor(Math.random() * 6); // 14-19 Os in a line
  const spacing = 44;

  // single vertical line
  const lineX = 20 + Math.random() * (areaWidth - 60);
  const startY = -40;
  for (let i = 0; i < count; i++) {
    const y = startY - i * spacing;
    spawnSingle(lineX, y, false);
    if (Math.random() < 0.25) {
      const xOffsetX = Math.max(0, Math.min(areaWidth - 40, lineX + (Math.random() < 0.5 ? -spacing * 1.5 : spacing * 1.5)));
      const xOffsetY = y - spacing / 2;
      spawnSingle(xOffsetX, xOffsetY, true);
    }
  }
}

function restartGame() {
  score = 0;
  lives = 3;
  gameOver = false;
  gameSpeed = 2;
  spawnInterval = 90;
  vacuumActive = false;
  vacuumTimer = 0;
  level = 1;
  nextLevelScore = 100;
  itemsSpawnedThisLevel = 0;
  itemsNeededThisLevel = 3;
  waitingForLevelClear = false;
  fallItems.forEach(i => i.remove());
  fallItems = [];
  scoreEl.textContent = score;
  livesEl.textContent = lives;
  lives = 40;
  livesEl.textContent = lives;
  messageEl.textContent = '';
  restartBtn.style.display = 'none';
  playerX = 50;
  playerY = 10;
  velocityY = 0;
  isJumping = false;
  requestAnimationFrame(gameLoop);
}

function checkCollision(px, py, pw, ph, ix, iy, iw, ih) {
  return px < ix + iw && px + pw > ix && py < iy + ih && py + ph > iy;
}

function gameLoop() {
  if (gameOver) return;
  frame++;

  // Move player toward mouse, both left/right and up/down
  if (mouseTargetX !== null) {
    const dx = mouseTargetX - playerX;
    playerX += dx * 0.2;
  }
  if (mouseTargetY !== null) {
    const dy = mouseTargetY - playerY;
    playerY += dy * 0.2;
  }
  playerX = Math.max(0, Math.min(areaWidth - 40, playerX));
  playerY = Math.max(10, Math.min(areaHeight - 60, playerY));

  player.style.left = playerX + 'px';
  player.style.bottom = playerY + 'px';

  // Spawn items
  spawnTimer++;
  if (spawnTimer >= spawnInterval && !waitingForLevelClear) {
    spawnTimer = 0;
    spawnItem();
    itemsSpawnedThisLevel++;
    if (itemsSpawnedThisLevel >= itemsNeededThisLevel) {
      waitingForLevelClear = true;
    }
  }
  if (frame % 500 === 0 && Math.random() < 0.7) {
    spawnVacuum();
  }
  if (vacuumActive) {
    vacuumTimer--;
    for (let i = fallItems.length - 1; i >= 0; i--) {
      const it = fallItems[i];
      if (it.dataset.type === 'o') {
        const ix = parseFloat(it.style.left);
        const iy = parseFloat(it.dataset.y);
        const dx = playerX - ix;
        const dyDist = (areaHeight - playerY - 30) - iy;
        const dist = Math.sqrt(dx*dx + dyDist*dyDist);
        if (dist < 250) {
          const newX = ix + dx * 0.15;
          const newY = iy + dyDist * 0.15;
          it.style.left = newX + 'px';
          it.dataset.y = newY;
          it.style.top = newY + 'px';
        }
      }
    }
    if (vacuumTimer <= 0) vacuumActive = false;
  }
  if (waitingForLevelClear && fallItems.length === 0) {
    waitingForLevelClear = false;
    itemsSpawnedThisLevel = 0;
    levelUp();
  }

  // Move items down
  const playerRect = {
    x: playerX,
    y: playerY,
    w: 40,
    h: 60
  };

  for (let i = fallItems.length - 1; i >= 0; i--) {
    const item = fallItems[i];
    let y = parseFloat(item.dataset.y);
    y += gameSpeed * speedMultiplier;
    item.dataset.y = y;
    item.style.top = y + 'px';

    const itemX = parseFloat(item.style.left);
    // item's y is from top, convert to bottom-based for collision with player (bottom based)
    const itemTopFromBottom = areaHeight - y - 32;

    const hit = checkCollision(
      playerRect.x, playerRect.y, playerRect.w, playerRect.h,
      itemX, itemTopFromBottom, 32, 32
    );

    if (hit) {
      if (item.dataset.type === 'o') {
        score += 10;
        scoreEl.textContent = score;
        gameSpeed += 0.01;
        if (score >= nextLevelScore) {
          levelUp();
        }
      } else if (item.dataset.type === 'v') {
        vacuumActive = true;
        vacuumTimer = 300;
      } else {
        lives -= 1;
        livesEl.textContent = lives;
        if (lives <= 0) {
          endGame();
        }
      }
      item.remove();
      fallItems.splice(i, 1);
      continue;
    }

    if (y > areaHeight) {
      if (item.dataset.type === 'o') {
        lives -= 1;
        livesEl.textContent = lives;
        if (lives <= 0) {
          endGame();
        }
      }
      item.remove();
      fallItems.splice(i, 1);
    }
  }

  if (spawnInterval > 25) spawnInterval -= 0.02;

  if (!gameOver) requestAnimationFrame(gameLoop);
}

function levelUp() {
  level += 1;
  nextLevelScore += 100;
  gameSpeed += 0.4;
  itemsNeededThisLevel += 1;
  if (spawnInterval > 30) spawnInterval -= 3;
  levelMsgEl.textContent = 'LEVEL ' + level + '!';
  levelMsgEl.style.display = 'block';
  setTimeout(() => { levelMsgEl.style.display = 'none'; }, 1200);
}

function endGame() {
  gameOver = true;
  messageEl.textContent = 'Game Over! Final Score: ' + score;
  restartBtn.style.display = 'inline-block';
}

requestAnimationFrame(gameLoop);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dodge the Xs</title>
<style>
  body {
    margin: 0;
    background: linear-gradient(to bottom, #87CEEB, #b3e0ff);
    font-family: 'Comic Sans MS', sans-serif;
    overflow: hidden;
    text-align: center;
  }
  #gameArea {
    position: relative;
    width: 1000px;
    height: 650px;
    margin: 20px auto;
    background: #dff6ff;
    border: 6px solid #4a90d9;
    border-radius: 16px;
    overflow: hidden;
  }
  #player {
    position: absolute;
    bottom: 10px;
    left: 50px;
    width: 40px;
    height: 60px;
    font-size: 40px;
    line-height: 60px;
    user-select: none;
  }
  .falling {
    position: absolute;
    top: -40px;
    font-size: 32px;
    font-weight: bold;
    user-select: none;
  }
  .o { color: #2ecc71; }
  .x { color: #e74c3c; }
  .v { color: #9b59b6; font-size: 34px; }
  h1 { color: #34495e; margin-bottom: 0; }
  #info {
    font-size: 20px;
    color: #34495e;
    margin: 8px;
  }
  #message {
    font-size: 26px;
    color: #e74c3c;
    font-weight: bold;
    height: 30px;
  }
  #levelMsg {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: bold;
    color: #f39c12;
    text-shadow: 2px 2px 6px white;
    display: none;
    z-index: 10;
    user-select: none;
  }
  #restartBtn {
    display: none;
    font-size: 18px;
    padding: 8px 20px;
    border-radius: 10px;
    border: none;
    background: #4a90d9;
    color: white;
    cursor: pointer;
    margin-top: 6px;
  }
</style>
</head>
<body>

<h1>Dodge the Xs, Smash the Os!</h1>
<div id="info">Score: <span id="score">0</span> &nbsp;&nbsp; Lives: <span id="lives">3</span></div>
<div id="message"></div>
<div id="gameArea">
  <div id="player">🧍</div>
  <div id="levelMsg">LEVEL UP!</div>
</div>
<button id="restartBtn" onclick="restartGame()">Play Again</button>

<script>
const gameArea = document.getElementById('gameArea');
const player = document.getElementById('player');
const scoreEl = document.getElementById('score');
const livesEl = document.getElementById('lives');
const messageEl = document.getElementById('message');
const restartBtn = document.getElementById('restartBtn');
const levelMsgEl = document.getElementById('levelMsg');

const areaWidth = 1000;
const areaHeight = 650;

let playerX = 50;
let playerY = 10; // bottom offset
let velocityY = 0;
let isJumping = false;
const gravity = 1.1;
const jumpPower = 18;
const moveSpeed = 7;
const speedMultiplier = 0.5;
let vacuumActive = false;
let vacuumTimer = 0;

let keys = {};
let score = 0;
let lives = 40;
let gameOver = false;
let fallItems = [];
let spawnTimer = 0;
let spawnInterval = 90;
let gameSpeed = 1;
let frame = 0;
let level = 1;
let nextLevelScore = 100;
let itemsSpawnedThisLevel = 0;
let itemsNeededThisLevel = 3;
let waitingForLevelClear = false;

let mouseTargetX = null;
let mouseTargetY = null;
gameArea.addEventListener('mousemove', (e) => {
  const rect = gameArea.getBoundingClientRect();
  mouseTargetX = e.clientX - rect.left - 20;
  mouseTargetY = areaHeight - (e.clientY - rect.top) - 30;
});

function spawnSingle(x, y, isX) {
  const item = document.createElement('div');
  item.className = 'falling ' + (isX ? 'x' : 'o');
  item.textContent = isX ? '✖' : '⭕';
  item.style.left = x + 'px';
  item.dataset.type = isX ? 'x' : 'o';
  item.dataset.y = y;
  item.style.top = y + 'px';
  gameArea.appendChild(item);
  fallItems.push(item);
}

function spawnVacuum() {
  const item = document.createElement('div');
  item.className = 'falling v';
  item.textContent = '🌀';
  const x = Math.random() * (areaWidth - 40);
  const y = -40;
  item.style.left = x + 'px';
  item.dataset.type = 'v';
  item.dataset.y = y;
  item.style.top = y + 'px';
  gameArea.appendChild(item);
  fallItems.push(item);
}

function spawnItem() {
  const count = 14 + Math.floor(Math.random() * 6); // 14-19 Os in a line
  const spacing = 44;

  // single vertical line
  const lineX = 20 + Math.random() * (areaWidth - 60);
  const startY = -40;
  for (let i = 0; i < count; i++) {
    const y = startY - i * spacing;
    spawnSingle(lineX, y, false);
    if (Math.random() < 0.25) {
      const xOffsetX = Math.max(0, Math.min(areaWidth - 40, lineX + (Math.random() < 0.5 ? -spacing * 1.5 : spacing * 1.5)));
      const xOffsetY = y - spacing / 2;
      spawnSingle(xOffsetX, xOffsetY, true);
    }
  }
}

function restartGame() {
  score = 0;
  lives = 3;
  gameOver = false;
  gameSpeed = 2;
  spawnInterval = 90;
  vacuumActive = false;
  vacuumTimer = 0;
  level = 1;
  nextLevelScore = 100;
  itemsSpawnedThisLevel = 0;
  itemsNeededThisLevel = 3;
  waitingForLevelClear = false;
  fallItems.forEach(i => i.remove());
  fallItems = [];
  scoreEl.textContent = score;
  livesEl.textContent = lives;
  lives = 40;
  livesEl.textContent = lives;
  messageEl.textContent = '';
  restartBtn.style.display = 'none';
  playerX = 50;
  playerY = 10;
  velocityY = 0;
  isJumping = false;
  requestAnimationFrame(gameLoop);
}

function checkCollision(px, py, pw, ph, ix, iy, iw, ih) {
  return px < ix + iw && px + pw > ix && py < iy + ih && py + ph > iy;
}

function gameLoop() {
  if (gameOver) return;
  frame++;

  // Move player toward mouse, both left/right and up/down
  if (mouseTargetX !== null) {
    const dx = mouseTargetX - playerX;
    playerX += dx * 0.2;
  }
  if (mouseTargetY !== null) {
    const dy = mouseTargetY - playerY;
    playerY += dy * 0.2;
  }
  playerX = Math.max(0, Math.min(areaWidth - 40, playerX));
  playerY = Math.max(10, Math.min(areaHeight - 60, playerY));

  player.style.left = playerX + 'px';
  player.style.bottom = playerY + 'px';

  // Spawn items
  spawnTimer++;
  if (spawnTimer >= spawnInterval && !waitingForLevelClear) {
    spawnTimer = 0;
    spawnItem();
    itemsSpawnedThisLevel++;
    if (itemsSpawnedThisLevel >= itemsNeededThisLevel) {
      waitingForLevelClear = true;
    }
  }
  if (frame % 500 === 0 && Math.random() < 0.7) {
    spawnVacuum();
  }
  if (vacuumActive) {
    vacuumTimer--;
    for (let i = fallItems.length - 1; i >= 0; i--) {
      const it = fallItems[i];
      if (it.dataset.type === 'o') {
        const ix = parseFloat(it.style.left);
        const iy = parseFloat(it.dataset.y);
        const dx = playerX - ix;
        const dyDist = (areaHeight - playerY - 30) - iy;
        const dist = Math.sqrt(dx*dx + dyDist*dyDist);
        if (dist < 250) {
          const newX = ix + dx * 0.15;
          const newY = iy + dyDist * 0.15;
          it.style.left = newX + 'px';
          it.dataset.y = newY;
          it.style.top = newY + 'px';
        }
      }
    }
    if (vacuumTimer <= 0) vacuumActive = false;
  }
  if (waitingForLevelClear && fallItems.length === 0) {
    waitingForLevelClear = false;
    itemsSpawnedThisLevel = 0;
    levelUp();
  }

  // Move items down
  const playerRect = {
    x: playerX,
    y: playerY,
    w: 40,
    h: 60
  };

  for (let i = fallItems.length - 1; i >= 0; i--) {
    const item = fallItems[i];
    let y = parseFloat(item.dataset.y);
    y += gameSpeed * speedMultiplier;
    item.dataset.y = y;
    item.style.top = y + 'px';

    const itemX = parseFloat(item.style.left);
    // item's y is from top, convert to bottom-based for collision with player (bottom based)
    const itemTopFromBottom = areaHeight - y - 32;

    const hit = checkCollision(
      playerRect.x, playerRect.y, playerRect.w, playerRect.h,
      itemX, itemTopFromBottom, 32, 32
    );

    if (hit) {
      if (item.dataset.type === 'o') {
        score += 10;
        scoreEl.textContent = score;
        gameSpeed += 0.01;
        if (score >= nextLevelScore) {
          levelUp();
        }
      } else if (item.dataset.type === 'v') {
        vacuumActive = true;
        vacuumTimer = 300;
      } else {
        lives -= 1;
        livesEl.textContent = lives;
        if (lives <= 0) {
          endGame();
        }
      }
      item.remove();
      fallItems.splice(i, 1);
      continue;
    }

    if (y > areaHeight) {
      if (item.dataset.type === 'o') {
        lives -= 1;
        livesEl.textContent = lives;
        if (lives <= 0) {
          endGame();
        }
      }
      item.remove();
      fallItems.splice(i, 1);
    }
  }

  if (spawnInterval > 25) spawnInterval -= 0.02;

  if (!gameOver) requestAnimationFrame(gameLoop);
}

function levelUp() {
  level += 1;
  nextLevelScore += 100;
  gameSpeed += 0.4;
  itemsNeededThisLevel += 1;
  if (spawnInterval > 30) spawnInterval -= 3;
  levelMsgEl.textContent = 'LEVEL ' + level + '!';
  levelMsgEl.style.display = 'block';
  setTimeout(() => { levelMsgEl.style.display = 'none'; }, 1200);
}

function endGame() {
  gameOver = true;
  messageEl.textContent = 'Game Over! Final Score: ' + score;
  restartBtn.style.display = 'inline-block';
}

requestAnimationFrame(gameLoop);
</script>

</body>
</html>

PREVIEW

PICTURES0/50

No pictures yet. Add one, then ask your buddy to put it in your app!