AI game creator

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

No:12845

112

←

Prev Next

→

Pien runner
Developer User5583｜Date and time 23/8/23 23:28:29
Build time 41.809 sec｜Game capacity 3.768KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pien Runner Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// Pictogram images
        const pienImage = new Image();
        pienImage.src = "path/to/pien/image.png";
        const obstacleImage = new Image();
        obstacleImage.src = "path/to/obstacle/image.png";

// Game variables
        let playerX = canvas.width / 2;
        let playerY = canvas.height - 80;
        let playerSpeedX = 5;
        let obstacles = [];
        let score = 0;
        let isGameOver = false;

// Event listeners for smartphone operation
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchmove", handleTouchMove, false);
        canvas.addEventListener("touchend", handleTouchEnd, false);

// Handle touch events for moving the player
        let touchStartX, touchEndX;
        function handleTouchStart(event) {
            touchStartX = event.touches[0].clientX;
        }
        function handleTouchMove(event) {
            touchEndX = event.touches[0].clientX;
        }
        function handleTouchEnd() {
            if (touchStartX - touchEndX > 5) {
                playerX -= playerSpeedX;
            } else if (touchEndX - touchStartX > 5) {
                playerX += playerSpeedX;
            }
        }

// Function to create a random obstacle
        function createObstacle() {
            const obstacle = {
                x: Math.random() * (canvas.width - 50),
                y: -50,
                width: 50,
                height: 50,
                speedY: 4
            };
            obstacles.push(obstacle);
        }

// Function to draw the player
        function drawPlayer() {
            context.drawImage(pienImage, playerX, playerY, 50, 50);
        }

// Function to draw obstacles
        function drawObstacles() {
            obstacles.forEach(obstacle => {
                context.drawImage(obstacleImage, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
            });
        }

// Function to update game state
        function update() {
            if (isGameOver) return;

context.clearRect(0, 0, canvas.width, canvas.height);

// Move player based on touch input
            if (touchEndX - touchStartX > 5) {
                playerX += playerSpeedX;
            } else if (touchStartX - touchEndX > 5) {
                playerX -= playerSpeedX;
            }

drawPlayer();

// Check for collision with obstacles
            obstacles.forEach(obstacle => {
                obstacle.y += obstacle.speedY;

if (
                    playerX < obstacle.x + obstacle.width &&
                    playerX + 50 > obstacle.x &&
                    playerY < obstacle.y + obstacle.height &&
                    playerY + 50 > obstacle.y
                ) {
                    isGameOver = true;
                }

if (obstacle.y > canvas.height) {
                    score++;
                    obstacles.splice(obstacles.indexOf(obstacle), 1);
                }
            });

drawObstacles();

// Display score
            context.font = "20px Arial";
            context.fillStyle = "black";
            context.fillText("Score: " + score, 20, 30);

// Create new obstacles
            if (Math.random() < 0.02) {
                createObstacle();
            }

requestAnimationFrame(update);
        }

update();
    </script>
</body>
</html>