AI game creator

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

No:9306

374

←

Prev Next

→

shrimp steamer
Developer User4246｜Date and time 23/7/23 14:17:47
Build time 30.546 sec｜Game capacity 4.575KB｜

Script

了解しました。以下にあるシンプルなブロック崩しゲームの実装例を示します。

このコードは、HTMLの `div` 要素を使ってゲーム画面を構築し、JavaScriptでボールの動きやパドルの操作を制御しています。ご自身でお試しください。

←

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: 400px;
            background-color: black;
            position: relative;
        }
        #ball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
        .brick {
            width: 60px;
            height: 20px;
            background-color: green;
            position: absolute;
        }
        #paddle {
            width: 100px;
            height: 20px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="gameCanvas">
        <div id="ball"></div>
        <div class="brick" style="top: 40px; left: 10px;"></div>
        <div class="brick" style="top: 40px; left: 80px;"></div>
        <div class="brick" style="top: 80px; left: 10px;"></div>
        <div class="brick" style="top: 80px; left: 80px;"></div>
        <div id="paddle"></div>
    </div>

document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
            if (e.keyCode == 39) {
                rightPressed = true;
            } else if (e.keyCode == 37) {
                leftPressed = true;
            }
        }

function keyUpHandler(e) {
            if (e.keyCode == 39) {
                rightPressed = false;
            } else if (e.keyCode == 37) {
                leftPressed = false;
            }
        }

function drawBall() {
            ball.style.top = ballY + "px";
            ball.style.left = ballX + "px";
        }

function moveBall() {
            ballX += dx;
            ballY += dy;

if (ballX + ballRadius >= gameWidth || ballX - ballRadius <= 0) {
                dx = -dx;
            }
            if (ballY - ballRadius <= 0) {
                dy = -dy;
            }
            if (ballY + ballRadius >= gameHeight - paddleHeight) {
                if (ballX + ballRadius >= paddleX && ballX - ballRadius <= paddleX + paddleWidth) {
                    dy = -dy;
                } else {
                    // ゲームオーバー
                    alert("ゲームオーバー");
                    document.location.reload();
                }
            }

for (var i = 0; i < bricks.length; i++) {
                var brick = bricks[i];
                if (ballY - ballRadius <= brick.offsetTop + brick.offsetHeight && ballY + ballRadius >= brick.offsetTop && ballX + ballRadius >= brick.offsetLeft && ballX - ballRadius <= brick.offsetLeft + brick.offsetWidth) {
                    dy = -dy;
                    brick.style.display = "none";
                }
            }
        }

function drawPaddle() {
            paddle.style.left = paddleX + "px";
        }

function movePaddle() {
            if (rightPressed && paddleX < gameWidth - paddleWidth) {
                paddleX += 7;
            } else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }
        }

function draw() {
            drawBall();
            moveBall();
            drawPaddle();
            movePaddle();
            requestAnimationFrame(draw);
        }

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

このコードは、HTMLの `div` 要素を使ってゲーム画面を構築し、JavaScriptでボールの動きやパドルの操作を制御しています。ご自身でお試しください。