Click here for free DL of the app version that can save data.

No:34076

103

Make a colour prediction game
Developer User16033｜Date and time 24/1/8 4:26:46
Build time 26.179 sec｜Game capacity 3.262KB｜

Sure! Here's an example of a color prediction game implemented as a single HTML file using JavaScript. The game will randomly generate a color and you have to predict if it will be closer to red or blue. Let's get started:

Color Prediction Game

Explanation: 1. The HTML file contains a color box and a result text area. 2. The `generateColor()` function generates a random RGB color using `Math.random()` and returns it as a string. 3. The `checkPrediction(color)` function checks if the generated color is closer to red or blue by comparing the differences between the red (R) and blue (B) values of the color. It returns either "red", "blue", or "equal" based on the comparison result. 4. The `updateGame()` function calls `generateColor()` to get a new color and sets it as the background color of the color box. It also calls `checkPrediction(color)` to determine the prediction and updates the result text accordingly. 5. The last line of the script starts the game by calling `updateGame()`. To play the game, simply open the HTML file in a web browser. The color box will display a random color on each refresh, and the result will indicate if the color is closer to red or blue. Please note that this is just a basic example, and you can modify the styling or add more features to enhance the game according to your preferences.

→ 　

0　

0　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

Sure! Here's an example of a color prediction game implemented as a single HTML file using JavaScript. The game will randomly generate a color and you have to predict if it will be closer to red or blue. Let's get started:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Color Prediction Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        
        #color-box {
            width: 200px;
            height: 200px;
            margin: 30px auto;
            border: 2px solid black;
        }
        
        #result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Color Prediction Game</h1>
    
    <div id="color-box"></div>
    <div id="result"></div>

<script>
        // Generate a random color
        function generateColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + ", " + g + ", " + b + ")";
        }

// Check if the generated color is closer to red or blue
        function checkPrediction(color) {
            var rgbValues = color.slice(4, -1).split(", ");
            var redDiff = Math.abs(parseInt(rgbValues[0]) - 255);
            var blueDiff = Math.abs(parseInt(rgbValues[2]) - 255);

if (redDiff < blueDiff) {
                return "red";
            } else if (blueDiff < redDiff) {
                return "blue";
            } else {
                return "equal";
            }
        }

// Update the color box and result based on prediction
        function updateGame() {
            var color = generateColor();
            var colorBox = document.getElementById("color-box");
            colorBox.style.backgroundColor = color;
            var prediction = checkPrediction(color);
            var result = document.getElementById("result");
            result.textContent = "Color is closer to: " + prediction;
        }

// Start the game
        updateGame();
    </script>
</body>
</html>
```

Explanation:

1. The HTML file contains a color box and a result text area.
2. The `generateColor()` function generates a random RGB color using `Math.random()` and returns it as a string.
3. The `checkPrediction(color)` function checks if the generated color is closer to red or blue by comparing the differences between the red (R) and blue (B) values of the color. It returns either "red", "blue", or "equal" based on the comparison result.
4. The `updateGame()` function calls `generateColor()` to get a new color and sets it as the background color of the color box. It also calls `checkPrediction(color)` to determine the prediction and updates the result text accordingly.
5. The last line of the script starts the game by calling `updateGame()`.

To play the game, simply open the HTML file in a web browser. The color box will display a random color on each refresh, and the result will indicate if the color is closer to red or blue.

Please note that this is just a basic example, and you can modify the styling or add more features to enhance the game according to your preferences.