🕹️ Cara Membuat Game Simon Says dengan Mode Malam dan Efek Animasi Tombol Menarik


🕹️ Cara Membuat Game Simon Says dengan Mode Malam dan Efek Animasi Tombol Menarik

Game Simon Says adalah permainan memori sederhana di mana pemain harus mengulangi urutan warna yang ditampilkan oleh komputer. Dalam artikel ini, kita akan membuat versi web-nya menggunakan HTML, CSS, dan JavaScript, lengkap dengan mode malam (dark mode) dan efek animasi yang jelas saat tombol ditekan.

đŸŽ¯ Fitur yang Akan Kita Buat:

  • Desain mode malam yang nyaman di mata.
  • Tombol warna dengan efek animasi kilat saat ditekan.
  • Logika game: komputer menampilkan urutan → pemain meniru urutan → skor naik.
  • Tampilan level dan status game.

1️⃣ Struktur HTML

Buat file bernama index.html dan tambahkan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Simon Says - Dark Mode</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>Simon Says</h1>
    <h2 id="level-title">Tekan tombol untuk mulai</h2>
    <div class="button-container">
      <div class="btn red" id="red"></div>
      <div class="btn blue" id="blue"></div>
      <div class="btn green" id="green"></div>
      <div class="btn yellow" id="yellow"></div>
    </div>
    <button id="start-btn">Mulai</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

2️⃣ Gaya CSS dengan Mode Malam dan Efek Tekan Jelas

Buat file style.css dan isi dengan kode berikut:

body {
  background-color: #121212;
  color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 400px;
  margin: auto;
}

h1 {
  font-size: 2.5rem;
}

#level-title {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #cccccc;
}

.button-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  gap: 20px;
  justify-content: center;
  margin: 30px 0;
}

.btn {
  width: 150px;
  height: 150px;
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 15px;
  background: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn.pressed::after {
  opacity: 0.6;
}

.btn.pressed {
  transform: scale(0.95);
  box-shadow: 0 0 30px white;
}

.red {
  background-color: #e74c3c;
}
.blue {
  background-color: #3498db;
}
.green {
  background-color: #2ecc71;
}
.yellow {
  background-color: #f1c40f;
}

#start-btn {
  background-color: #333;
  color: white;
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
#start-btn:hover {
  background-color: #555;
}

3️⃣ Logika Game dengan JavaScript

Buat file script.js dan tambahkan kode berikut:

const buttonColors = ["red", "blue", "green", "yellow"];
let gamePattern = [];
let userClickedPattern = [];
let level = 0;
let started = false;

const levelTitle = document.getElementById("level-title");
const startBtn = document.getElementById("start-btn");

startBtn.addEventListener("click", () => {
  if (!started) {
    startGame();
  }
});

function startGame() {
  level = 0;
  gamePattern = [];
  started = true;
  levelTitle.textContent = `Level ${level}`;
  nextSequence();
}

function nextSequence() {
  userClickedPattern = [];
  level++;
  levelTitle.textContent = `Level ${level}`;

  const randomColor = buttonColors[Math.floor(Math.random() * 4)];
  gamePattern.push(randomColor);

  flashButton(randomColor);
  playSound(randomColor);
}

function flashButton(color) {
  const btn = document.getElementById(color);
  btn.classList.add("pressed");
  setTimeout(() => {
    btn.classList.remove("pressed");
  }, 200);
}

function playSound(color) {
  const audio = new Audio(`https://s3.amazonaws.com/freecodecamp/simonSound${buttonColors.indexOf(color) + 1}.mp3`);
  audio.play();
}

document.querySelectorAll(".btn").forEach(btn => {
  btn.addEventListener("click", function () {
    if (!started) return;

    const userColor = this.id;
    userClickedPattern.push(userColor);
    flashButton(userColor);
    playSound(userColor);

    checkAnswer(userClickedPattern.length - 1);
  });
});

function checkAnswer(currentLevel) {
  if (userClickedPattern[currentLevel] === gamePattern[currentLevel]) {
    if (userClickedPattern.length === gamePattern.length) {
      setTimeout(() => {
        nextSequence();
      }, 1000);
    }
  } else {
    playWrongSound();
    levelTitle.textContent = "Game Over! Tekan tombol untuk mulai lagi";
    started = false;
  }
}

function playWrongSound() {
  const wrongAudio = new Audio("https://s3.amazonaws.com/adam-recvlohe-sounds/error.wav");
  wrongAudio.play();
}

function flashButton(color) {
  const btn = document.getElementById(color);
  btn.classList.add("pressed");
  setTimeout(() => {
    btn.classList.remove("pressed");
  }, 300);
}

🎮 Penutup

Game ini adalah contoh sederhana bagaimana HTML, CSS, dan JavaScript dapat bekerja bersama untuk menciptakan permainan interaktif dan menarik. Kamu bisa mengembangkan lebih lanjut seperti:

  • Menyimpan skor tertinggi (high score).
  • Menambahkan efek suara dan animasi tambahan.
  • Membuat versi mudah → sedang → sulit.

Komentar

Posting Komentar