Catch emojis by a bag's game

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

No:13306

←

Prev Next

→

Catch emojis by a bag
Developer User5867｜Date and time 23/8/28 1:59:52
Build time 20.581 sec｜Game capacity 4.322KB｜

Script

This HTML file implements a simple "Catch Emojis" game where the player controls a character represented by a black rectangle at the bottom of the canvas, and tries to catch emojis represented by pictograms falling from the top of the canvas using arrow key movements. The goal is to catch all the emojis before any of them hits the bottom of the canvas. When all emojis are caught, a congratulatory message is displayed, and when a missed emoji reaches the bottom, a game over message is displayed. The game is implemented using JavaScript and enclosed within script tags in a single HTML file.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Catch Emojis Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Emojis data
        const emojis = [
            { name: "🍕", x: 50, y: 50, speed: 2 },
            { name: "🌮", x: 150, y: 150, speed: 2 },
            { name: "🍔", x: 250, y: 250, speed: 2 }
        ];

// Player data
        const player = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            width: 50,
            height: 50
        }

// Event listener for player movement
        document.addEventListener("keydown", movePlayer);

// Moves the player based on arrow key input
        function movePlayer(event) {
            const key = event.key;
            if (key === "ArrowLeft" && player.x > 0) {
                player.x -= 10;
            } else if (key === "ArrowRight" && player.x < canvas.width - player.width) {
                player.x += 10;
            }
        }

// Detects collision between player and emojis
        function detectCollision() {
            for (let i = 0; i < emojis.length; i++) {
                const emoji = emojis[i];

if (player.x < emoji.x + emoji.width &&
                    player.x + player.width > emoji.x &&
                    player.y < emoji.y + emoji.height &&
                    player.y + player.height > emoji.y) {
                    emojis.splice(i, 1); // Remove the collided emoji
                    i--;

if (emojis.length === 0) {
                        alert("Congratulations, you caught all the emojis!");
                        resetGame();
                    }
                }
            }
        }

// Clears and redraws the canvas
        function drawCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
            context.fillStyle = "#000";
            context.fillRect(player.x, player.y, player.width, player.height);

// Draw emojis
            context.font = "30px Arial";
            for (let i = 0; i < emojis.length; i++) {
                const emoji = emojis[i];
                context.fillText(emoji.name, emoji.x, emoji.y);
            }
        }

// Updates the position of the emojis
        function updateEmojis() {
            for (let i = 0; i < emojis.length; i++) {
                const emoji = emojis[i];
                emoji.y += emoji.speed;

if (emoji.y > canvas.height) {
                    emojis.splice(i, 1); // Remove the emoji that goes beyond the canvas
                    i--;

if (emojis.length === 0) {
                        alert("Game Over! You missed all the emojis.");
                        resetGame();
                    }
                }
            }
        }

// Resets the game by restoring initial values
        function resetGame() {
            emojis.push(
                { name: "🍕", x: 50, y: 50, speed: 2 },
                { name: "🌮", x: 150, y: 150, speed: 2 },
                { name: "🍔", x: 250, y: 250, speed: 2 }
            );
            player.x = canvas.width / 2;
            player.y = canvas.height - 50;
        }

// Game loop
        function gameLoop() {
            drawCanvas();
            updateEmojis();
            detectCollision();
            requestAnimationFrame(gameLoop);
        }

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