493 Academy

CHAT

TREE

canyou make a game like escape road

BUDDY

Let's build your escape road game! I made a car dodging game — you steer your car left and right to dodge the other cars zooming at you, and you get points for every second you survive. Try it out and tell me what to add next!

TREE

you shold make it more zoomed out and not just left and right j

BUDDY

Good idea! I zoomed the view out so you can see more of the road, and now there are 5 lanes to dodge in instead of just 3 - way more room to move! Give it a try and let me know what else you'd like to change, like adding a picture for your car.

TREE

more like escapy rodes

BUDDY

Got it! I made it more like a real Escape Road game — now your car can move UP, DOWN, LEFT, and RIGHT freely on the road (not just lanes), you dodge enemy cars coming from all directions, and the road keeps scrolling forever. Try using arrow keys or the on-screen buttons to zoom around! What should we add next — maybe coins to collect, or a picture for your car?

TREE

and a hole envire ment

BUDDY

Ooh yes, let's make a bigger world! I added a fun outdoor environment around the road - grass on both sides with trees and little bushes scrolling by, plus a sky-blue background so it feels like you're really driving through the countryside. Give it a spin! Next, want me to add coins or fuel to collect, or maybe a picture for your car?

TREE

and a hole envire ment

BUDDY

Let's make the environment even bigger and cooler! I added mountains in the background, a sun in the sky, clouds floating by, and even more grass details so it really feels like a whole world around your road. Check it out! Next, want me to add coins to collect or a picture for your car?

TREE

no lik your driving in a city

BUDDY

Ooh, a city! I turned the countryside into a city scene — tall buildings with little windows on both sides of the road, a gray city sky, and no more mountains or trees. Now it feels like you're zooming through downtown! Want me to add coins to collect next, or a picture for your car?

TREE

a set envire ment and your diiving in it

BUDDY

Yes! I made the city into a real fixed environment — buildings, sun, and clouds now stay in their own spots and slide by smoothly as you drive through, like you're really zooming through one whole city instead of things popping around randomly. Give it a try! Next, want me to add coins to collect as you drive, or a picture for your car?

TREE

the same type of moving

BUDDY

Good call! I made the buildings, sun, and clouds move using the exact same style of smooth sliding as your lane lines and enemy cars, so everything scrolls together at matching speeds - it should feel much more like one connected world now. Try driving around and see how it feels! Next, want me to add coins to collect as you zoom through the city?

TREE

yas

BUDDY

Yay, coins time! I added shiny gold coins that pop up on the road — drive over them to collect points, and your score now shows both your coins and your survival score. Try grabbing as many as you can! Next, want me to add a special power-up, like a shield or speed boost?

TREE

a set envire ment and your diiving in it

BUDDY

I hear you — let's make the world feel even more like one solid place you're driving through instead of a scrolling background. I'm making the city stay perfectly locked in place as one connected environment, so it truly feels like a real place, not just moving pictures. Give it a try and tell me if it feels right now!

TREE

BUDDY

Oops, sorry that wasn't what you wanted! Can you tell me a bit more about what you mean by "a set environment and you're driving in it"? Like, do you want the city to look like a map you can see all of, or do you want buildings on the sides that stay put no matter how far you drive? Tell me more and I'll fix it up!

TREE

the same as in the game escape rode

BUDDY

Ok! In the real Escape Road game, you drive down an endless road with a city skyline on both sides that scrolls smoothly past forever - it never runs out or repeats in a choppy way. I already have buildings, sun and clouds sliding by at the same speed as the road lines, so it should feel just like that! Try driving for a while and see if it feels smooth and endless now. If something still feels off, tell me exactly what looks weird (like "the buildings jump" or "there's a gap") and I'll fix that exact part!

TREE

yes andthe same as in the game escape rode

BUDDY

Great, let's make it feel exactly like a smooth endless city! I fixed the building loop so they wrap around perfectly with no gaps or jumps, and made them a bit closer together so the city feels full and busy like in Escape Road. Try driving for a long time now - it should feel like one never-ending city! Want me to add a power-up like a shield next?

