Ennek a játéknak az az ötlete, hogy a játékos kiválasztja az egy dobozt, három közülük, és a játék megszámolja, hányszor próbálkozik nyerni vagy veszíteni, a játékos akkor lesz nyerő, ha rákattint a jobb oldali négyzetre, amelyben a rejtett kép található. doboz,
Tehát 4 fájl lesz a projekt mappánkban:
- name.html
- style.css
- smk-bam.png
- script.js
név.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tebak Dimana Logo Berada ?</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="result-container"> <h1 id="result-text"></h1> </div> <div class="game-container"> <div class="box red"> <img src="smk-bam.png" class="hidden-image"></img> </div> <div class="box green"> <img src="smk-bam.png" class="hidden-image"></img> </div> <div class="box blue"> <img src="smk-bam.png" class="hidden-image"></img> </div> </div> <div class="score-container"> <p>Menang: <span id="score">0</span> Kali | Kalah: <span id="loss-count">0</span> Kali</p> <button id="reset-button">Reset Game</button> </div> <script src="script.js"></script> </body> </html>
stílus.css
body { display: grid; justify-content: center; align-items: center; margin: auto; height: 100vh; } button { padding: 10px 20px; font-size: 20px; background-color: #007bff; color: #fff; border: none; cursor: pointer; border-radius: 4px; } .box { width: 100px; height: 100px; margin: 20px; border-radius: 8px; transition: all 0.3s ease; cursor: pointer; } .game-container{ display: flex; justify-content: center; align-items: center; } .score-container { text-align: center; display: grid; justify-content: center; } .red { background-color: #FF5733; } .green { background-color: #33FF57; } .blue { background-color: #336BFF; } .box:hover::before { content: "?"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; font-weight: bold; } .box:hover { transform: scale(1.8) rotate(360deg); } .hidden-image { top: 0; left: 0; width: 100px; height: 100px; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; }
Script.js
Ennyi, most megvan a „Válaszd ki a megfelelő dobozt” játék!