Make Simple “Guess The Right Box Game”, With HTML+CSS+Javascript
2 min readAug 20, 2023
The idea of this game is, player will be chose the one box, between three om them, and the game will count how many attempt of win or lose, player will be win if they clicked the right box which included the hidden image inside the box,
So there will be 4 files on our Project Folder :
- name.html
- style.css
- smk-bam.png
- script.js
name.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>style.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
That’s it, now we have “Choose The Right Box” Game !
