תפוס את הכוכב

by FrozenOtter31
204 lines4.7 KB
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>תפוס את הכוכב</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Arial, sans-serif;
      background: linear-gradient(135deg, #141e30, #243b55);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .game {
      width: min(900px, 94vw);
      text-align: center;
    }

    h1 {
      margin-bottom: 8px;
      font-size: 2.4rem;
    }

    .description {
      margin-top: 0;
      color: #d9e6ff;
    }

    .info {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin: 20px 0;
      font-size: 1.2rem;
      font-weight: bold;
    }

    .panel {
      position: relative;
      height: 500px;
      overflow: hidden;
      border: 3px solid rgba(255,255,255,.5);
      border-radius: 20px;
      background:
        radial-gradient(circle at 20% 20%, #ffffff18 2px, transparent 3px),
        radial-gradient(circle at 80% 70%, #ffffff18 2px, transparent 3px),
        #071425;
      box-shadow: 0 15px 40px #0008;
    }

    #star {
      position: absolute;
      display: none;
      width: 65px;
      height: 65px;
      border: none;
      border-radius: 50%;
      background: #ffd43b;
      font-size: 2.4rem;
      cursor: pointer;
      box-shadow: 0 0 25px #ffd43b;
      transition: transform .1s;
    }

    #star:active {
      transform: scale(.8);
    }

    button#start {
      margin-top: 20px;
      padding: 13px 28px;
      border: none;
      border-radius: 12px;
      background: #4dabf7;
      color: white;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
    }

    button#start:hover {
      background: #339af0;
    }

    #message {
      margin-top: 18px;
      min-height: 28px;
      font-size: 1.2rem;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <main class="game">
    <h1>תפוס את הכוכב ⭐</h1>
    <p class="description">לחץ על הכוכב כמה שיותר פעמים לפני שהזמן נגמר!</p>

    <div class="info">
      <div>ניקוד: <span id="score">0</span></div>
      <div>זמן: <span id="time">30</span></div>
      <div>שיא: <span id="best">0</span></div>
    </div>

    <section class="panel" id="panel">
      <button id="star" aria-label="כוכב">⭐</button>
    </section>

    <button id="start">התחל משחק</button>
    <div id="message"></div>
  </main>

  <script>
    const panel = document.getElementById("panel");
    const star = document.getElementById("star");
    const startButton = document.getElementById("start");
    const scoreElement = document.getElementById("score");
    const timeElement = document.getElementById("time");
    const bestElement = document.getElementById("best");
    const message = document.getElementById("message");

    let score = 0;
    let time = 30;
    let timer;
    let playing = false;

    let best = Number(localStorage.getItem("starBest") || 0);
    bestElement.textContent = best;

    function moveStar() {
      const maxX = panel.clientWidth - star.offsetWidth;
      const maxY = panel.clientHeight - star.offsetHeight;

      const x = Math.floor(Math.random() * maxX);
      const y = Math.floor(Math.random() * maxY);

      star.style.left = `${x}px`;
      star.style.top = `${y}px`;
    }

    function startGame() {
      score = 0;
      time = 30;
      playing = true;

      scoreElement.textContent = score;
      timeElement.textContent = time;
      message.textContent = "";
      startButton.textContent = "משחק פעיל...";
      startButton.disabled = true;
      star.style.display = "block";

      moveStar();

      clearInterval(timer);
      timer = setInterval(() => {
        time--;
        timeElement.textContent = time;

        if (time <= 0) {
          endGame();
        }
      }, 1000);
    }

    function endGame() {
      playing = false;
      clearInterval(timer);
      star.style.display = "none";
      startButton.disabled = false;
      startButton.textContent = "שחק שוב";

      if (score > best) {
        best = score;
        localStorage.setItem("starBest", best);
        bestElement.textContent = best;
        message.textContent = `כל הכבוד! שיא חדש: ${score} ⭐`;
      } else {
        message.textContent = `הזמן נגמר! השגת ${score} נקודות.`;
      }
    }

    star.addEventListener("click", () => {
      if (!playing) return;

      score++;
      scoreElement.textContent = score;
      moveStar();
    });

    startButton.addEventListener("click", startGame);
  </script>
</body>
</html>
Game Source: תפוס את הכוכב

Creator: FrozenOtter31
Libraries: none
Complexity: complex (204 lines, 4.7 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-frozenotter31" to link back to the original. Then publish at arcadelab.ai/publish.