diff --git a/Games/Ant_Smasher/script.js b/Games/Ant_Smasher/script.js
index 6f02773bf5..e46392b918 100644
--- a/Games/Ant_Smasher/script.js
+++ b/Games/Ant_Smasher/script.js
@@ -1,9 +1,11 @@
const holes = document.querySelectorAll(".hole");
-const scoreBoard = document.querySelector(".score");
+const scoreBoard = document.querySelectorAll(".score")[0];
+const finalScore = document.querySelectorAll(".score")[1];
const moles = document.querySelectorAll(".mole");
let lastHole;
let timeUp = false;
let score = 0;
+let totalScore = 0;
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
@@ -22,6 +24,7 @@ function randomHole(holes) {
function peep() {
const time = randomTime(500, 2000);
const hole = randomHole(holes);
+ totalScore++;
hole.classList.add("up");
setTimeout(() => {
hole.classList.remove("up");
@@ -31,10 +34,16 @@ function peep() {
function startGame() {
scoreBoard.textContent = 0;
+ finalScore.textContent = 0;
timeUp = false;
score = 0;
+ totalScore = 0;
+
peep();
- setTimeout(() => (timeUp = true), 10000);
+ setTimeout(() => {
+ timeUp = true;
+ finalScore.textContent = score+ '/' + totalScore;
+ }, 10000);
}
function bonk(e) {
@@ -42,6 +51,9 @@ function bonk(e) {
score++;
this.parentNode.classList.remove("up");
scoreBoard.textContent = score;
+ if (timeUp) {
+ finalScore.textContent = score+'/'+totalScore;
+ }
}
moles.forEach((mole) => mole.addEventListener("click", bonk));
diff --git a/Games/Ant_Smasher/style.css b/Games/Ant_Smasher/style.css
index 494f974094..eaa8019bb9 100644
--- a/Games/Ant_Smasher/style.css
+++ b/Games/Ant_Smasher/style.css
@@ -14,34 +14,39 @@ body {
padding: 0;
margin: 0;
font-family: "Amatic SC", cursive;
+ position: relative;
}
h1 {
text-align: center;
- font-size: 10rem;
+ font-size: 6rem;
line-height: 1;
margin-bottom: 0;
}
.score {
background: rgba(255, 255, 255, 0.2);
- padding: 0 3rem;
+ padding: 0 4rem;
line-height: 1;
border-radius: 1rem;
}
.game {
- width: 600px;
- height: 400px;
+ width: 80vw;
+ max-width: 1000px;
+ height: 60vh;
+ min-height: 400px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
+ padding: 20px;
}
.hole {
flex: 1 0 33.33%;
overflow: hidden;
position: relative;
+ min-height: 300px;
}
.hole:after {
@@ -51,10 +56,10 @@ h1 {
background-size: contain;
content: "";
width: 100%;
- height: 70px;
+ height: 120px;
position: absolute;
z-index: 2;
- bottom: -30px;
+ bottom: -50px;
}
.mole {
@@ -70,3 +75,32 @@ h1 {
.hole.up .mole {
top: 0;
}
+
+button {
+ background-color: #ff6b6b;
+ color: white;
+ font-size: 20px;
+ font-weight: bold;
+ padding: 15px 30px;
+ border: 3px solid #333;
+ border-radius: 10px;
+ cursor: pointer;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+ transition: all 0.3s ease;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 40px;
+ z-index: 10;
+}
+
+button:hover {
+ background-color: #ff5252;
+ transform: translateX(-50%) scale(1.05);
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
+}
+
+button:active {
+ transform: translateX(-50%) scale(0.95);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
diff --git a/assets/images/Ant_Smasher_Demo.png b/assets/images/Ant_Smasher_Demo.png
index a127f970f5..9f3693af50 100644
Binary files a/assets/images/Ant_Smasher_Demo.png and b/assets/images/Ant_Smasher_Demo.png differ
diff --git a/assets/images/Ant_Smasher_Demo_Final.png b/assets/images/Ant_Smasher_Demo_Final.png
new file mode 100644
index 0000000000..d61c4c82f9
Binary files /dev/null and b/assets/images/Ant_Smasher_Demo_Final.png differ