Create Spin the Bottle Game: HTML/CSS/JS Guide

As a web developer, I enjoy creating projects that combine both fun and learning. One of the projects I recently worked on is a "Spin the Bottle" simulator, which is a simple interactive web game using HTML, CSS, and JavaScript. In this post, I’ll guide you step-by-step on how I built this project, explaining the purpose of each line of code and how it all works together. Whether you’re a beginner or just looking to refresh your skills, this project will help you get comfortable with basic web development concepts.

What Is "Spin the Bottle"?

If you're unfamiliar with the classic game, "Spin the Bottle" is a popular party game where players sit in a circle, and one person spins a bottle on the ground. The person the bottle points to is the next person to do something, like answering a question or performing a dare. For our version, we’re going to simulate that bottle spinning with just a button click.

Step 1: Setting Up the Basic HTML Structure

HTML (Hypertext Markup Language) is the language used to create the structure of web pages. It tells the browser what to display on the screen. For this project, we need:

An image of a bottle that will rotate when the button is clicked.
A button to trigger the spin action.

Here's the basic structure of the HTML file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spin the Bottle Simulator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <img id="bottle" src="bottle.png" alt="Bottle" />
    <button id="spinButton">Spin</button>
  </div>
  <script src="app.js"></script>
</body>
</html>

💡

Explanation

The <html> tag indicates the start of an HTML document.

The <head> section contains metadata like the character set (UTF-8) and viewport settings (for responsive design).
The <body> contains the actual content displayed on the page:
- <img> tag represents the image of the bottle (bottle.png). This is the image that will rotate when clicked.
- <button> tag creates the button that users will click to spin the bottle.
We also link to an external CSS file (styles.css) for styling the page and a JavaScript file (app.js) for adding functionality to the spin button.

Step 2: Styling with CSS

CSS (Cascading Style Sheets) is used to control the layout and appearance of elements on the page. It allows you to make your page look nice.

Here’s how I styled the bottle and the button

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

#bottle {
    width: 100%;
    height: 50vh;
    transition: transform 2s ease-out;
}

#spinButton {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

💡

Explanation

body: We use Flexbox to center everything both vertically and horizontally. This means the bottle and the button will always be centered on the screen, no matter the screen size.
- justify-content: center and align-items: center align the content horizontally and vertically.
- height: 100vh makes the page take up the full height of the viewport (the visible part of the browser).
- background-color: #f0f0f0 sets a light gray background color for the page.
.container: This class centers the text inside the container.
#bottle: The bottle image is given a flexible width (100% of its container) and a height of 50% of the viewport height.
- transition: transform 2s ease-out adds a smooth animation when the bottle rotates. The bottle will rotate over a period of 2 seconds with a "slow start, fast end" effect (ease-out).
#spinButton: The spin button is styled to look bigger and easier to click. It has padding for spacing, a larger font size, and a pointer cursor that shows up when you hover over the button, indicating it's clickable.

Step 3: Making the Bottle Spin with JavaScript

JavaScript is the programming language used to add interactivity to a webpage. It allows us to control how things behave on the page. In this project, JavaScript is responsible for rotating the bottle when the user clicks the "Spin" button.

// Select the HTML elements
const bottle = document.getElementById("bottle");
const spinButton = document.getElementById("spinButton");

// Initialize current rotation angle
let currentRotation = 0;

// Function to spin the bottle clockwise on every click
function spinBottle() {
  // Generate a random increment between 720 and 1440 degrees
  const rotationIncrement = Math.floor(720 + Math.random() * 720);

  // Update the total rotation by adding the increment
  currentRotation += rotationIncrement;

  // Apply the new rotation to the bottle
  bottle.style.transform = `rotate(${currentRotation}deg)`;
}

// Add a click event listener to the button
spinButton.addEventListener("click", spinBottle);

💡

Explanation

Selecting HTML elements: We use document.getElementById() to get references to the bottle and button. This allows us to manipulate these elements later in the code.
- const bottle = document.getElementById("bottle") grabs the image of the bottle.
- const spinButton = document.getElementById("spinButton") grabs the button.
Tracking Rotation: We keep track of the bottle’s current rotation using the currentRotation variable. This ensures that each spin adds to the previous rotation, making the bottle spin continuously rather than resetting back to 0 degrees.
Random Rotation: Every time the button is clicked, we generate a random number between 720 and 1440 degrees. This ensures that each spin feels different and random.
- Math.floor(720 + Math.random() * 720) generates a random number between 720 and 1440.
Applying Rotation: To actually rotate the bottle, we use bottle.style.transform = 'rotate(' + currentRotation + 'deg)', which applies the calculated rotation to the bottle using CSS. This line tells the browser to rotate the image based on the value of currentRotation.
Event Listener: spinButton.addEventListener("click", spinBottle) makes the spinBottle() function run whenever the button is clicked.

Conclusion: What We’ve Learnt

This simple "Spin the Bottle" simulator is a great way to get hands-on experience with web development. We’ve learnt how to:

Structure a webpage using HTML.
Style elements with CSS for layout and animations.
Use JavaScript to make things interactive and dynamic.

By combining these three technologies—HTML, CSS, and JavaScript—you can build interactive websites and games like this one. And the best part? You can take this project further by adding new features, like sound effects, multiple bottle images, or a scoring system.

Feel free to try out the project on your own, and if you have any questions or suggestions, leave them in the comments below!

https://www.youtube.com/watch?v=BoqxNeqWFA0

Step-by-Step Guide to Making a Spin the Bottle Game with HTML, CSS, and JavaScript

Table of contents

What Is "Spin the Bottle"?

Step 1: Setting Up the Basic HTML Structure

Step 2: Styling with CSS

Step 3: Making the Bottle Spin with JavaScript

Conclusion: What We’ve Learnt