AI game creator

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

No:25203

←

Prev Next

→

bubble tea run game
Developer User12292｜Date and time 23/11/19 4:28:25
Build time 117.551 sec｜Game capacity 5.039KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Bubble Tea Run Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        canvas {
            display: block;
            background-color: #f5f5f5;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // Game Constants
        const GAME_WIDTH = 400;
        const GAME_HEIGHT = 600;
        const PLAYER_WIDTH = 40;
        const PLAYER_HEIGHT = 60;
        const BUBBLE_SIZE = 40;
        const BUBBLE_GAP = 200;
        const JUMP_SPEED = 10;
        const GRAVITY = 0.5;
    
        // Game Variables
        let ctx;
        let playerX;
        let playerY;
        let playerVelocityY;
        let bubbles;
        let score;
        let isGameOver;
    
        // Create the player object
        const player = {
            x: GAME_WIDTH / 2 - PLAYER_WIDTH / 2,
            y: GAME_HEIGHT / 2 - PLAYER_HEIGHT / 2,
            width: PLAYER_WIDTH,
            height: PLAYER_HEIGHT
        };
    
        // Initialize the game
        function initialize() {
            const gameCanvas = document.getElementById('gameCanvas');
            ctx = gameCanvas.getContext('2d');
            
            playerX = GAME_WIDTH / 2 - PLAYER_WIDTH / 2;
            playerY = GAME_HEIGHT / 2 - PLAYER_HEIGHT / 2;
            playerVelocityY = 0;
            
            bubbles = [
                { x: GAME_WIDTH, y: getRandomBubbleY() },
                { x: GAME_WIDTH + BUBBLE_GAP, y: getRandomBubbleY() },
                { x: GAME_WIDTH + BUBBLE_GAP * 2, y: getRandomBubbleY() }
            ];
            
            score = 0;
            isGameOver = false;
            
            document.addEventListener('keydown', jump);
            
            gameLoop();
        }
    
        // Update game objects
        function update() {
            if (isGameOver) {
                return;
            }
            
            playerVelocityY += GRAVITY;
            playerY += playerVelocityY;
            
            if (playerY >= GAME_HEIGHT - PLAYER_HEIGHT) {
                endGame();
            }
            
            if (bubbles[0].x + BUBBLE_SIZE <= 0) {
                // Move the bubble to the right
                bubbles.shift();
                bubbles.push({ x: bubbles[bubbles.length - 1].x + BUBBLE_GAP, y: getRandomBubbleY() });
                score++;
            }
            
            for (let i = 0; i < bubbles.length; i++) {
                const bubble = bubbles[i];
                bubble.x -= 5;
                
                if (isColliding(player, bubble)) {
                    endGame();
                }
            }
        }
    
        // Render game objects
        function render() {
            ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
            
            drawPlayer();
            
            for (let i = 0; i < bubbles.length; i++) {
                drawBubble(bubbles[i]);
            }
            
            ctx.fillStyle = 'black';
            ctx.font = '24px Arial';
            ctx.fillText('Score: ' + score, 20, 30);
            
            if (isGameOver) {
                ctx.fillStyle = 'black';
                ctx.font = '48px Arial';
                ctx.fillText('Game Over', GAME_WIDTH / 2 - 120, GAME_HEIGHT / 2);
            }
        }
    
        // Draw the player
        function drawPlayer() {
            ctx.fillStyle = 'pink';
            ctx.fillRect(playerX, playerY, PLAYER_WIDTH, PLAYER_HEIGHT);
        }
    
        // Draw a bubble
        function drawBubble(bubble) {
            ctx.fillStyle = 'lightblue';
            ctx.fillRect(bubble.x, bubble.y, BUBBLE_SIZE, BUBBLE_SIZE);
        }
    
        // Event handler for player jump
        function jump(event) {
            if (event.keyCode === 32 && playerY === GAME_HEIGHT - PLAYER_HEIGHT) {
                playerVelocityY = -JUMP_SPEED;
            }
        }
    
        // Check collision between player and bubble
        function isColliding(player, bubble) {
            return player.x < bubble.x + BUBBLE_SIZE &&
                player.x + player.width > bubble.x &&
                player.y < bubble.y + BUBBLE_SIZE &&
                player.y + player.height > bubble.y;
        }
    
        // Return a random y coordinate for bubble placement
        function getRandomBubbleY() {
            return Math.floor(Math.random() * (GAME_HEIGHT - BUBBLE_SIZE));
        }
    
        // End the game
        function endGame() {
            isGameOver = true;
            document.removeEventListener('keydown', jump);
        }
    
        // Game Loop
        function gameLoop() {
            update();
            render();
            
            if (!isGameOver) {
                requestAnimationFrame(gameLoop);
            }
        }
    
        // Start the game
        initialize();
    </script>
</body>
</html>
```