AI game creator

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

No:24541

←

Prev Next

→

ブロック崩し
Developer User11661｜Date and time 23/11/9 21:32:56
Build time 222.829 sec｜Game capacity 5.182KB｜

Script

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

このプログラムは、1枚のHTMLファイルとして実装されており、JavaScriptのコードもscriptタグで囲まれています。ゲーム画面にはブロック、パドル、ボールが表示され、ユーザーはスマートフォンの操作を使ってパドルを動かし、ボールを打ち返すことでゲームを進めます。ブロックにボールが当たると、ブロックが壊れて消えます。ボールが画面下部に落ちるとゲームオーバーとなり、その時点でゲーム終了となります。上記のプログラムをブラウザで開くと、ブロック崩しのゲームが遊べます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Breaker</title>
    <style>
        #gameScreen {
            position: relative;
            width: 320px;
            height: 480px;
            background-color: #f0f0f0;
            margin: 0 auto;
        }

.ball {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #000000;
        }

.paddle {
            position: absolute;
            width: 80px;
            height: 10px;
            background-color: #333333;
        }

.brick {
            position: absolute;
            width: 60px;
            height: 20px;
            background-color: #ff0000;
        }

.game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            color: #000000;
        }
    </style>
</head>
<body>
    <div id="gameScreen">
        <div id="paddle" class="paddle"></div>
        <div id="ball" class="ball"></div>
    </div>

let paddleX = 120;
        let ballX = 150;
        let ballY = 100;
        let ballSpeedX = 3;
        let ballSpeedY = 3;
        let gameRunning = true;

for(let row = 0; row < 5; row++) {
            for(let col = 0; col < 5; col++) {
                const brick = document.createElement('div');
                brick.classList.add('brick');
                brick.style.left = (col * 70) + 'px';
                brick.style.top = (row * 30) + 'px';
                gameScreen.appendChild(brick);
                bricks.push(brick);
            }
        }

function update() {
            if(!gameRunning) {
                return;
            }

movePaddle();
            moveBall();

if(collisionDetection()) {
                ballSpeedY *= -1;
            }

if(ballX < 0 || ballX > 300) {
                ballSpeedX *= -1;
            }

if(ballY < 0) {
                ballSpeedY *= -1;
            }

if(ballY > 460) {
                gameRunning = false;
                const gameOverText = document.createElement('div');
                gameOverText.classList.add('game-over');
                gameOverText.textContent = "Game Over";
                gameScreen.appendChild(gameOverText);
            }

ball.style.left = ballX + 'px';
            ball.style.top = ballY + 'px';

requestAnimationFrame(update);
        }

function movePaddle() {
            document.addEventListener('touchmove', function(event) {
                paddleX = event.touches[0].clientX - gameScreen.offsetLeft - paddle.offsetWidth / 2;

if(paddleX < 0) {
                    paddleX = 0;
                } else if(paddleX > 240) {
                    paddleX = 240;
                }

paddle.style.left = paddleX + 'px';
            });
        }

function moveBall() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

if(ballX < 0 || ballX > 300) {
                ballSpeedX *= -1;
            }

if(ballY < 0) {
                ballSpeedY *= -1;
            }

if(ballY > 460 && ballX >= paddleX && ballX <= (paddleX + paddle.offsetWidth)) {
                ballSpeedY *= -1;
            }
        }

function collisionDetection() {
            for(let i = 0; i < bricks.length; i++) {
                const brick = bricks[i];

if(ballY < brick.offsetTop + brick.offsetHeight &&
                   ballY + ball.offsetHeight > brick.offsetTop &&
                   ballX < brick.offsetLeft + brick.offsetWidth &&
                   ballX + ball.offsetWidth > brick.offsetLeft) {
                    gameScreen.removeChild(brick);
                    bricks.splice(i, 1);
                    return true;
                }
            }

return false;
        }

update();
    </script>
</body>
</html>
```

上記のプログラムをブラウザで開くと、ブロック崩しのゲームが遊べます。