TREE

not just a rode

BUDDY

Got it — let's make it feel like a whole city, not just a road! I'm adding sidewalks next to the road with lamp posts, so you can see the road, sidewalks, AND buildings all together like a real street. Take a look!

CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Escape Road</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    background: #222;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
    touch-action: none;
  }
  #wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #game {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 100vh;
    background: linear-gradient(#8ba3b8, #cfd8dc 40%, #9e9e8a 40%, #9e9e8a 44%, #555 44%);
    overflow: hidden;
    border-left: 8px solid #ddd;
    border-right: 8px solid #ddd;
    box-sizing: border-box;
  }
  .lamp {
    position: absolute;
    width: 6px;
    height: 40px;
    background: #444;
  }
  .lamp::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -5px;
    width: 16px;
    height: 12px;
    background: #ffe066;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(255,224,102,0.8);
  }
  .building {
    position: absolute;
    background: #607080;
    border: 2px solid #3e4a55;
    box-sizing: border-box;
  }
  .building .window {
    position: absolute;
    width: 10px;
    height: 12px;
    background: #ffe066;
    opacity: 0.85;
  }
  .sun {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff3a0;
    box-shadow: 0 0 30px 10px rgba(255,243,160,0.6);
  }
  .cloud {
    position: absolute;
    width: 80px;
    height: 30px;
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
  }
  .cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
  }
  .cloud::before {
    width: 40px; height: 40px;
    top: -18px; left: 10px;
  }
  .cloud::after {
    width: 30px; height: 30px;
    top: -12px; left: 45px;
  }
  .laneLine {
    position: absolute;
    width: 6px;
    height: 40px;
    background: #fff;
  }
  .car {
    position: absolute;
    width: 44px;
    height: 74px;
    border-radius: 8px;
  }
  #player {
    background: #ffcc00;
    border: 3px solid #b38f00;
    z-index: 5;
  }
  .enemy {
    background: #ff3b3b;
    border: 3px solid #a00000;
  }
  .coin {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6c0, #ffd700 60%, #b8860b 100%);
    border: 2px solid #b8860b;
    box-shadow: 0 0 8px rgba(255,215,0,0.8);
    z-index: 4;
  }
  #score {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    z-index: 10;
  }
  #overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 20;
    font-size: 20px;
  }
  #overlay button {
    margin-top: 20px;
    padding: 14px 28px;
    font-size: 20px;
    border-radius: 10px;
    border: none;
    background: #ffcc00;
    cursor: pointer;
    font-weight: bold;
  }
  #controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 15;
    display: grid;
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 60px 60px 60px;
    gap: 6px;
  }
  #controls div {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    font-size: 30px;
    user-select: none;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
  }
  #upBtn { grid-column: 2; grid-row: 1; }
  #leftBtn { grid-column: 1; grid-row: 2; }
  #rightBtn { grid-column: 3; grid-row: 2; }
  #downBtn { grid-column: 2; grid-row: 3; }
</style>
</head>
<body>
<div id="wrap">
  <div id="game">
    <div id="score">Score: 0</div>
    <div id="player" class="car"></div>
    <div id="overlay">
      <div>🚗 Escape Road 🚗</div>
      <div>Use arrow keys or buttons to dodge every way!</div>
      <button id="startBtn">Start Game</button>
    </div>
    <div id="controls">
      <div id="upBtn">▲</div>
      <div id="leftBtn">◀</div>
      <div id="rightBtn">▶</div>
      <div id="downBtn">▼</div>
    </div>
  </div>
</div>

<script>
const game = document.getElementById('game');
const player = document.getElementById('player');
const scoreEl = document.getElementById('score');
const overlay = document.getElementById('overlay');
const startBtn = document.getElementById('startBtn');
const upBtn = document.getElementById('upBtn');
const downBtn = document.getElementById('downBtn');
const leftBtn = document.getElementById('leftBtn');
const rightBtn = document.getElementById('rightBtn');

