ボールが壁に当たると真ん中に新しいボールが2つできるゲーム's game

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

No:36793

←

Prev Next

→

ボールが壁に当たると真ん中に新しいボールが2つできるゲーム
Developer User4403｜Date and time 24/1/18 11:16:53
Build time 9.601 sec｜Game capacity 2.392KB｜

Script

以下に、要件に従ったゲームの実装例を示します。

このプログラムを実行すると、指定されたゲームがプレイできます。ボールはスマホの画面内を移動し、壁に当たる度に新しいボールが中央に生成されます。

←

Prev　Next

→ 　

Back　

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

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

以下に、要件に従ったゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ボールゲーム</title>
    <style>
        #gameArea {
            position: relative;
            width: 100%;
            height: 80%;
        }

.ball {
            position: absolute;
            font-size: 2rem;
        }
    </style>
</head>

// ボールのクラス
        class Ball {
            constructor(x, y, dx, dy) {
                this.x = x;
                this.y = y;
                this.dx = dx;
                this.dy = dy;

this.element = document.createElement('div');
                this.element.classList.add('ball');
                this.element.innerHTML = '🔵';
                this.element.style.left = x + '%';
                this.element.style.top = y + '%';

area.appendChild(this.element);
            }

move() {
                this.x += this.dx;
                this.y += this.dy;
                this.checkCollision();
                this.element.style.left = this.x + '%';
                this.element.style.top = this.y + '%';
            }

checkCollision() {
                if (this.x < 0 || this.x > 100) {
                    balls.push(new Ball(this.x, this.y, -this.dx, -this.dy));
                    balls.push(new Ball(this.x, this.y, -this.dx, this.dy));
                    this.element.remove();
                    balls = balls.filter(ball => ball !== this);
                }

if (this.y < 0 || this.y > 80) {
                    this.dy = -this.dy;
                }
            }
        }

// ボールの生成とアニメーション開始
        (function init() {
            const ball = new Ball(50, 40, 1, 1);
            balls.push(ball);

setInterval(() => {
                balls.forEach(ball => ball.move());
            }, 100);
        })();
    </script>
</body>

</html>
```