AI game creator

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

No:23305

←

Prev Next

→

particle
Developer User9989｜Date and time 23/10/29 20:13:59
Build time 52.04 sec｜Game capacity 2.986KB｜

Script

Sure! Here's an example of a simple game implemented in a single HTML file using JavaScript and enclosed in script tags:

This game displays a random pictogram in the center of the canvas. The player earns a point by clicking on the pictogram accurately. The score is displayed on the console. The game cycles through different pictograms at regular intervals, and players can play the game by clicking on the correct ones.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's an example of a simple game implemented in a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pictogram Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // Get the canvas element
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

// Define pictogram images (you can add more if needed)
        var pictograms = [
            "🌞", "🌈", "🎨", "🏀", "🎵", "📚"
        ];

// Set the initial score
        var score = 0;

// Function to start the game
        function startGame() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Generate a random index to select a pictogram from the array
            var randomIndex = Math.floor(Math.random() * pictograms.length);
            var selectedPictogram = pictograms[randomIndex];

// Set the font style and size
            context.font = "48px Arial";

// Calculate the x and y position to center the pictogram on the canvas
            var x = (canvas.width / 2) - (context.measureText(selectedPictogram).width / 2);
            var y = (canvas.height / 2) + (48 / 2);

// Draw the pictogram on the canvas
            context.fillText(selectedPictogram, x, y);

// Add a click event listener to the canvas
            canvas.addEventListener("click", handleClick);
        }

// Function to handle the click event
        function handleClick(event) {
            // Get the clicked position
            var rect = canvas.getBoundingClientRect();
            var clickX = event.clientX - rect.left;
            var clickY = event.clientY - rect.top;

// Check if the click position is within the bounds of the pictogram
            if (
                clickX >= ((canvas.width / 2) - (context.measureText(selectedPictogram).width / 2)) &&
                clickX <= ((canvas.width / 2) + (context.measureText(selectedPictogram).width / 2)) &&
                clickY >= ((canvas.height / 2) - 48) &&
                clickY <= ((canvas.height / 2))
            ) {
                // Increase the score
                score++;
            }

// Remove the click event listener from the canvas
            canvas.removeEventListener("click", handleClick);

// Start the game again after 1 second
            setTimeout(startGame, 1000);
        }

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