یونیکسیک

ساخت بازی همستر

سپتامبر 30, 2024

—

توسط

فرید کرمی

در فرانت اند

در این بخش قصد داریم یک بازی ساده را با استفاده از HTML و CSS و JavaScript بسازیم. این بازی دارای 9 خانه می باشد که یک همستر هر یک ثانیه وارد یکی از این خانه ها می شود و بازیکن یک ثانیه فرصت دارد تا رو همستر کلیک کند که در اینصورت یک امتیاز کسب می کند.

بخش HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hamster Game</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <div class="game-container">
        <h1 class="score-board">Score: <span id="score">0</span></h1>
        <div class="game-board" id="gameBoard"></div>
    </div>
</body>
</html>

بخش CSS

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #444444;
}

.game-container {
    margin: 50px auto;
}

.score-board {
    color: #888888;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    justify-content: center;
}

.cell {
    width: 100px;
    height: 100px;
    border: 1px solid #aaaaaa;
    cursor: pointer;
}

.hamster {
    font-size: 80px;
}

بخش JavaScript

window.onload = () => {
  main();
};

const main = () => {
  const scoreElement = document.getElementById("score");
  const gameBoard = document.getElementById("gameBoard");
  let score = 0;
  let hamsterPosition = null;

  // Create cells
  for (let i = 0; i < 9; i++) {
    const cell = document.createElement("div");
    cell.classList.add("cell");
    cell.dataset.index = i; // Store number of cell
    cell.addEventListener("click", () => handleCellClick(i));
    gameBoard.appendChild(cell);
  }

  // Move
  function moveHamster() {
    const previousPosition = hamsterPosition;
    hamsterPosition = Math.floor(Math.random() * 9);

    // Hide from previous cell
    if (previousPosition !== null) {
      const previousCell = document.querySelector(
        `.cell[data-index='${previousPosition}']`
      );
      previousCell.innerHTML = ""; // Remove
    }

    // Show in new cell
    const currentCell = document.querySelector(
      `.cell[data-index='${hamsterPosition}']`
    );
    currentCell.innerHTML = '<div class="hamster">🐹</div>';
  }

  // Handle click on cell
  function handleCellClick(index) {
    if (index === hamsterPosition) {
      score++;
      scoreElement.textContent = score;
      moveHamster(); // Move after success click
    }
  }

  // Start
  setInterval(moveHamster, 1000); // Move every 1 second
};

دیدگاه‌ها

دیدگاهتان را بنویسید لغو پاسخ