let gameWidth, gameHeight;
let playerX, playerY;
const playerW = 44, playerH = 74;
const playerSpeed = 6;
let keys = {};
let running = false;
let score = 0;
let scoreTimer = 0;
let speed = 6;
let enemies = [];
let spawnTimer = 0;
let spawnInterval = 70;
let coins = [];
let coinTimer = 0;
let coinInterval = 55;
let coinCount = 0;
let frame = 0;
let lines = [];
let buildings = [];
let clouds = [];
let lamps = [];
let sunEl = null;
const roadTop = () => gameHeight * 0.4;

function resize() {
  gameWidth = game.clientWidth;
  gameHeight = game.clientHeight;
}
window.addEventListener('resize', resize);
resize();

let worldOffset = 0;
let worldW = 0;

function setupScenery() {
  buildings.forEach(m => m.el.remove());
  clouds.forEach(c => c.el.remove());
  lamps.forEach(l => l.el.remove());
  if (sunEl) sunEl.remove();
  buildings = [];
  clouds = [];
  lamps = [];
  worldOffset = 0;

  sunEl = document.createElement('div');
  sunEl.className = 'sun';
  game.appendChild(sunEl);

  const roadY = gameHeight * 0.4;
  const buildingCount = 22;
  worldW = buildingCount * 90;
  for (let i = 0; i < buildingCount; i++) {
    const el = document.createElement('div');
    el.className = 'building';
    const w = 60 + Math.random() * 40;
    const h = 80 + Math.random() * 140;
    const y = roadY - h;
    const x = i * 90 - 60;
    el.style.width = w + 'px';
    el.style.height = h + 'px';
    for (let wx = 8; wx < w - 15; wx += 20) {
      for (let wy = 10; wy < h - 15; wy += 22) {
        const win = document.createElement('div');
        win.className = 'window';
        win.style.left = wx + 'px';
        win.style.top = wy + 'px';
        el.appendChild(win);
      }
    }
    game.appendChild(el);
    buildings.push({el: el, baseX: x, y: y, w: w, depth: 0.3 + Math.random() * 0.2});
  }

  const lampCount = 14;
  const lampSpacing = worldW / lampCount;
  for (let i = 0; i < lampCount; i++) {
    const el = document.createElement('div');
    el.className = 'lamp';
    el.style.top = (roadY - 2) + 'px';
    game.appendChild(el);
    lamps.push({el: el, baseX: i * lampSpacing - 30});
  }

  for (let i = 0; i < 6; i++) {
    const el = document.createElement('div');
    el.className = 'cloud';
    const baseX = i * 220;
    const y = 20 + Math.random() * (gameHeight * 0.25);
    el.style.top = y + 'px';
    game.appendChild(el);
    clouds.push({el: el, baseX: baseX, y: y, depth: 0.15 + Math.random() * 0.1});
  }
}

function positionScenery() {
  buildings.forEach(m => {
    let x = ((m.baseX - worldOffset) % worldW + worldW) % worldW - 100;
    m.el.style.left = x + 'px';
  });
  clouds.forEach(c => {
    let x = ((c.baseX - worldOffset) % (gameWidth + 1320) + (gameWidth + 1320)) % (gameWidth + 1320) - 100;
    c.el.style.left = x + 'px';
  });
  sunEl.style.left = (gameWidth - 110 - worldOffset) % (gameWidth + 200) + 'px';
  sunEl.style.top = '20px';
  lamps.forEach(l => {
    let x = ((l.baseX - worldOffset) % worldW + worldW) % worldW - 30;
    l.el.style.left = x + 'px';
  });
}

function setupLines() {
  lines.forEach(l => l.el.remove());
  lines = [];
  const laneCount = 5;
  const laneWidth = gameWidth / laneCount;
  for (let lane = 1; lane < laneCount; lane++) {
    for (let i = 0; i < 8; i++) {
      const el = document.createElement('div');
      el.className = 'laneLine';
      el.style.left = (lane * laneWidth - 3) + 'px';
      game.appendChild(el);
      lines.push({el: el, x: lane * laneWidth - 3, y: i * 100});
    }
  }
}

