a game about a blue hedgehog who runs fast and collects rings in a open world's game

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

No:36603

←

Prev Next

→

a game about a blue hedgehog who runs fast and col..ALL
Developer User16841｜Date and time 24/1/18 2:22:23
Build time 19.562 sec｜Game capacity 4.787KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Blue Hedgehog Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Game initialization
        function initialize() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

// Update the game state every 30 milliseconds
            setInterval(update, 30);

// Event listeners for touch events
            canvas.addEventListener('touchstart', handleTouchStart);
            canvas.addEventListener('touchmove', handleTouchMove);
            canvas.addEventListener('touchend', handleTouchEnd);
        }

// Update game state
        function update() {
            moveBlueHedgehog();
            moveRing();
            checkCollision();
            drawEverything();
        }

// Move the blue hedgehog based on touch events
        function moveBlueHedgehog() {
            blueHedgehogX += blueHedgehogSpeedX;
            blueHedgehogY += blueHedgehogSpeedY;

// Limit the blue hedgehog's movement within the canvas
            if (blueHedgehogX <= 0) {
                blueHedgehogX = 0;
            }
            if (blueHedgehogX >= canvas.width - 50) {
                blueHedgehogX = canvas.width - 50;
            }
            if (blueHedgehogY <= 0) {
                blueHedgehogY = 0;
            }
            if (blueHedgehogY >= canvas.height - 50) {
                blueHedgehogY = canvas.height - 50;
            }
        }

// Move the ring from right to left
        function moveRing() {
            ringX -= 5;

// Reset the ring position when it goes offscreen
            if (ringX <= -50) {
                ringX = 750;
                ringY = Math.floor(Math.random() * (canvas.height - 50));
                isRingCollected = false;
            }
        }

// Handle touch start event
        function handleTouchStart(event) {
            blueHedgehogSpeedX = 5;
            blueHedgehogSpeedY = 0;
        }

// Handle touch move event
        function handleTouchMove(event) {
            var touchX = event.touches[0].clientX;
            var touchY = event.touches[0].clientY;

// Calculate the distance between touch position and blue hedgehog position
            var deltaX = touchX - blueHedgehogX;
            var deltaY = touchY - blueHedgehogY;

// Change blue hedgehog's speed based on touch direction
            if (Math.abs(deltaX) > Math.abs(deltaY)) {
                blueHedgehogSpeedX = Math.sign(deltaX) * 5;
                blueHedgehogSpeedY = 0;
            } else {
                blueHedgehogSpeedX = 0;
                blueHedgehogSpeedY = Math.sign(deltaY) * 5;
            }
        }

// Handle touch end event
        function handleTouchEnd(event) {
            blueHedgehogSpeedX = 0;
            blueHedgehogSpeedY = 0;
        }

// Check collision between blue hedgehog and ring
        function checkCollision() {
            if (blueHedgehogX < ringX + 40 &&
                blueHedgehogX + 40 > ringX &&
                blueHedgehogY < ringY + 40 &&
                blueHedgehogY + 40 > ringY &&
                !isRingCollected
            ) {
                isRingCollected = true;
                score++;
            }
        }

// Draw the game elements
        function drawEverything() {
            // Clear the canvas
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw blue hedgehog
            canvasContext.fillStyle = 'blue';
            canvasContext.fillRect(blueHedgehogX, blueHedgehogY, 40, 40);

// Draw ring
            if (!isRingCollected) {
                canvasContext.fillStyle = 'yellow';
                canvasContext.beginPath();
                canvasContext.arc(ringX, ringY, 20, 0, Math.PI * 2, true);
                canvasContext.fill();
            }

// Draw score
            canvasContext.font = '20px Arial';
            canvasContext.fillStyle = 'white';
            canvasContext.fillText('Score: ' + score, 10, 30);
        }

// Start the game
        initialize();
    </script>
</body>
</html>