A game where the player are a human emoji and must collect coin as much as possible while running from a ghost emoji to move the human emoji the player must drag a joystick and the ghost emoji are following the human emoji the human and the ghost emoji not moving too fast and when the ghost emoji touch the human emoji the game restart's game

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

No:10362

←

Prev Next

→

A game where the player are a human emoji and must..ALL
Developer User4535｜Date and time 23/7/30 19:22:46
Build time 28.511 sec｜Game capacity 3.953KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Emoji Chase!</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Get the Canvas element and its context
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        // Emoji images
        const humanEmoji = new Image();
        humanEmoji.src = "human.png";
        const ghostEmoji = new Image();
        ghostEmoji.src = "ghost.png";
        const coinEmoji = new Image();
        coinEmoji.src = "coin.png";
        
        // Game objects
        let human = { x: 200, y: 200, width: 50, height: 50 };
        let ghost = { x: 100, y: 100, width: 50, height: 50, speed: 1 };
        let coin = { x: Math.random() * 350 + 25, y: Math.random() * 350 + 25, width: 25, height: 25, collected: false };
        
        // Joystick variables
        let isJoystickActive = false;
        let joystickX = 0;
        let joystickY = 0;
        
        // Event listeners for joystick movement
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchmove", handleTouchMove, false);
        canvas.addEventListener("touchend", handleTouchEnd, false);
        
        function handleTouchStart(e) {
            isJoystickActive = true;
            joystickX = e.touches[0].clientX;
            joystickY = e.touches[0].clientY;
        }
        
        function handleTouchMove(e) {
            if (isJoystickActive) {
                const diffX = e.touches[0].clientX - joystickX;
                const diffY = e.touches[0].clientY - joystickY;
                human.x += diffX * 0.1; // Adjust joystick sensitivity here
                human.y += diffY * 0.1;
                joystickX = e.touches[0].clientX;
                joystickY = e.touches[0].clientY;
            }
        }
        
        function handleTouchEnd() {
            isJoystickActive = false;
        }
        
        function update() {
            if (!coin.collected) {
                if (human.x < coin.x + coin.width &&
                    human.x + human.width > coin.x &&
                    human.y < coin.y + coin.height &&
                    human.y + human.height > coin.y
                ) {
                    coin.collected = true;
                }
            }
            
            if (human.x < ghost.x + ghost.width &&
                human.x + human.width > ghost.x &&
                human.y < ghost.y + ghost.height &&
                human.y + human.height > ghost.y
            ) {
                resetGame();
            }
            
            ghost.x += (human.x - ghost.x) * ghost.speed * 0.01; // Adjust ghost speed here
            ghost.y += (human.y - ghost.y) * ghost.speed * 0.01;
            
            draw();
            
            requestAnimationFrame(update);
        }
        
        function draw() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw human Emoji
            ctx.drawImage(humanEmoji, human.x, human.y, human.width, human.height);
            
            // Draw ghost Emoji
            ctx.drawImage(ghostEmoji, ghost.x, ghost.y, ghost.width, ghost.height);
            
            // Draw coin Emoji if it is not yet collected
            if (!coin.collected) {
                ctx.drawImage(coinEmoji, coin.x, coin.y, coin.width, coin.height);
            }
        }
        
        function resetGame() {
            human.x = 200;
            human.y = 200;
            coin.x = Math.random() * 350 + 25;
            coin.y = Math.random() * 350 + 25;
            coin.collected = false;
        }
        
        update();
    </script>
</body>
</html>