How to Make a Colour Prediction Game

Creating a colour prediction game can be a fun and educational experience. This simple game involves guessing or predicting the colour that will appear next based on some set rules or randomly. Here, we'll guide you through the steps to create a basic colour prediction game using HTML, CSS, and JavaScript.

1. Setting Up Your Environment

First, create an HTML file and name it index.html. This file will hold the basic structure of your game.

2. HTML Structure

Add the following HTML code to your file:

<div id="gameContainer">
    <button id="startButton">Start Game</button>
    <div id="colorDisplay" style="width: 100px; height: 100px; background-color: #fff; border: 1px solid #000;"></div>
    <p>What will be the next color?</p>
    <button onclick="makeGuess('red')">Red</button>
    <button onclick="makeGuess('green')">Green</button>
    <button onclick="makeGuess('blue')">Blue</button>
</div>

3. Adding CSS

Include some basic styling to make your game look better. You can add the following CSS:

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

#gameContainer {
    width: 300px;
    margin: auto;
    text-align: center;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

#colorDisplay {
    margin-bottom: 20px;
}

4. JavaScript Logic

Add JavaScript to provide the functionality of your game. You should define the behavior for starting the game and making guesses. Add the following script:

<script>
    var colors = ['red', 'green', 'blue'];
    var currentColor;

    function startGame() {
        currentColor = colors[Math.floor(Math.random() * colors.length)];
        document.getElementById('colorDisplay').style.backgroundColor = currentColor;
    }

    function makeGuess(color) {
        if (color === currentColor) {
            alert('Correct!');
        } else {
            alert('Wrong, please try again!');
        }
        startGame();
    }
    
    document.getElementById('startButton').onclick = startGame;
</script>

5. Test Your Game

Save your HTML file and open it in a web browser to see how your color prediction game works. Press the "Start Game" button to begin and then make guesses to see if you can predict the next color accurately.

Conclusion

Creating your own color prediction game is not only a great way to learn basic programming concepts but also an excellent tool for mastering HTML, CSS, and JavaScript. Feel free to expand upon this basic version, perhaps by adding more colors or creating a scoring system!