Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Dash</title>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background: #111;
  }
  canvas {
    display: block;
    background: linear-gradient(#222, #000);
  }
</style>
</head>
<body>

<canvas id="game"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let player = {
  x: 100,
  y: canvas.height - 100,
  size: 30,
  vy: 0,
  gravity: 0.7,
  jump: -12,
  grounded: false
};

let obstacles = [];
let speed = 6;
let frame = 0;
let score = 0;

function spawnObstacle() {
  obstacles.push({
    x: canvas.width,
    y: canvas.height - 60,
    width: 30,
    height: 60
  });
}

function update() {
  frame++;
  
  // Gravity
  player.vy += player.gravity;
  player.y += player.vy;

  if (player.y >= canvas.height - 100) {
    player.y = canvas.height - 100;
    player.vy = 0;
    player.grounded = true;
  }

  // Obstacles
  if (frame % 90 === 0) spawnObstacle();

  obstacles.forEach((obs, i) => {
    obs.x -= speed;

    // Collision
    if (
      player.x < obs.x + obs.width &&
      player.x + player.size > obs.x &&
      player.y < obs.y + obs.height &&
      player.y + player.size > obs.y
    ) {
      alert("Game Over! Score: " + score);
      document.location.reload();
    }

    if (obs.x + obs.width < 0) {
      obstacles.splice(i, 1);
      score++;
    }
  });
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Player
  ctx.fillStyle = "#0ff";
  ctx.fillRect(player.x, player.y, player.size, player.size);

  // Obstacles
  ctx.fillStyle = "#f00";
  obstacles.forEach(obs => {
    ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
  });

  // Score
  ctx.fillStyle = "#fff";
  ctx.font = "20px Arial";
  ctx.fillText("Score: " + score, 20, 30);
}

function gameLoop() {
  update();
  draw();
  requestAnimationFrame(gameLoop);
}

window.addEventListener("touchstart", jump);
window.addEventListener("mousedown", jump);

function jump() {
  if (player.grounded) {
    player.vy = player.jump;
    player.grounded = false;
  }
}

gameLoop();
</script>

</body>
</html>
Editor is loading...