function resetGame() {
  enemies.forEach(e => e.el.remove());
  enemies = [];
  coins.forEach(c => c.el.remove());
  coins = [];
  coinCount = 0;
  coinTimer = 0;
  score = 0;
  scoreTimer = 0;
  speed = 6;
  spawnInterval = 70;
  spawnTimer = 0;
  frame = 0;
  playerX = gameWidth/2 - playerW/2;
  playerY = gameHeight - 120;
  updatePlayerPos();
  scoreEl.textContent = 'Score: 0 | Coins: 0';
  setupLines();
  setupScenery();
}

function updatePlayerPos() {
  playerX = Math.max(0, Math.min(gameWidth - playerW, playerX));
  playerY = Math.max(0, Math.min(gameHeight - playerH, playerY));
  player.style.left = playerX + 'px';
  player.style.top = playerY + 'px';
}

function spawnEnemy() {
  const side = Math.random() < 0.5 ? 'top' : 'side';
  const el = document.createElement('div');
  el.className = 'car enemy';
  let x, y, vx, vy;
  if (side === 'top') {
    x = Math.random() * (gameWidth - 44);
    y = -100;
    vx = 0;
    vy = speed;
  } else {
    const fromLeft = Math.random() < 0.5;
    x = fromLeft ? -60 : gameWidth + 20;
    y = Math.random() * (gameHeight - 200);
    vx = fromLeft ? speed * 0.8 : -speed * 0.8;
    vy = speed * 0.4;
  }
  el.style.left = x + 'px';
  el.style.top = y + 'px';
  game.appendChild(el);
  enemies.push({el: el, x: x, y: y, vx: vx, vy: vy});
}

function spawnCoin() {
  const el = document.createElement('div');
  el.className = 'coin';
  const x = Math.random() * (gameWidth - 26);
  const y = -60;
  el.style.left = x + 'px';
  el.style.top = y + 'px';
  game.appendChild(el);
  coins.push({el: el, x: x, y: y});
}

function checkCoinHit(c) {
  return c.x < playerX + playerW && c.x + 26 > playerX &&
         c.y < playerY + playerH && c.y + 26 > playerY;
}

function checkCollision(e) {
  return e.x < playerX + playerW && e.x + 44 > playerX &&
         e.y < playerY + playerH && e.y + 74 > playerY;
}

function gameOver() {
  running = false;
  overlay.style.display = 'flex';
  overlay.innerHTML = '<div>💥 Crashed! 💥</div><div>Score: ' + score + ' | Coins: ' + coinCount + '</div><button id="startBtn2">Play Again</button>';
  document.getElementById('startBtn2').addEventListener('click', startGame);
}

function loop() {
  if (!running) return;
  frame++;

  // move player based on keys
  if (keys['ArrowUp']) playerY -= playerSpeed;
  if (keys['ArrowDown']) playerY += playerSpeed;
  if (keys['ArrowLeft']) playerX -= playerSpeed;
  if (keys['ArrowRight']) playerX += playerSpeed;
  updatePlayerPos();

  // move lines downward for scrolling feel
  lines.forEach(l => {
    l.y += speed;
    if (l.y > gameHeight) l.y -= 8 * 100;
    l.el.style.top = l.y + 'px';
  });

  // move fixed environment at the same steady pace as the road lines
  worldOffset += speed;
  positionScenery();

  // spawn enemies
  spawnTimer++;
  if (spawnTimer >= spawnInterval) {
    spawnTimer = 0;
    spawnEnemy();
  }

  // spawn coins
  coinTimer++;
  if (coinTimer >= coinInterval) {
    coinTimer = 0;
    spawnCoin();
  }

  // move coins
  for (let i = coins.length - 1; i >= 0; i--) {
    const c = coins[i];
    c.y += speed;
    c.el.style.top = c.y + 'px';
    if (checkCoinHit(c)) {
      coinCount++;
      c.el.remove();
      coins.splice(i, 1);
      scoreEl.textContent = 'Score: ' + score + ' | Coins: ' + coinCount;
      continue;
    }
    if (c.y > gameHeight + 50) {
      c.el.remove();
      coins.splice(i, 1);
    }
  }

  // move enemies
  for (let i = enemies.length - 1; i >= 0; i--) {
    const e = enemies[i];
    e.x += e.vx;
    e.y += e.vy;
    e.el.style.left = e.x + 'px';
    e.el.style.top = e.y + 'px';
    if (checkCollision(e)) {
      gameOver();
      return;
    }
    if (e.y > gameHeight + 50 || e.x < -100 || e.x > gameWidth + 100) {
      e.el.remove();
      enemies.splice(i, 1);
    }
  }

  // score over time
  scoreTimer++;
  if (scoreTimer >= 10) {
    scoreTimer = 0;
    score++;
    scoreEl.textContent = 'Score: ' + score + ' | Coins: ' + coinCount;
  }

  // increase difficulty
  if (frame % 300 === 0) {
    speed += 0.6;
    if (spawnInterval > 25) spawnInterval -= 4;
  }

  requestAnimationFrame(loop);
}

