AI game creator

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

No:30376

107

←

Prev Next

→

Obstacle course
Developer User14751｜Date and time 23/12/21 9:53:42
Build time 22.408 sec｜Game capacity 3.873KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
    <title>Obstacle Course</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

#game-canvas {
            border: 1px solid #000;
        }

#player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #ff3333;
        }

.obstacle {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #3333ff;
        }
    </style>
</head>

// Set up canvas
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');

// Player Properties
        const playerSize = 50;
        let playerX = canvas.width / 2 - playerSize / 2;
        let playerY = canvas.height - playerSize;
        let playerSpeed = 5;

// Obstacle Properties
        const obstacleSize = 50;
        let obstacleX = canvas.width / 2 - obstacleSize / 2;
        let obstacleY = 0;
        let obstacleSpeed = 3;

// Game Over status
        let gameOver = false;

// Handle touch events for smartphone operation
        canvas.addEventListener('touchstart', function (event) {
            if (event.touches[0].clientX > playerX + playerSize) {
                playerX += playerSpeed;
            } else if (event.touches[0].clientX < playerX) {
                playerX -= playerSpeed;
            }
        });

// Function to draw the player
        function drawPlayer() {
            ctx.fillStyle = '#ff3333';
            ctx.fillRect(playerX, playerY, playerSize, playerSize);
        }

// Function to draw the obstacle
        function drawObstacle() {
            ctx.fillStyle = '#3333ff';
            ctx.fillRect(obstacleX, obstacleY, obstacleSize, obstacleSize);
        }

// Function to handle collision detection
        function detectCollision() {
            if (playerX < obstacleX + obstacleSize &&
                playerX + playerSize > obstacleX &&
                playerY < obstacleY + obstacleSize &&
                playerY + playerSize > obstacleY) {
                gameOver = true;
            }
        }

// Function to update game objects
        function update() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move and draw the player
            drawPlayer();

// Move and draw the obstacle
            drawObstacle();

// Handle collision detection
            detectCollision();

if (!gameOver) {
                // Move the obstacle downwards
                obstacleY += obstacleSpeed;

// Reset obstacle position if it goes beyond canvas height
                if (obstacleY > canvas.height) {
                    obstacleY = 0;
                    // Randomly change obstacle position
                    obstacleX = Math.random() * (canvas.width - obstacleSize);
                }

// Request animation frame to update game objects
                requestAnimationFrame(update);
            } else {
                // Game over, stop updating
                ctx.fillStyle = '#000';
                ctx.font = '30px Arial';
                ctx.fillText('Game Over', canvas.width / 2 - 80, canvas.height / 2);
            }
        }

// Start the game
        update();
    </script>
</body>

</html>