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

No:42552

←

Prev Next

→

Sandbox
Developer User18906｜Date and time 24/2/12 1:50:58
Build time 14.359 sec｜Game capacity 4.324KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. The game is called "Pictogram Match". It can be played on a smartphone and features pictograms. Feel free to use and modify it to create your own game.

Pictogram Match

Score: 0

To use this game, you'll need to prepare the pictograms as image files (e.g., `emozi_all/game.png`, `emozi_all/pictogram.png`, `emozi_all/pictogram.png`) and place them in the same directory as the HTML file. You can replace these pictograms with your own as needed.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pictogram Match</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
        }
        #score {
            font-size: 18px;
            margin-top: 20px;
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Pictogram Match</h1>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <div id="score">Score: 0</div>

// Game variables
        let score = 0;
        let pictogramSize = 100;
        let pictogramSpeed = 2;
        let pictogramSpawnInterval = 1200;
        let pictograms = [];
        let gameInterval;

// Pictogram class
        class Pictogram {
            constructor(x, y, pictogram) {
                this.x = x;
                this.y = y;
                this.pictogram = pictogram;
            }
            draw() {
                ctx.drawImage(this.pictogram, this.x, this.y, pictogramSize, pictogramSize);
            }
            update() {
                this.y += pictogramSpeed;
                this.draw();
            }
        }

// Load pictogram images
        const catImg = new Image();
        catImg.src = "cat_pictogram.png";
        const dogImg = new Image();
        dogImg.src = "dog_pictogram.png";
        const birdImg = new Image();
        birdImg.src = "bird_pictogram.png";

// Start game
        function startGame() {
            gameInterval = setInterval(() => {
                const x = Math.random() * (canvas.width - pictogramSize);
                const pictogram = Math.floor(Math.random() * 3);
                let img;
                switch (pictogram) {
                    case 0:
                        img = catImg;
                        break;
                    case 1:
                        img = dogImg;
                        break;
                    case 2:
                        img = birdImg;
                        break;
                }
                pictograms.push(new Pictogram(x, 0, img));
            }, pictogramSpawnInterval);
        }

// Update game state
        function updateGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            pictograms.forEach((pictogram, index) => {
                pictogram.update();

// Check if pictogram reached bottom
                if (pictogram.y + pictogramSize > canvas.height) {
                    pictograms.splice(index, 1);
                    score -= 10;
                    updateScore();
                }
            });
        }

// Update the score
        function updateScore() {
            document.getElementById("score").textContent = "Score: " + score;
        }

// Event listener for canvas touch/click
        canvas.addEventListener("click", (event) => {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

pictograms.forEach((pictogram, index) => {
                if (
                    x > pictogram.x &&
                    x < pictogram.x + pictogramSize &&
                    y > pictogram.y &&
                    y < pictogram.y + pictogramSize
                ) {
                    pictograms.splice(index, 1);
                    score += 10;
                    updateScore();
                }
            });
        });

// Start the game and update it iteratively
        startGame();
        setInterval(updateGame, 20);
    </script>
</body>
</html>
```

To use this game, you'll need to prepare the pictograms as image files (e.g., `cat_pictogram.png`, `dog_pictogram.png`, `bird_pictogram.png`) and place them in the same directory as the HTML file. You can replace these pictograms with your own as needed.