Make a milk bubble tea character run like subway surfer and collect small black bubbles. The background should be a city with cafe and restaurants.'s game

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

No:25204

←

Prev Next

→

Make a milk bubble tea character run like subway s..ALL
Developer User12292｜Date and time 23/11/19 4:34:34
Build time 122.168 sec｜Game capacity 5.413KB｜

Script

Sure! Below is an example code for a simplified version of the game you described. Please note that this is a basic implementation and can be further enhanced with additional features and graphics.

In this game, the milk bubble tea character will run across a city background with cafes and restaurants. The player controls the character by clicking on the game container or pressing the spacebar to make it jump. The character collects small black bubbles, and the score is displayed at the top left corner of the screen. To use this code, you need to replace the image URLs (`city_background.jpg`, `emozi_all/background.png`, `emozi_dog.png`) with the actual URLs or file paths of the respective images you want to use. Feel free to customize and improve the game as per your requirements and design preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Below is an example code for a simplified version of the game you described. Please note that this is a basic implementation and can be further enhanced with additional features and graphics.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Milk Bubble Tea Runner</title>
    <style>
        #game-container {
            position: relative;
            width: 400px;
            height: 600px;
            background-image: url('city_background.jpg'); /* Replace with your own background image */
            background-size: cover;
            overflow: hidden;
        }

#runner {
            position: absolute;
            left: 50px;
            bottom: 50px;
            width: 80px;
            height: 80px;
            background-image: url('milk_bubble_tea.png'); /* Replace with your own character image */
            background-size: cover;
        }

.bubble {
            position: absolute;
            width: 40px;
            height: 40px;
            background-image: url('black_bubble.png'); /* Replace with your own bubble image */
            background-size: cover;
        }

#score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-family: Arial, sans-serif;
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="runner"></div>
        <div id="score"></div>
    </div>
    
    <script>
        // Game variables
        var score = 0;
        var gameContainer = document.getElementById('game-container');
        var runner = document.getElementById('runner');
        var scoreElement = document.getElementById('score');
        var bubbles = [];
        var bubbleInterval;
        var gameInterval;
        
        // Event listeners
        gameContainer.addEventListener('click', jump);
        document.addEventListener('keydown', jump);
        
        // Start the game
        startGame();
        
        // Game functions
        function startGame() {
            score = 0;
            bubbles = [];
            
            // Reset runner position
            runner.style.bottom = '50px';
            
            // Remove all existing bubbles
            var existingBubbles = document.getElementsByClassName('bubble');
            for (var i = existingBubbles.length - 1; i >= 0; i--) {
                existingBubbles[i].remove();
            }
            
            // Start spawning bubbles
            bubbleInterval = setInterval(spawnBubble, 1500);
            
            // Start updating game
            gameInterval = setInterval(updateGame, 20);
        }

function checkCollision(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();
            
            return !(rect1.right < rect2.left || 
                     rect1.left > rect2.right || 
                     rect1.bottom < rect2.top || 
                     rect1.top > rect2.bottom);
        }
    </script>
</body>
</html>
```

To use this code, you need to replace the image URLs (`city_background.jpg`, `milk_bubble_tea.png`, `black_bubble.png`) with the actual URLs or file paths of the respective images you want to use.

Feel free to customize and improve the game as per your requirements and design preferences.