function startGame() {
  overlay.style.display = 'none';
  resetGame();
  running = true;
  requestAnimationFrame(loop);
}

startBtn.addEventListener('click', startGame);

document.addEventListener('keydown', (e) => {
  if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key)) {
    keys[e.key] = true;
    e.preventDefault();
  }
});
document.addEventListener('keyup', (e) => {
  keys[e.key] = false;
});

function heldBtn(el, key) {
  el.addEventListener('touchstart', (e) => { e.preventDefault(); keys[key] = true; });
  el.addEventListener('touchend', (e) => { e.preventDefault(); keys[key] = false; });
  el.addEventListener('mousedown', (e) => { e.preventDefault(); keys[key] = true; });
  el.addEventListener('mouseup', (e) => { keys[key] = false; });
  el.addEventListener('mouseleave', (e) => { keys[key] = false; });
}
heldBtn(upBtn, 'ArrowUp');
heldBtn(downBtn, 'ArrowDown');
heldBtn(leftBtn, 'ArrowLeft');
heldBtn(rightBtn, 'ArrowRight');

resetGame();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Escape Road</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    background: #222;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
    touch-action: none;
  }
  #wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #game {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 100vh;
    background: linear-gradient(#8ba3b8, #cfd8dc 40%, #9e9e8a 40%, #9e9e8a 44%, #555 44%);
    overflow: hidden;
    border-left: 8px solid #ddd;
    border-right: 8px solid #ddd;
    box-sizing: border-box;
  }
  .lamp {
    position: absolute;
    width: 6px;
    height: 40px;
    background: #444;
  }
  .lamp::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -5px;
    width: 16px;
    height: 12px;
    background: #ffe066;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(255,224,102,0.8);
  }
  .building {
    position: absolute;
    background: #607080;
    border: 2px solid #3e4a55;
    box-sizing: border-box;
  }
  .building .window {
    position: absolute;
    width: 10px;
    height: 12px;
    background: #ffe066;
    opacity: 0.85;
  }
  .sun {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff3a0;
    box-shadow: 0 0 30px 10px rgba(255,243,160,0.6);
  }
  .cloud {
    position: absolute;
    width: 80px;
    height: 30px;
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
  }
  .cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
  }
  .cloud::before {
    width: 40px; height: 40px;
    top: -18px; left: 10px;
  }
  .cloud::after {
    width: 30px; height: 30px;
    top: -12px; left: 45px;
  }
  .laneLine {
    position: absolute;
    width: 6px;
    height: 40px;
    background: #fff;
  }
  .car {
    position: absolute;
    width: 44px;
    height: 74px;
    border-radius: 8px;
  }
  #player {
    background: #ffcc00;
    border: 3px solid #b38f00;
    z-index: 5;
  }
  .enemy {
    background: #ff3b3b;
    border: 3px solid #a00000;
  }
  .coin {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6c0, #ffd700 60%, #b8860b 100%);
    border: 2px solid #b8860b;
    box-shadow: 0 0 8px rgba(255,215,0,0.8);
    z-index: 4;
  }
  #score {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    z-index: 10;
  }
  #overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 20;
    font-size: 20px;
  }
  #overlay button {
    margin-top: 20px;
    padding: 14px 28px;
    font-size: 20px;
    border-radius: 10px;
    border: none;
    background: #ffcc00;
    cursor: pointer;
    font-weight: bold;
  }
  #controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 15;
    display: grid;
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 60px 60px 60px;
    gap: 6px;
  }
  #controls div {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    font-size: 30px;
    user-select: none;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
  }
  #upBtn { grid-column: 2; grid-row: 1; }
  #leftBtn { grid-column: 1; grid-row: 2; }
  #rightBtn { grid-column: 3; grid-row: 2; }
  #downBtn { grid-column: 2; grid-row: 3; }
