AI game creator

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

No:41787

←

Prev Next

→

ビリヤード
Developer User18736｜Date and time 24/2/9 22:37:57
Build time 20.764 sec｜Game capacity 6.145KB｜

Script

了解です。以下にビリヤードゲームの実装例を示します。

このプログラムは、HTMLのキャンバス要素を使ってビリヤードゲームを実装しています。ボールをパドルで跳ね返し、ブロックを破壊するという基本的なルールに基づいています。スマホでも操作可能で、ボールの描画には赤い円、パドルの描画には青い四角形、ブロックの描画にはオレンジの四角形を使用しています。このコードをHTMLファイルに保存し、ブラウザで表示すればビリヤードゲームを遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解です。以下にビリヤードゲームの実装例を示します。

```html
<html>
<head>
    <title>ビリヤードゲーム</title>
    <style>
        #canvas {
            width: 100%;
            height: 100vh;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>

// ボールの初期位置と速度
            var ballX = canvas.width / 2;
            var ballY = canvas.height - 30;
            var ballRadius = 10;
            var dx = 2;
            var dy = -2;

// パドルの初期位置とサイズ
            var paddleHeight = 10;
            var paddleWidth = 75;
            var paddleX = (canvas.width - paddleWidth) / 2;
            var rightPressed = false;
            var leftPressed = false;

// ブロックの初期設定
            var brickRowCount = 3;
            var brickColumnCount = 5;
            var brickWidth = 75;
            var brickHeight = 20;
            var brickPadding = 10;
            var brickOffsetTop = 30;
            var brickOffsetLeft = 30;
            var bricks = [];
            for (var c = 0; c < brickColumnCount; c++) {
                bricks[c] = [];
                for (var r = 0; r < brickRowCount; r++) {
                    bricks[c][r] = { x: 0, y: 0, status: 1 };
                }
            }

// パドルの操作
            document.addEventListener("keydown", keyDownHandler, false);
            document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
                if (e.key == "Right" || e.key == "ArrowRight") {
                    rightPressed = true;
                } else if (e.key == "Left" || e.key == "ArrowLeft") {
                    leftPressed = true;
                }
            }

function keyUpHandler(e) {
                if (e.key == "Right" || e.key == "ArrowRight") {
                    rightPressed = false;
                } else if (e.key == "Left" || e.key == "ArrowLeft") {
                    leftPressed = false;
                }
            }

// ボールとブロックの当たり判定
            function collisionDetection() {
                for (var c = 0; c < brickColumnCount; c++) {
                    for (var r = 0; r < brickRowCount; r++) {
                        var b = bricks[c][r];
                        if (b.status == 1) {
                            if (ballX > b.x && ballX < b.x + brickWidth && ballY > b.y && ballY < b.y + brickHeight) {
                                dy = -dy;
                                b.status = 0;
                            }
                        }
                    }
                }
            }

// ゲームループ
            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawBricks();
                drawBall();
                drawPaddle();
                collisionDetection();

if (ballX + dx > canvas.width - ballRadius || ballX + dx < ballRadius) {
                    dx = -dx;
                }
                if (ballY + dy < ballRadius) {
                    dy = -dy;
                } else if (ballY + dy > canvas.height - ballRadius) {
                    if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                        dy = -dy;
                    } else {
                        alert("ゲームオーバー");
                        document.location.reload();
                    }
                }

if (rightPressed && paddleX < canvas.width - paddleWidth) {
                    paddleX += 7;
                } else if (leftPressed && paddleX > 0) {
                    paddleX -= 7;
                }

ballX += dx;
                ballY += dy;
                requestAnimationFrame(draw);
            }

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

function drawPaddle() {
                ctx.beginPath();
                ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
                ctx.fillStyle = "blue";
                ctx.fill();
                ctx.closePath();
            }

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

このプログラムは、HTMLのキャンバス要素を使ってビリヤードゲームを実装しています。ボールをパドルで跳ね返し、ブロックを破壊するという基本的なルールに基づいています。スマホでも操作可能で、ボールの描画には赤い円、パドルの描画には青い四角形、ブロックの描画にはオレンジの四角形を使用しています。

このコードをHTMLファイルに保存し、ブラウザで表示すればビリヤードゲームを遊ぶことができます。