AI game creator

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

No:8910

212

←

Prev Next

→

pinball
Developer User3589｜Date and time 23/7/19 16:56:05
Build time 54.207 sec｜Game capacity 6.817KB｜

Script

了解しました。以下にピンボールのゲームを部分的にゲーム化したプログラムを示します。

このプログラムは、HTMLのcanvas要素を使用してピンボールのゲームを部分的に再現しています。ボールとパドルの動き、ブロックの破壊などが実装されています。スマートフォンでも操作できるように、タッチイベントを追加するなどの修正が必要かもしれませんが、基本的なゲームの機能は実装されています。

←

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 {
            background-color: #000;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>

const ballRadius = 10; // ボールの半径
            const paddleWidth = 80; // パドルの横幅
            const paddleHeight = 10; // パドルの縦幅
            const paddleSpeed = 6; // パドルの移動速度
            const brickRowCount = 3; // ブロックの行数
            const brickColumnCount = 5; // ブロックの列数
            const brickWidth = 75; // ブロックの横幅
            const brickHeight = 20; // ブロックの縦幅
            const brickPadding = 10; // ブロック間の余白
            const brickOffsetTop = 30; // ブロックの上からのオフセット
            const brickOffsetLeft = 30; // ブロックの左からのオフセット

let x = canvas.width / 2; // ボールの初期x座標
            let y = canvas.height - 30; // ボールの初期y座標
            let dx = 2; // ボールのx方向の速度
            let dy = -2; // ボールのy方向の速度
            let paddleX = (canvas.width - paddleWidth) / 2; // パドルの初期x座標
            let rightPressed = false; // 右キーが押されているかの状態
            let leftPressed = false; // 左キーが押されているかの状態
            let bricks = []; // ブロックの配列

for (let c = 0; c < brickColumnCount; c++) {
                bricks[c] = [];
                for (let r = 0; r < brickRowCount; r++) {
                    bricks[c][r] = { x: 0, y: 0, status: 1 };
                }
            }

function drawBall() {
                context.beginPath();
                context.arc(x, y, ballRadius, 0, Math.PI * 2);
                context.fillStyle = '#0095DD';
                context.fill();
                context.closePath();
            }

function drawPaddle() {
                context.beginPath();
                context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
                context.fillStyle = '#0095DD';
                context.fill();
                context.closePath();
            }

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 mouseMoveHandler(e) {
                let relativeX = e.clientX - canvas.offsetLeft;
                if (relativeX > 0 && relativeX < canvas.width) {
                    paddleX = relativeX - paddleWidth / 2;
                }
            }

document.addEventListener('keydown', keyDownHandler, false);
            document.addEventListener('keyup', keyUpHandler, false);
            document.addEventListener('mousemove', mouseMoveHandler, false);

function draw() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                drawBall();
                drawPaddle();
                drawBricks();
                collisionDetection();

if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                    dx = -dx;
                }

if (y + dy < ballRadius) {
                    dy = -dy;
                } else if (y + dy > canvas.height - ballRadius) {
                    if (x > paddleX && x < paddleX + paddleWidth) {
                        dy = -dy;
                    } else {
                        alert('ゲームオーバー');
                        document.location.reload();
                    }
                }

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

x += dx;
                y += dy;
                requestAnimationFrame(draw);
            }

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