In this tutorial, we will create a fun and interactive game called "Who Will Lucky Bottle Flip and Win ₹500 Challenge" using HTML tags. This game involves flipping a bottle and trying to make it land upright. The player who lands the bottle upright will win ₹500!
Let’s start by creating the basic structure of our game using HTML tags. First, create an HTML document and name it index.html. Here is the code to set up the basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Who Will Lucky Bottle Flip and Win ₹500 Challenge</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Who Will Lucky Bottle Flip and Win ₹500 Challenge</h1>
<button onclick="flipBottle()">Flip Bottle</button>
<div class="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>In this code snippet, we have included a button that will trigger the flipBottle function when clicked. We have also added a div with the class "result" where we will display the result of the bottle flip.
Next, let’s create the styles for our game in a separate CSS file called styles.css:
.container {
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 1.2rem;
background-color: #3498db;
color: #fff;
border: none;
cursor: pointer;
}
.result {
margin-top: 20px;
font-size: 1.5rem;
}Now, let’s create the JavaScript logic for our game in a separate file called script.js:
function flipBottle() {
const result = Math.random() < 0.5 ? "Congratulations! You win ₹500!" : "Better luck next time!";
document.querySelector('.result').textContent = result;
}In this code snippet, we have defined a flipBottle function that generates a random number between 0 and 1. If the number is less than 0.5, the player wins ₹500. Otherwise, they will have to try again.
Finally, make sure to save all your files (index.html, styles.css, script.js) in the same folder and open the index.html file in a web browser to play the game. Click the "Flip Bottle" button to see if you are the lucky winner of the ₹500 prize!
That’s it! You have successfully created the "Who Will Lucky Bottle Flip and Win ₹500 Challenge" game using HTML tags. Have fun playing and challenging your friends to see who can land the bottle upright and win the prize!
