6 colour total, its blinking randomly, Colour name shows display, we touch the colour's game

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

No:37262

←

Prev Next

→

6 colour total, its blinking randomly, Colour name..ALL
Developer User17050｜Date and time 24/1/20 23:57:20
Build time 9.295 sec｜Game capacity 2.619KB｜

Script

Sure, here's a simple game that meets your requirements:

Click the Color!

This game will display a randomly blinking color on the canvas. You need to touch the canvas on the displayed color to see if it matches the color name displayed above. A message will appear indicating whether you touched the correct color or not. Note: Pictograms are not used in this implementation. However, you can replace the color names with pictograms if you have the pictogram images and modify the code accordingly.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure, here's a simple game that meets your requirements:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Color Touch Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 20%;
        }
        #colorDisplay {
            font-size: 40px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="colorDisplay">Click the Color!</div>
    <canvas id="gameCanvas" width="300" height="300"></canvas>
    
    <script>
        // List of colors
        var colors = ["red", "green", "blue", "yellow", "orange", "purple"];
        var currentColor = "";
        
        // Get the game canvas
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");
        
        // Function to generate random blinking colors
        function blinkColors() {
            var colorIndex = Math.floor(Math.random() * colors.length);
            currentColor = colors[colorIndex];
            context.fillStyle = currentColor;
            context.fillRect(0, 0, canvas.width, canvas.height);
            
            setTimeout(function() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                setTimeout(blinkColors, 500);
            }, 500);
        }
        
        // Start the game
        blinkColors();
        
        // Function to handle touch events
        canvas.addEventListener("click", function(event) {
            var rect = canvas.getBoundingClientRect();
            var xPos = event.clientX - rect.left;
            var yPos = event.clientY - rect.top;
            
            var pixelData = context.getImageData(xPos, yPos, 1, 1).data;
            var touchedColor = "rgb(" + pixelData[0] + "," + pixelData[1] + "," + pixelData[2] + ")";
            
            if (touchedColor === currentColor) {
                alert("Correct! You touched the right color.");
            } else {
                alert("Oops! You touched the wrong color. Try again.");
            }
        });
    </script>
</body>
</html>
```

Note: Pictograms are not used in this implementation. However, you can replace the color names with pictograms if you have the pictogram images and modify the code accordingly.