a bouncing spikeball for all devices and if it hits the wall and multiplies and the wall gets bigger's game

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

No:17022

155

←

Prev Next

→

a bouncing spikeball for all devices and if it hit..ALL
Developer User7570｜Date and time 23/9/22 6:24:48
Build time 30.477 sec｜Game capacity 3.426KB｜

Script

Sure, here's an example of a simple bouncing spikeball game implemented as a single HTML file with JavaScript. It should work on all devices, including smartphones. The game uses pictograms to represent the spikeball and the wall.

⚫️

To play the game, you can copy the entire code into a new HTML file and save it with a `.html` extension. Then open the file in any web browser on your smartphone or computer. You will see a spikeball bouncing inside a game area. If the spikeball hits the bottom wall, it will bounce back and the wall will get wider.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Spikeball Game</title>
    <style>
        #game-area {
            position: relative;
            height: 400px;
            width: 100%;
            background-color: #e6e6e6;
        }

#spikeball {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
        }

#wall {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 10px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div id="game-area">
        <div id="spikeball">⚫️</div>
        <div id="wall"></div>
    </div>

var spikeballSize = 24; // Initial spikeball size
        var spikeballSpeedX = 3; // Spikeball horizontal speed
        var spikeballSpeedY = 3; // Spikeball vertical speed

var wallWidth = 100; // Initial wall width

function gameLoop() {
            // Move the spikeball
            var spikeballX = parseInt(spikeball.style.left) || 0;
            var spikeballY = parseInt(spikeball.style.top) || 0;

// Reverse direction if spikeball hits the sides of the game area
            if (spikeballX + spikeballSize >= window.innerWidth || spikeballX <= 0) {
                spikeballSpeedX *= -1;
            }

// Reverse direction if spikeball hits the top or bottom of the game area
            if (spikeballY + spikeballSize >= window.innerHeight || spikeballY <= 0) {
                spikeballSpeedY *= -1;
            }

// Update spikeball position
            spikeballX += spikeballSpeedX;
            spikeballY += spikeballSpeedY;

// Check for collision with the wall
            var wallWidthPct = (wallWidth / window.innerWidth) * 100;
            if (spikeballY + spikeballSize >= window.innerHeight - 10 && spikeballX >= (wallWidthPct / 100) * (window.innerWidth - spikeballSize) && spikeballX <= (wallWidthPct / 100) * (window.innerWidth - spikeballSize) + wallWidth) {
                // Spikeball hits the wall
                spikeball.style.top = (window.innerHeight - spikeballSize - 10) + 'px';
                spikeballSpeedY *= -1;

// Increase wall width
                wallWidth += 50;
                wall.style.width = wallWidth + 'px';
            }

// Update spikeball position
            spikeball.style.left = spikeballX + 'px';
            spikeball.style.top = spikeballY + 'px';

// Loop the game
            requestAnimationFrame(gameLoop);
        }

// Start the game loop
        gameLoop();
    </script>
</body>
</html>
```