</style>
</head>
<body>
<div id="wrap">
  <div id="game">
    <div id="score">Score: 0</div>
    <div id="player" class="car"></div>
    <div id="overlay">
      <div>🚗 Escape Road 🚗</div>
      <div>Use arrow keys or buttons to dodge every way!</div>
      <button id="startBtn">Start Game</button>
    </div>
    <div id="controls">
      <div id="upBtn">▲</div>
      <div id="leftBtn">◀</div>
      <div id="rightBtn">▶</div>
      <div id="downBtn">▼</div>
    </div>
  </div>
</div>

<script>
const game = document.getElementById('game');
const player = document.getElementById('player');
const scoreEl = document.getElementById('score');
const overlay = document.getElementById('overlay');
const startBtn = document.getElementById('startBtn');
const upBtn = document.getElementById('upBtn');
const downBtn = document.getElementById('downBtn');
const leftBtn = document.getElementById('leftBtn');
const rightBtn = document.getElementById('rightBtn');

let gameWidth, gameHeight;
let playerX, playerY;
const playerW = 44, playerH = 74;
const playerSpeed = 6;
let keys = {};
let running = false;
let score = 0;
let scoreTimer = 0;
let speed = 6;
let enemies = [];
let spawnTimer = 0;
let spawnInterval = 70;
let coins = [];
let coinTimer = 0;
let coinInterval = 55;
let coinCount = 0;
let frame = 0;
let lines = [];
let buildings = [];
let clouds = [];
let lamps = [];
let sunEl = null;
const roadTop = () => gameHeight * 0.4;

function resize() {
  gameWidth = game.clientWidth;
  gameHeight = game.clientHeight;
}
window.addEventListener('resize', resize);
resize();

let worldOffset = 0;
let worldW = 0;

function setupScenery() {
  buildings.forEach(m => m.el.remove());
  clouds.forEach(c => c.el.remove());
  lamps.forEach(l => l.el.remove());
  if (sunEl) sunEl.remove();
  buildings = [];
  clouds = [];
  lamps = [];
  worldOffset = 0;

  sunEl = document.createElement('div');
  sunEl.className = 'sun';
  game.appendChild(sunEl);

  const roadY = gameHeight * 0.4;
  const buildingCount = 22;
  worldW = buildingCount * 90;
  for (let i = 0; i < buildingCount; i++) {
    const el = document.createElement('div');
    el.className = 'building';
    const w = 60 + Math.random() * 40;
    const h = 80 + Math.random() * 140;
    const y = roadY - h;
    const x = i * 90 - 60;
    el.style.width = w + 'px';
    el.style.height = h + 'px';
    for (let wx = 8; wx < w - 15; wx += 20) {
      for (let wy = 10; wy < h - 15; wy += 22) {
        const win = document.createElement('div');
        win.className = 'window';
        win.style.left = wx + 'px';
        win.style.top = wy + 'px';
        el.appendChild(win);
      }
    }
    game.appendChild(el);
    buildings.push({el: el, baseX: x, y: y, w: w, depth: 0.3 + Math.random() * 0.2});
  }

  const lampCount = 14;
  const lampSpacing = worldW / lampCount;
  for (let i = 0; i < lampCount; i++) {
    const el = document.createElement('div');
    el.className = 'lamp';
    el.style.top = (roadY - 2) + 'px';
    game.appendChild(el);
    lamps.push({el: el, baseX: i * lampSpacing - 30});
  }

  for (let i = 0; i < 6; i++) {
    const el = document.createElement('div');
    el.className = 'cloud';
    const baseX = i * 220;
    const y = 20 + Math.random() * (gameHeight * 0.25);
    el.style.top = y + 'px';
    game.appendChild(el);
    clouds.push({el: el, baseX: baseX, y: y, depth: 0.15 + Math.random() * 0.1});
  }
}

