Massive amount of physics colorful super balls's game

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

No:7250

4784

←

Prev Next

→

Massive amount of physics colorful super balls
Developer User3992｜Date and time 23/7/6 16:41:02
Build time 17.558 sec｜Game capacity 3.202KB｜

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>
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

const ballRadius = 20;
            let balls = [];

canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

canvas.addEventListener('touchstart', function(event) {
                const touch = event.touches[0];
                const color = getRandomColor();
                const ball = {
                    x: touch.clientX - ballRadius,
                    y: touch.clientY - ballRadius,
                    dx: Math.random() * 6 - 3,
                    dy: Math.random() * 6 - 3,
                    color: color
                };
                balls.push(ball);
            });

function drawBall(ball) {
                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ballRadius, 0, 2 * Math.PI);
                ctx.fillStyle = ball.color;
                ctx.fill();
                ctx.closePath();
            }

function update() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < balls.length; i++) {
                    let ball = balls[i];

ball.x += ball.dx;
                    ball.y += ball.dy;

if (ball.x < ballRadius || ball.x > canvas.width - ballRadius) {
                        ball.dx = -ball.dx;
                    }
                    if (ball.y < ballRadius || ball.y > canvas.height - ballRadius) {
                        ball.dy = -ball.dy;
                    }

drawBall(ball);
                }

requestAnimationFrame(update);
            }

function getRandomColor() {
                const letters = '0123456789ABCDEF';
                let color = '#';
                for (let i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
           }

update();
        });
    </script>
</body>
</html>
```

このコードは、スマホの画面に触れた際にカラフルなスーパーボールが表示され、画面内を跳ね回る様子を再現します。スーパーボールはランダムな速度で動き、画面の端に当たると跳ね返ります。

以上が、スマホ操作を前提とした物理演算を利用したカラフルスーパーボールのゲームのサンプルコードです。ご参考までにご利用ください。