AI game creator

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

No:33458

←

Prev Next

→

ビリヤード
Developer User15732｜Date and time 24/1/4 9:03:34
Build time 15.872 sec｜Game capacity 1.831KB｜

Script

了解です。以下にプログラム例を示します。

このプログラムは、HTMLのcanvas要素を使用してビリヤードのボールが画面内を移動する処理を実装しています。ボールは壁に当たると反射し、画面内を跳ねながら移動します。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にプログラム例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ビリヤードゲーム</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// ボールの初期位置と速度
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        let ballSpeedX = 2;
        let ballSpeedY = -2;

function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

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

drawBall();

// ボールの移動処理
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// ボールが壁に当たったら反射する
            if (ballX + ballSpeedX > canvas.width - 10 || ballX + ballSpeedX < 10) {
                ballSpeedX = -ballSpeedX;
            }
            if (ballY + ballSpeedY > canvas.height - 10 || ballY + ballSpeedY < 10) {
                ballSpeedY = -ballSpeedY;
            }

requestAnimationFrame(updateGame);
        }

updateGame();
    </script>
</body>
</html>
```