function positionScenery() {
  buildings.forEach(m => {
    let x = ((m.baseX - worldOffset) % worldW + worldW) % worldW - 100;
    m.el.style.left = x + 'px';
  });
  clouds.forEach(c => {
    let x = ((c.baseX - worldOffset) % (gameWidth + 1320) + (gameWidth + 1320)) % (gameWidth + 1320) - 100;
    c.el.style.left = x + 'px';
  });
  sunEl.style.left = (gameWidth - 110 - worldOffset) % (gameWidth + 200) + 'px';
  sunEl.style.top = '20px';
  lamps.forEach(l => {
    let x = ((l.baseX - worldOffset) % worldW + worldW) % worldW - 30;
    l.el.style.left = x + 'px';
  });
}

function setupLines() {
  lines.forEach(l => l.el.remove());
  lines = [];
  const laneCount = 5;
  const laneWidth = gameWidth / laneCount;
  for (let lane = 1; lane < laneCount; lane++) {
    for (let i = 0; i < 8; i++) {
      const el = document.createElement('div');
      el.className = 'laneLine';
      el.style.left = (lane * laneWidth - 3) + 'px';
      game.appendChild(el);
      lines.push({el: el, x: lane * laneWidth - 3, y: i * 100});
    }
  }
}

function resetGame() {
  enemies.forEach(e => e.el.remove());
  enemies = [];
  coins.forEach(c => c.el.remove());
  coins = [];
  coinCount = 0;
  coinTimer = 0;
  score = 0;
  scoreTimer = 0;
  speed = 6;
  spawnInterval = 70;
  spawnTimer = 0;
  frame = 0;
  playerX = gameWidth/2 - playerW/2;
  playerY = gameHeight - 120;
  updatePlayerPos();
  scoreEl.textContent = 'Score: 0 | Coins: 0';
  setupLines();
  setupScenery();
}

function updatePlayerPos() {
  playerX = Math.max(0, Math.min(gameWidth - playerW, playerX));
  playerY = Math.max(0, Math.min(gameHeight - playerH, playerY));
  player.style.left = playerX + 'px';
  player.style.top = playerY + 'px';
}

function spawnEnemy() {
  const side = Math.random() < 0.5 ? 'top' : 'side';
  const el = document.createElement('div');
  el.className = 'car enemy';
  let x, y, vx, vy;
  if (side === 'top') {
    x = Math.random() * (gameWidth - 44);
    y = -100;
    vx = 0;
    vy = speed;
  } else {
    const fromLeft = Math.random() < 0.5;
    x = fromLeft ? -60 : gameWidth + 20;
    y = Math.random() * (gameHeight - 200);
    vx = fromLeft ? speed * 0.8 : -speed * 0.8;
    vy = speed * 0.4;
  }
  el.style.left = x + 'px';
  el.style.top = y + 'px';
  game.appendChild(el);
  enemies.push({el: el, x: x, y: y, vx: vx, vy: vy});
}

function spawnCoin() {
  const el = document.createElement('div');
  el.className = 'coin';
  const x = Math.random() * (gameWidth - 26);
  const y = -60;
  el.style.left = x + 'px';
  el.style.top = y + 'px';
  game.appendChild(el);
  coins.push({el: el, x: x, y: y});
}

function checkCoinHit(c) {
  return c.x < playerX + playerW && c.x + 26 > playerX &&
         c.y < playerY + playerH && c.y + 26 > playerY;
}

