10 fast bouncing balls in a box making a sound's game | AI game creator

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

No:37523

27

10 fast bouncing balls in a box making a sound
Developer User17064｜Date and time 24/1/21 4:56:38
Build time 9.891 sec｜Game capacity 2.612KB｜

Sure, here's an example of a game with 10 fast bouncing balls in a box that makes a sound. The balls are represented by pictograms and the game can be played on a smartphone.

In the HTML code above, there is a `<div>` element with the id "box" which represents the box where the balls will bounce. The balls are represented by the CSS class "ball" and are styled using CSS properties. The balls are animated using the CSS `animation` property. In the JavaScript code, the `querySelectorAll` method is used to select all the elements with the class "ball". An event listener is added to each ball so that when it is clicked, a sound called "sound.mp3" is played using the `Audio` object. You can replace the URLs for the ball image and the bounce sound with your own files. Just ensure that the image and sound files are located in the same directory as the HTML file. Please keep in mind that the above code is a simplified example and may not work as a full-fledged game. You may need to add more functionality, such as keeping score or adding game logic, depending on your specific requirements.

→ 　

0　

0　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

Sure, here's an example of a game with 10 fast bouncing balls in a box that makes a sound. The balls are represented by pictograms and the game can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Ball Game</title>
    <style>
        #box {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: lightgray;
            overflow: hidden;
        }
        
        .ball {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('ball.png');
            background-size: cover;
            animation: bounce 1s infinite;
        }
        
        @keyframes bounce {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(250px);
            }
            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
    </div>

<script>
        var balls = document.querySelectorAll(".ball");
        
        balls.forEach(function(ball) {
            ball.addEventListener("click", function() {
                var audio = new Audio('bounce_sound.wav');
                audio.play();
            });
        });
    </script>
</body>
</html>
```

In the HTML code above, there is a `<div>` element with the id "box" which represents the box where the balls will bounce. The balls are represented by the CSS class "ball" and are styled using CSS properties. The balls are animated using the CSS `animation` property.

In the JavaScript code, the `querySelectorAll` method is used to select all the elements with the class "ball". An event listener is added to each ball so that when it is clicked, a sound called "bounce_sound.wav" is played using the `Audio` object.

You can replace the URLs for the ball image and the bounce sound with your own files. Just ensure that the image and sound files are located in the same directory as the HTML file.

Please keep in mind that the above code is a simplified example and may not work as a full-fledged game. You may need to add more functionality, such as keeping score or adding game logic, depending on your specific requirements.