-
Notifications
You must be signed in to change notification settings - Fork 839
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4554 from mukilan2815/main
Ant Smasher game
- Loading branch information
Showing
8 changed files
with
231 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # **Game_Name** | ||
|
|
||
| Ant Smasher | ||
|
|
||
| ## **Description 📃** | ||
|
|
||
| Frontend game developed using HTML, CSS, JavaScript. Player has to kill all the Ants | ||
|
|
||
| ## **functionalities 🎮** | ||
|
|
||
| - Player has to kill all the Ants by Smashing it. | ||
|
|
||
| ## **How to play? 🕹️** | ||
|
|
||
| - Click the Start button to start the game | ||
| - When players hits the ant the score will get increased. | ||
|
|
||
| ## **Screenshots 📸** | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Ant Smasher Game</title> | ||
| <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1>Ant Smasher<span class="score">0</span></h1> | ||
| <button onClick="startGame()" style="float:right;">Start</button> | ||
|
|
||
| <div class="game"> | ||
| <div class="hole hole1"> | ||
| <div class="mole"></div> | ||
| </div> | ||
| <div class="hole hole2"> | ||
| <div class="mole"></div> | ||
| </div> | ||
| <div class="hole hole3"> | ||
| <div class="mole"></div> | ||
| </div> | ||
| <div class="hole hole4"> | ||
| <div class="mole"></div> | ||
| </div> | ||
| <div class="hole hole5"> | ||
| <div class="mole"></div> | ||
| </div> | ||
| <div class="hole hole6"> | ||
| <div class="mole"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| const holes = document.querySelectorAll(".hole"); | ||
| const scoreBoard = document.querySelector(".score"); | ||
| const moles = document.querySelectorAll(".mole"); | ||
| let lastHole; | ||
| let timeUp = false; | ||
| let score = 0; | ||
|
|
||
| function randomTime(min, max) { | ||
| return Math.round(Math.random() * (max - min) + min); | ||
| } | ||
|
|
||
| function randomHole(holes) { | ||
| const idx = Math.floor(Math.random() * holes.length); | ||
| const hole = holes[idx]; | ||
| if (hole === lastHole) { | ||
| return randomHole(holes); | ||
| } | ||
| lastHole = hole; | ||
| return hole; | ||
| } | ||
|
|
||
| function peep() { | ||
| const time = randomTime(500, 2000); | ||
| const hole = randomHole(holes); | ||
| hole.classList.add("up"); | ||
| setTimeout(() => { | ||
| hole.classList.remove("up"); | ||
| if (!timeUp) peep(); | ||
| }, time); | ||
| } | ||
|
|
||
| function startGame() { | ||
| scoreBoard.textContent = 0; | ||
| timeUp = false; | ||
| score = 0; | ||
| peep(); | ||
| setTimeout(() => (timeUp = true), 10000); | ||
| } | ||
|
|
||
| function bonk(e) { | ||
| if (!e.isTrusted) return; // cheater! | ||
| score++; | ||
| this.parentNode.classList.remove("up"); | ||
| scoreBoard.textContent = score; | ||
| } | ||
|
|
||
| moles.forEach((mole) => mole.addEventListener("click", bonk)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| html { | ||
| box-sizing: border-box; | ||
| font-size: 10px; | ||
| background: #9b7653; | ||
| } | ||
|
|
||
| *, | ||
| *:before, | ||
| *:after { | ||
| box-sizing: inherit; | ||
| } | ||
|
|
||
| body { | ||
| padding: 0; | ||
| margin: 0; | ||
| font-family: "Amatic SC", cursive; | ||
| } | ||
|
|
||
| h1 { | ||
| text-align: center; | ||
| font-size: 10rem; | ||
| line-height: 1; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .score { | ||
| background: rgba(255, 255, 255, 0.2); | ||
| padding: 0 3rem; | ||
| line-height: 1; | ||
| border-radius: 1rem; | ||
| } | ||
|
|
||
| .game { | ||
| width: 600px; | ||
| height: 400px; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .hole { | ||
| flex: 1 0 33.33%; | ||
| overflow: hidden; | ||
| position: relative; | ||
| } | ||
|
|
||
| .hole:after { | ||
| display: block; | ||
| background: url(../../assets/images/Ant_Smasher_dirt.svg) bottom center | ||
| no-repeat; | ||
| background-size: contain; | ||
| content: ""; | ||
| width: 100%; | ||
| height: 70px; | ||
| position: absolute; | ||
| z-index: 2; | ||
| bottom: -30px; | ||
| } | ||
|
|
||
| .mole { | ||
| background: url("../../assets/images/Ant_Smasher.png") bottom center no-repeat; | ||
| background-size: 60%; | ||
| position: absolute; | ||
| top: 100%; | ||
| width: 100%; | ||
| height: 100%; | ||
| transition: all 0.4s; | ||
| } | ||
|
|
||
| .hole.up .mole { | ||
| top: 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.