function checkCollision(e) {
  return e.x < playerX + playerW && e.x + 44 > playerX &&
         e.y < playerY + playerH && e.y + 74 > playerY;
}

function gameOver() {
  running = false;
  overlay.style.display = 'flex';
  overlay.innerHTML = '<div>💥 Crashed! 💥</div><div>Score: ' + score + ' | Coins: ' + coinCount + '</div><button id="startBtn2">Play Again</button>';
  document.getElementById('startBtn2').addEventListener('click', startGame);
}

function loop() {
  if (!running) return;
  frame++;

  // move player based on keys
  if (keys['ArrowUp']) playerY -= playerSpeed;
  if (keys['ArrowDown']) playerY += playerSpeed;
  if (keys['ArrowLeft']) playerX -= playerSpeed;
  if (keys['ArrowRight']) playerX += playerSpeed;
  updatePlayerPos();

  // move lines downward for scrolling feel
  lines.forEach(l => {
    l.y += speed;
    if (l.y > gameHeight) l.y -= 8 * 100;
    l.el.style.top = l.y + 'px';
  });

  // move fixed environment at the same steady pace as the road lines
  worldOffset += speed;
  positionScenery();

  // spawn enemies
  spawnTimer++;
  if (spawnTimer >= spawnInterval) {
    spawnTimer = 0;
    spawnEnemy();
  }

  // spawn coins
  coinTimer++;
  if (coinTimer >= coinInterval) {
    coinTimer = 0;
    spawnCoin();
  }

  // move coins
  for (let i = coins.length - 1; i >= 0; i--) {
    const c = coins[i];
    c.y += speed;
    c.el.style.top = c.y + 'px';
    if (checkCoinHit(c)) {
      coinCount++;
      c.el.remove();
      coins.splice(i, 1);
      scoreEl.textContent = 'Score: ' + score + ' | Coins: ' + coinCount;
      continue;
    }
    if (c.y > gameHeight + 50) {
      c.el.remove();
      coins.splice(i, 1);
    }
  }

  // move enemies
  for (let i = enemies.length - 1; i >= 0; i--) {
    const e = enemies[i];
    e.x += e.vx;
    e.y += e.vy;
    e.el.style.left = e.x + 'px';
    e.el.style.top = e.y + 'px';
    if (checkCollision(e)) {
      gameOver();
      return;
    }
    if (e.y > gameHeight + 50 || e.x < -100 || e.x > gameWidth + 100) {
      e.el.remove();
      enemies.splice(i, 1);
    }
  }

  // score over time
  scoreTimer++;
  if (scoreTimer >= 10) {
    scoreTimer = 0;
    score++;
    scoreEl.textContent = 'Score: ' + score + ' | Coins: ' + coinCount;
  }

  // increase difficulty
  if (frame % 300 === 0) {
    speed += 0.6;
    if (spawnInterval > 25) spawnInterval -= 4;
  }

  requestAnimationFrame(loop);
}

function startGame() {
  overlay.style.display = 'none';
  resetGame();
  running = true;
  requestAnimationFrame(loop);
}

startBtn.addEventListener('click', startGame);

document.addEventListener('keydown', (e) => {
  if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key)) {
    keys[e.key] = true;
    e.preventDefault();
  }
});
document.addEventListener('keyup', (e) => {
  keys[e.key] = false;
});

function heldBtn(el, key) {
  el.addEventListener('touchstart', (e) => { e.preventDefault(); keys[key] = true; });
  el.addEventListener('touchend', (e) => { e.preventDefault(); keys[key] = false; });
  el.addEventListener('mousedown', (e) => { e.preventDefault(); keys[key] = true; });
  el.addEventListener('mouseup', (e) => { keys[key] = false; });
  el.addEventListener('mouseleave', (e) => { keys[key] = false; });
}
heldBtn(upBtn, 'ArrowUp');
heldBtn(downBtn, 'ArrowDown');
heldBtn(leftBtn, 'ArrowLeft');
heldBtn(rightBtn, 'ArrowRight');

resetGame();
</script>
</body>
</html>

PREVIEW

PICTURES0/50

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