AI game creator

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

No:25350

197

←

Prev Next

→

ブロック崩し
Developer User12383｜Date and time 23/11/20 22:03:00
Build time 211.038 sec｜Game capacity 7.742KB｜

Script

了解しました。以下にブロック崩しのゲームの実装例を示します。

このプログラムは、ブロック崩しのゲームを実装しています。ブラウザで実行する際には、上記のコードをHTMLファイルに保存し、ブラウザで開いてください。ゲーム画面が表示され、スマホで操作可能な状態で遊ぶことができます。

←

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>
        #gameCanvas {
            background-color: #fff;
            border: 1px solid #000;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="300" height="400"></canvas>
    <script>
        // ゲームの状態を管理する変数
        var gameState;

// ゲームの初期化処理
        function initGame() {
            // キャンバス要素の取得
            var canvas = document.getElementById("gameCanvas");
            // ゲームの状態を初期化
            gameState = {
                canvas: canvas.getContext("2d"),
                ballX: canvas.width / 2,
                ballY: canvas.height - 30,
                ballRadius: 10,
                ballDX: 2,
                ballDY: -2,
                paddleWidth: 75,
                paddleHeight: 10,
                paddleX: (canvas.width - 75) / 2,
                rightPressed: false,
                leftPressed: false,
                brickRowCount: 3,
                brickColumnCount: 5,
                brickWidth: 75,
                brickHeight: 20,
                brickPadding: 10,
                brickOffsetTop: 30,
                brickOffsetLeft: 30,
                bricks: []
            };

// ブロックの初期化
            for (var c = 0; c < gameState.brickColumnCount; c++) {
                gameState.bricks[c] = [];
                for (var r = 0; r < gameState.brickRowCount; r++) {
                    gameState.bricks[c][r] = { x: 0, y: 0, status: 1 };
                }
            }

// キーボードのイベントリスナーの設定
            document.addEventListener("keydown", keyDownHandler, false);
            document.addEventListener("keyup", keyUpHandler, false);

// マウスのイベントリスナーの設定
            canvas.addEventListener("mousemove", mouseMoveHandler, false);
        }

// キーボードのキーが押された時の処理
        function keyDownHandler(e) {
            if (e.key === "ArrowRight") {
                gameState.rightPressed = true;
            } else if (e.key === "ArrowLeft") {
                gameState.leftPressed = true;
            }
        }

// キーボードのキーが離された時の処理
        function keyUpHandler(e) {
            if (e.key === "ArrowRight") {
                gameState.rightPressed = false;
            } else if (e.key === "ArrowLeft") {
                gameState.leftPressed = false;
            }
        }

// マウスが動いた時の処理
        function mouseMoveHandler(e) {
            var relativeX = e.clientX - gameState.canvas.canvas.offsetLeft;
            if (relativeX > 0 && relativeX < gameState.canvas.canvas.width) {
                gameState.paddleX = relativeX - gameState.paddleWidth / 2;
            }
        }

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

// ゲームのメイン処理
        function gameLoop() {
            // キャンバスクリア
            gameState.canvas.clearRect(0, 0, gameState.canvas.canvas.width, gameState.canvas.canvas.height);

// ボールの描画
            gameState.canvas.beginPath();
            gameState.canvas.arc(gameState.ballX, gameState.ballY, gameState.ballRadius, 0, Math.PI * 2);
            gameState.canvas.fillStyle = "#0095DD";
            gameState.canvas.fill();
            gameState.canvas.closePath();

// パドルの描画
            gameState.canvas.beginPath();
            gameState.canvas.rect(gameState.paddleX, gameState.canvas.canvas.height - gameState.paddleHeight, gameState.paddleWidth, gameState.paddleHeight);
            gameState.canvas.fillStyle = "#0095DD";
            gameState.canvas.fill();
            gameState.canvas.closePath();

// ブロックの描画
            for (var c = 0; c < gameState.brickColumnCount; c++) {
                for (var r = 0; r < gameState.brickRowCount; r++) {
                    if (gameState.bricks[c][r].status === 1) {
                        var brickX = (c * (gameState.brickWidth + gameState.brickPadding)) + gameState.brickOffsetLeft;
                        var brickY = (r * (gameState.brickHeight + gameState.brickPadding)) + gameState.brickOffsetTop;
                        gameState.bricks[c][r].x = brickX;
                        gameState.bricks[c][r].y = brickY;
                        gameState.canvas.beginPath();
                        gameState.canvas.rect(brickX, brickY, gameState.brickWidth, gameState.brickHeight);
                        gameState.canvas.fillStyle = "#0095DD";
                        gameState.canvas.fill();
                        gameState.canvas.closePath();
                    }
                }
            }

// ボールの移動
            gameState.ballX += gameState.ballDX;
            gameState.ballY += gameState.ballDY;

// ボールの跳ね返り
            if (gameState.ballX + gameState.ballDX > gameState.canvas.canvas.width - gameState.ballRadius || gameState.ballX + gameState.ballDX < gameState.ballRadius) {
                gameState.ballDX = -gameState.ballDX;
            }
            if (gameState.ballY + gameState.ballDY < gameState.ballRadius) {
                gameState.ballDY = -gameState.ballDY;
            } else if (gameState.ballY + gameState.ballDY > gameState.canvas.canvas.height - gameState.ballRadius) {
                if (gameState.ballX > gameState.paddleX && gameState.ballX < gameState.paddleX + gameState.paddleWidth) {
                    gameState.ballDY = -gameState.ballDY;
                } else {
                    // ゲームオーバー
                    alert("Game Over");
                    clearInterval(gameState.interval);
                    initGame();
                }
            }

// パドルの移動
            if (gameState.rightPressed && gameState.paddleX < gameState.canvas.canvas.width - gameState.paddleWidth) {
                gameState.paddleX += 7;
            } else if (gameState.leftPressed && gameState.paddleX > 0) {
                gameState.paddleX -= 7;
            }

// ブロックとボールの当たり判定
            collisionDetection();

// ゲームの繰り返し処理
            gameState.interval = setInterval(gameLoop, 10);
        }

// ゲームの開始
        initGame();
        gameLoop();
    </script>
</body>
</html>
```