Untitled

const player = document.getElementById('player');
const enemy = document.getElementById('enemy');
const gameContainer = document.getElementById('game-container');

let playerPosition = { x: 10, y: 350 };
let enemyPosition = { x: 400, y: 10 };
let enemySpeed = 2;

// Move player using arrow keys
document.addEventListener('keydown', (event) => {
  const step = 10;
  if (event.key === 'ArrowUp' && playerPosition.y > 0) {
    playerPosition.y -= step;
  }
  if (event.key === 'ArrowDown' && playerPosition.y < 360) {
    playerPosition.y += step;
  }
  if (event.key === 'ArrowLeft' && playerPosition.x > 0) {
    playerPosition.x -= step;
  }
  if (event.key === 'ArrowRight' && playerPosition.x < 760) {
    playerPosition.x += step;
  }
  player.style.transform = `translate(${playerPosition.x}px, ${playerPosition.y}px)`;
});

// Move enemy automatically
function moveEnemy() {
  enemyPosition.y += enemySpeed;
  if (enemyPosition.y > 360 || enemyPosition.y < 0) {
    enemySpeed *= -1; // Change direction
  }
  enemy.style.transform = `translate(${enemyPosition.x}px, ${enemyPosition.y}px)`;
}

// Check for collision
function checkCollision() {
  const playerRect = player.getBoundingClientRect();
  const enemyRect = enemy.getBoundingClientRect();
  if (
    playerRect.left < enemyRect.right &&
    playerRect.right > enemyRect.left &&
    playerRect.top < enemyRect.bottom &&
    playerRect.bottom > enemyRect.top
  ) {
    alert('Game Over!');
    resetGame();
  }
}

// Reset game
function resetGame() {
  playerPosition = { x: 10, y: 350 };
  enemyPosition = { x: 400, y: 10 };
  enemySpeed = 2;
  player.style.transform = `translate(${playerPosition.x}px, ${playerPosition.y}px)`;
  enemy.style.transform = `translate(${enemyPosition.x}px, ${enemyPosition.y}px)`;
}

// Game loop
function gameLoop() {
  moveEnemy();
  checkCollision();
  requestAnimationFrame(gameLoop);
}

gameLoop();