🟫🟩🟦🟪🟨⬛️🔳🔲⬜️🟥🟧ゲーム's game

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

No:20710

←

Prev Next

→

🟫🟩🟦🟪🟨⬛️🔳🔲⬜️🟥🟧ゲーム
Developer User9126｜Date and time 23/10/10 19:21:42
Build time 44.319 sec｜Game capacity 5.038KB｜

Script

了解しました。以下に、スマホで遊べるシンプルなブロック崩しのゲームを実装したHTMLファイルを示します。JavaScriptコードはscriptタグ内に記述しています。

このゲームでは、画面上に表示された破壊可能なブロックをボールが跳ねながら壊していく操作ができます。スマートフォンのタッチ操作を利用して、ボールとパドルを操作します。ボールがブロックに当たるたびにブロックが消え、すべてのブロックを壊すとゲームクリアとなります。以上が、要件に基づいて実装したプログラムです。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>ブロック崩しゲーム</title>
    <style>
        #gameCanvas {
            width: 100%;
            height: 100vh;
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.ball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.paddle {
            width: 80px;
            height: 10px;
            background-color: white;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

.brick {
            width: 50px;
            height: 20px;
            background-color: white;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="gameCanvas">
        <div class="ball"></div>
        <div class="paddle"></div>
        <div class="brick" style="top: 10px; left: 10px;"></div>
        <div class="brick" style="top: 10px; left: 70px;"></div>
        <div class="brick" style="top: 10px; left: 130px;"></div>
        <div class="brick" style="top: 10px; left: 190px;"></div>
        <div class="brick" style="top: 10px; left: 250px;"></div>
        <div class="brick" style="top: 40px; left: 10px;"></div>
        <div class="brick" style="top: 40px; left: 70px;"></div>
        <div class="brick" style="top: 40px; left: 130px;"></div>
        <div class="brick" style="top: 40px; left: 190px;"></div>
        <div class="brick" style="top: 40px; left: 250px;"></div>
        <div class="brick" style="top: 70px; left: 10px;"></div>
        <div class="brick" style="top: 70px; left: 70px;"></div>
        <div class="brick" style="top: 70px; left: 130px;"></div>
        <div class="brick" style="top: 70px; left: 190px;"></div>
        <div class="brick" style="top: 70px; left: 250px;"></div>
    </div>

const paddleSpeed = 10;
        const ballSpeed = { x: 5, y: 5 };

// パドルの移動処理
        let paddlePosition = 50;
        document.addEventListener('touchmove', (event) => {
            paddlePosition = (event.touches[0].clientX / gameCanvas.clientWidth) * 100;
        });

// ゲームループ
        function gameLoop() {
            // パドルの移動
            paddle.style.left = `${paddlePosition}%`;

// ボールの移動
            let ballLeft = parseInt(ball.style.left);
            let ballTop = parseInt(ball.style.top);
            if (ballLeft <= 0 || ballLeft >= gameCanvas.clientWidth - ball.clientWidth) {
                ballSpeed.x *= -1;
            }
            if (ballTop <= 0 || ballTop >= gameCanvas.clientHeight - ball.clientHeight) {
                ballSpeed.y *= -1;
            }
            ball.style.left = `${ballLeft + ballSpeed.x}px`;
            ball.style.top = `${ballTop + ballSpeed.y}px`;

// ブロックとの衝突判定
            for (let i = 0; i < bricks.length; i++) {
                const brick = bricks[i];
                if (detectCollision(ball, brick)) {
                    brick.remove();
                    ballSpeed.y *= -1;
                    break;
                }
            }

requestAnimationFrame(gameLoop);
        }

// 衝突判定
        function detectCollision(ball, brick) {
            const ballRect = ball.getBoundingClientRect();
            const brickRect = brick.getBoundingClientRect();
            return ballRect.top < brickRect.bottom &&
                   ballRect.bottom > brickRect.top &&
                   ballRect.left < brickRect.right &&
                   ballRect.right > brickRect.left;
        }

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

このゲームでは、画面上に表示された破壊可能なブロックをボールが跳ねながら壊していく操作ができます。スマートフォンのタッチ操作を利用して、ボールとパドルを操作します。ボールがブロックに当たるたびにブロックが消え、すべてのブロックを壊すとゲームクリアとなります。

以上が、要件に基づいて実装したプログラムです。