-
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.
- Loading branch information
1 parent
559d4b0
commit 400af1f
Showing
7 changed files
with
169 additions
and
6 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,23 @@ | ||
| # **Box_In_Air_Game** | ||
|
|
||
| Bow_In_Arrow Game | ||
|
|
||
| <br> | ||
|
|
||
|
|
||
| ## **functionalities 🎮** | ||
| <!-- add functionalities over here --> | ||
| - Bow_In_Arrow is a game implemented using HTML, CSS, and JavaScript. The game is to shoot monsters and save birds. | ||
| <br> | ||
|
|
||
| ## **How to play? 🕹️** | ||
| <!-- add the steps how to play games --> | ||
| - Start the game | ||
| - Move the man with Arrow Keys | ||
| - Shoot arrow with Space Bar | ||
| - +1 for hitting monsters | ||
| - -5 if monsters reaches birds | ||
| - Game Over if score<0 | ||
| - Monsters speed increases each level. | ||
|
|
||
| <br> |
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,22 @@ | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Table Tennis Game</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="game-container"> | ||
| <div class="table"> | ||
| <div class="ball"></div> | ||
| <div class="paddle paddle-left"></div> | ||
| <div class="paddle paddle-right"></div> | ||
| </div> | ||
| <div class="scoreboard"> | ||
| <span id="player1-score">0</span> | ||
| <span id="player2-score">0</span> | ||
| </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,63 @@ | ||
| let ball = document.querySelector('.ball'); | ||
| let paddleLeft = document.querySelector('.paddle-left'); | ||
| let paddleRight = document.querySelector('.paddle-right'); | ||
| let player1Score = document.querySelector('#player1-score'); | ||
| let player2Score = document.querySelector('#player2-score'); | ||
|
|
||
| let ballSpeedX = 4; | ||
| let ballSpeedY = 4; | ||
| let paddleSpeed = 8; | ||
|
|
||
| function moveBall() { | ||
| ball.style.top = `${parseInt(ball.style.top) + ballSpeedY}px`; | ||
| ball.style.left = `${parseInt(ball.style.left) + ballSpeedX}px`; | ||
|
|
||
| if (parseInt(ball.style.top) <= 0 || parseInt(ball.style.top) >= 580) { | ||
| ballSpeedY *= -1; | ||
| } | ||
|
|
||
| if (parseInt(ball.style.left) <= 0 || parseInt(ball.style.left) >= 780) { | ||
| ballSpeedX *= -1; | ||
| } | ||
| if (parseInt(ball.style.left) <= 20 && parseInt(ball.style.top) >= parseInt(paddleLeft.style.top) && parseInt(ball.style.top) <= parseInt(paddleLeft.style.top) + 100) { | ||
| ballSpeedX *= -1; | ||
| } | ||
|
|
||
| if (parseInt(ball.style.left) >= 760 && parseInt(ball.style.top) >= parseInt(paddleRight.style.top) && parseInt(ball.style.top) <= parseInt(paddleRight.style.top) + 100) { | ||
| ballSpeedX *= -1; | ||
| } | ||
| if (parseInt(ball.style.left) <= 0) { | ||
| player2Score.textContent = parseInt(player2Score.textContent) + 1; | ||
| resetBall(); | ||
| } | ||
|
|
||
| if (parseInt(ball.style.left) >= 780) { | ||
| player1Score.textContent = parseInt(player1Score.textContent) + 1; | ||
| resetBall(); | ||
| } | ||
| } | ||
| function movePaddles(event) { | ||
| if (event.key === 'w') { | ||
| paddleLeft.style.top = `${parseInt(paddleLeft.style.top) - paddleSpeed}px`; | ||
| } | ||
|
|
||
| if (event.key === 's') { | ||
| paddleLeft.style.top = `${parseInt(paddleLeft.style.top) + paddleSpeed}px`; | ||
| } | ||
| if (event.key === 'ArrowUp') { | ||
| paddleRight.style.top = `${parseInt(paddleRight.style.top) - paddleSpeed}px`; | ||
| } | ||
|
|
||
| if (event.key === 'ArrowDown') { | ||
| paddleRight.style.top = `${parseInt(paddleRight.style.top) + paddleSpeed}px`; | ||
| } | ||
| } | ||
| function resetBall() { | ||
| ball.style.top = '50%'; | ||
| ball.style.left = '50%'; | ||
| ballSpeedX = 4; | ||
| ballSpeedY = 4; | ||
| } | ||
|
|
||
| document.addEventListener('keydown', movePaddles); | ||
| setInterval(moveBall, 16); |
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,48 @@ | ||
| .game-container { | ||
| width: 800px; | ||
| height: 600px; | ||
| margin: 40px auto; | ||
| background-color: #f0f0f0; | ||
| } | ||
|
|
||
| .table { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: relative; | ||
| background-color: #008000; | ||
| } | ||
|
|
||
| .ball { | ||
| width: 20px; | ||
| height: 20px; | ||
| background-color: #fff; | ||
| border-radius: 50%; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
| .paddle { | ||
| width: 10px; | ||
| height: 100px; | ||
| background-color: #fff; | ||
| position: absolute; | ||
| top: 50%; | ||
| transform: translate(0, -50%); | ||
| } | ||
|
|
||
| .paddle-left { | ||
| left: 10px; | ||
| } | ||
|
|
||
| .paddle-right { | ||
| right: 10px; | ||
| } | ||
| .scoreboard { | ||
| position: absolute; | ||
| top: 10px; | ||
| left: 50%; | ||
| transform: translate(-50%, 0); | ||
| font-size: 24px; | ||
| font-weight: bold; | ||
| } |
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.
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