Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Beyblade Game Enhanced : Added many features, Nav Bar, a note on How to Play, Stadium and many more!! #4781

Merged
merged 4 commits into from
Jul 14, 2024
Merged

Beyblade Game Enhanced : Added many features, Nav Bar, a note on How to Play, Stadium and many more!! #4781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8e3cc37
Add files via upload
KomalMaurya Jul 9, 2024
24ec50e
Image
KomalMaurya Jul 9, 2024
74027e7
Image Update
KomalMaurya Jul 9, 2024
1906519
Update Webpage Image
KomalMaurya Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Games/Beyblade/3D Stadium.glb
View file
Open in desktop
Binary file not shown.
Binary file added Games/Beyblade/BB-LOGO.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 35 additions & 35 deletions Games/Beyblade/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
# **Beyblade**

<br>

## **Description 📃**
<!-- add your game description here -->
- This Beyblade game is developed using HTML, CSS, and JavaScript.
The game will simulate a spinning battle between two Beyblades, where players can launch their Beyblades and compete to earn a high score and determine the winner.

## **functionalities 🎮**
<!-- add functionalities over here -->
1. Players can choose their Beyblade from a variety of options, each with unique characteristics and abilities.
2. Players can launch their Beyblade into the battle arena by clicking a launch button.
3. The Beyblade will spin continuously after being launched, creating an engaging visual effect.
4. The game will keep track of each player's score based on the performance of their Beyblade during the battle.
5. Each Beyblade will have a stamina value that decreases over time.
6. The game will end when a Beyblade's stamina reaches zero.
7. The game is be designed to work on various screen sizes and devices, ensuring a seamless gaming experience.
<br>

## **How to play? 🕹️**
<!-- add the steps how to play games -->
- To play the Beyblade game, click the "Player 1 Launch" button to launch Player 1's Beyblade, then wait for it to stop spinning and see if there's a collision, with the scores and stamina updated accordingly.

<br>

## **Screenshots 📸**

<br>
<!-- add your screenshots like this -->
<!-- ![image](url) -->
<img width="960" alt="Screenshot 2023-07-02 172036" src="https://github.com/abhinav-m22/GameZone/assets/113239388/deeab107-9267-44c2-92a2-3397ae59905e">
<img width="960" alt="Screenshot 2023-07-02 172053" src="https://github.com/abhinav-m22/GameZone/assets/113239388/e1ac281a-dc7c-4dc4-b864-ffef0b56343e">

<br>
# **Beyblade**
<br>
## **Description 📃**
<!-- add your game description here -->
- This Beyblade game is developed using HTML, CSS, and JavaScript.
The game will simulate a spinning battle between two Beyblades, where players can launch their Beyblades and compete to earn a high score and determine the winner.
## **functionalities 🎮**
<!-- add functionalities over here -->
1. Players can choose their Beyblade from a variety of options, each with unique characteristics and abilities.
2. Players can launch their Beyblade into the battle arena by clicking a launch button.
3. The Beyblade will spin continuously after being launched, creating an engaging visual effect.
4. The game will keep track of each player's score based on the performance of their Beyblade during the battle.
5. Each Beyblade will have a stamina value that decreases over time.
6. The game will end when a Beyblade's stamina reaches zero.
7. The game is be designed to work on various screen sizes and devices, ensuring a seamless gaming experience.
<br>
## **How to play? 🕹️**
<!-- add the steps how to play games -->
- To play the Beyblade game, read the note written by clicking on "How to Play?" and then Click on "Play now" button then click the "Player 1 Launch" and "Player 2 Launch" button to launch Player 1's & 2's Beyblade, then wait for it to stop spinning and see if there's a collision, with the scores and stamina updated accordingly.
<br>
## **Screenshots 📸**
<br>
<!-- add your screenshots like this -->
<!-- ![image](url) -->
<img width="960" alt="Screenshot 2023-07-02 172036" src="https://github.com/KomalMaurya/GameZone/blob/Beyblade/Games/Beyblade/assets/Webpage.png">
<br>
Binary file added Games/Beyblade/assets/Webpage.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Beyblade/assets/b1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Beyblade/assets/b2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Beyblade/assets/bey1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Beyblade/assets/bey2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 65 additions & 30 deletions Games/Beyblade/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,66 @@
<!DOCTYPE html>
<html>

<head>
<title>Beyblade Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1>Beyblade Game</h1>
<div id="game-container">
<div id="player1">
<h2>Player 1</h2>
<button onclick="launchBlade(1)">Launch</button>
<p>Score: <span id="score1">0</span></p>
<p>Stamina: <span id="stamina1">100</span></p>
<img id="blade1" src="./assets/beyblade-1.jpg" alt="Blade 1">
</div>
<div id="player2">
<h2>Player 2</h2>
<button onclick="launchBlade(2)">Launch</button>
<p>Score: <span id="score2">0</span></p>
<p>Stamina: <span id="stamina2">100</span></p>
<img id="blade2" src="./assets/beyblade-2.jpg" alt="Blade 2">
</div>
</div>

<script src="script.js"></script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beyblade Game</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
<div class="container">
<header>
<ul class="navbar">
<div class="logo">
<img src="BB-LOGO.png" alt="">
</div>
<li><a href="https://kunjgit.github.io/GameZone/" class="active"><i class="fa-solid fa-house"></i>Home</a></li>
<li><a href="#Stadium" class="active">Stadium</a></li>
<li><button class="active" onclick="openPopup()">How to Play?</button></li>
<div class="popup" id="popup">
<i class="fa-solid fa-gamepad"></i>
<h2 style="color: black;">To Play :</h2>
<p>Click on "Play Button" & "Launch" and if Stamina becomes zero, the winner will be decided by whose score is high!</p>
<button type="button" onclick="closePopup()">OK</button>
</div>
</ul>
<button type="button" id="btn" onclick="hideShow()"><i class="fa-solid fa-play">PLAY NOW</i></button>
</header>
<div id="game-container">
<div id="player1">
<h2>Player 1</h2>
<button onclick="launchBlade(1)">Launch</button>
<p>Score: <span id="score1">0</span></p>
<p>Stamina: <span id="stamina1">100</span></p>
<img src="./assets/b1.jpg" alt="Blade 1" class="blader1">
</div>
<div id="container3D">
<div id="game-timer"></div>
<div class="circle1 img-bey" id="hide">
<!-- <div class="box1"></div> -->
<img src="assets/bey2.jpg" alt="" id="blade2">
<div class="circle2">
<!-- <div class="box2"></div> -->
<img src="assets/bey1.png" alt="" id="blade1">
</div>
</div>
</div>
<div id="player2">
<h2>Player 2</h2>
<button onclick="launchBlade(2)">Launch</button>
<p>Score: <span id="score2">0</span></p>
<p>Stamina: <span id="stamina2">100</span></p>
<img src="./assets/b2.png" alt="Blade 2" class="blader2">
</div>
</div>
</div>
<div id="Stadium">
<center><h2>3D Beyblade Stadium</h2></center>
<model-viewer src="3D Stadium.glb" alt="A 3D model" auto-rotate camera-controls class="model"></model-viewer>
</div>
<script src="script1.js"></script>
<script src="script.js"></script>

</body>
</html>
Loading
Loading