Adding Menus and Shop Systems to Your Ball Shooter Game

 Introduction

In this part of the tutorial, we will take the Ball Shooter Game to the next level by adding essential game components like a menu system and a shop. The menu will provide options to start a new game, access the shop, or quit. The shop will allow players to purchase new beam shapes and other in-game features.

By the end of this post, you’ll have a functional menu and shop system integrated into your game. So, let’s dive in!

1. Adding a Menu System

First, we’ll create a basic menu that will include buttons to start the game, go to the shop, and exit. We’ll be using HTML, CSS, and JavaScript to build this.

HTML

Let’s start by creating a simple menu in the HTML file.

HTML
<div id="menu" class="menu">
    <h1>Ball Shooter Game</h1>
    <button onclick="startGame()">Start New Game</button>
    <button onclick="openShop()">Shop</button>
    <button onclick="quitGame()">Quit</button>
</div>

This creates the structure of the menu. The buttons have different onclick events that will be handled in JavaScript.

CSS

Next, we’ll add some basic styling to make the menu look appealing.

css

.menu {
    text-align: center;
    background-color: #2c3e50;
    color: white;
    padding: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.menu button {
    background-color: #3498db;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    margin: 20px;
    cursor: pointer;
}

.menu button:hover {
    background-color: #2980b9;
}

This makes the menu center on the screen with buttons styled for a better user experience.

JavaScript

Now, let’s add functionality to show the menu and handle the buttons.

javascript

function showMenu() {
    document.getElementById('menu').style.display = 'block';
}

function startGame() {
    document.getElementById('menu').style.display = 'none';
    // Add game-starting logic here
}

function openShop() {
    document.getElementById('menu').style.display = 'none';
    document.getElementById('shop').style.display = 'block';
}

function quitGame() {
    if (confirm('Are you sure you want to quit?')) {
        window.close();
    }
}

2. Creating the Shop

Now let’s build the shop where players can purchase new beam shapes and upgrades. The shop will be implemented similarly to the menu.

HTML

<div id="shop" class="shop">
    <h1>Shop</h1>
    <p>Points Available: <span id="points">0</span></p>
    <button onclick="purchase('round')">Buy Round Beam - 5 points</button>
    <button onclick="purchase('star')">Buy Star Beam - 10 points</button>
    <button onclick="purchase('square')">Buy Square Beam - 15 points</button>
    <button onclick="closeShop()">Back to Menu</button>
</div>

CSS

.shop {
    text-align: center;
    background-color: #34495e;
    color: white;
    padding: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.shop button {
    background-color: #2ecc71;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    margin: 20px;
    cursor: pointer;
}

.shop button:hover {
    background-color: #27ae60;
}

javascript

let points = 0; // This will store the player's available points

function purchase(item) {
    let cost = 0;
    if (item === 'round') cost = 5;
    else if (item === 'star') cost = 10;
    else if (item === 'square') cost = 15;

    if (points >= cost) {
        points -= cost;
        document.getElementById('points').innerText = points;
        alert(`You bought a ${item} beam!`);
    } else {
        alert("Not enough points!");
    }
}

function closeShop() {
    document.getElementById('shop').style.display = 'none';
    showMenu();
}

3. Updating Points

We need a point system for in-game purchases. You may already have a basic points system, but here’s how you can update it to work with your shop.

javascript
function updatePoints(score) {
    points += Math.floor(score / 500);  // Earn 5 points every 500 game points
    document.getElementById('points').innerText = points;
}

This allows the player to earn points based on their in-game performance. You can adjust the rate at which points are earned as necessary.

4. Saving Points Between Sessions

We can use the browser’s localStorage to save the player's points between game sessions.

javascript

// Load saved points on page load
window.onload = function() {
    points = parseInt(localStorage.getItem('points')) || 0;
    document.getElementById('points').innerText = points;
}

// Save points when the player leaves the game
window.onbeforeunload = function() {
    localStorage.setItem('points', points);
}

This will load and save the points every time the game is opened or closed, allowing the player to retain their points for future sessions.

Conclusion

You now have a working menu system and shop in your Ball Shooter Game. The player can start a new game, purchase upgrades, and even retain their points across sessions! In the next tutorial, we’ll focus on adding animations to the menu buttons and shop items for a polished look and feel.

Stay tuned for more updates, and happy coding!

---

Next Steps:
In the following tutorial, we'll animate the menu and shop for a more interactive experience