AI game creator

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

No:6453

218

←

Prev Next

→

Game Boy Macro
Developer User3891｜Date and time 23/7/2 13:40:41
Build time 45.927 sec｜Game capacity 6.133KB｜

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 { border: 1px solid black; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        document.addEventListener('DOMContentLoaded', startGame);

function startGame() {
            const canvas = document.getElementById('gameCanvas');
            const ctx = canvas.getContext('2d');

const paddleWidth = 80;
            const paddleHeight = 10;
            const paddleSpeed = 5;
            const ballRadius = 10;
            const ballSpeed = 2;
            const blockWidth = 60;
            const blockHeight = 20;
            const blockRowCount = 3;
            const blockColumnCount = 5;

const paddle = {
                x: canvas.width / 2 - paddleWidth / 2,
                y: canvas.height - paddleHeight,
                width: paddleWidth,
                height: paddleHeight,
                speed: paddleSpeed,
                direction: 0
            };

const ball = {
                x: canvas.width / 2,
                y: canvas.height - paddleHeight - ballRadius,
                radius: ballRadius,
                speed: ballSpeed,
                dx: -ballSpeed,
                dy: -ballSpeed
            };

let rightPressed = false;
            let leftPressed = false;

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

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 drawPaddle() {
                ctx.beginPath();
                ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
                ctx.fillStyle = 'black';
                ctx.fill();
                ctx.closePath();
            }

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

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

drawPaddle();
                drawBall();
                drawBlocks();

// ボールとブロックの当たり判定
                blocks.forEach(block => {
                    if (block.visible) {
                        if (ball.x > block.x && ball.x < block.x + block.width && ball.y > block.y && ball.y < block.y + block.height) {
                            ball.dy = -ball.dy;
                            block.visible = false;
                        }
                    }
                });

// ボールとパドルの当たり判定
                if (ball.x > paddle.x && ball.x < paddle.x + paddle.width && ball.y > paddle.y) {
                    ball.dy = -ball.dy;
                }

// ボールが画面外に出た場合の処理
                if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
                    ball.dx = -ball.dx;
                }
                if (ball.y + ball.dy < ball.radius) {
                    ball.dy = -ball.dy;
                } else if (ball.y + ball.dy > canvas.height - ball.radius) {
                    // ボールが底に到達した場合、ゲームオーバー
                    alert('ゲームオーバー');
                    document.location.reload();
                }

// パドルの移動
                if (rightPressed && paddle.x < canvas.width - paddle.width) {
                    paddle.x += paddle.speed;
                } else if (leftPressed && paddle.x > 0) {
                    paddle.x -= paddle.speed;
                }

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

requestAnimationFrame(draw);
            }

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

このプログラムは、ブロックくずしというゲームを実装しています。プレイヤーはパドルを操作して、ボールを使ってブロックを壊していくゲームです。ブロックを全て破壊するとクリアです。

ゲームはスマートフォンでも遊べるように実装されており、画面タッチでパドルを動かすことができます。ブロックやパドル、ボールは絵文字ではなく単純な四角形で描画されています。