Unlimited from above! In random x-axis directions! Several at the same time! Balls pouring down! In the middle of the screen! Left and right! Can move! Paddles! From the bottom of the screen! In a random x-axis direction! Blocks ejected toward the top of the screen to float! The player moves the paddle left and right to avoid the blocks! If the paddle hits a block, the game is over! Blocks disappear when the ball hits them! The time it takes for the paddle to hit the block is the score! In addition, the number of blocks made to disappear by the ball is also counted!×Add 10 to the score!'s game

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

No:8893

199

←

Prev Next

→

Unlimited from above! In random x-axis directions!..ALL
Developer User3589｜Date and time 23/7/19 10:50:30
Build time 48.378 sec｜Game capacity 6.203KB｜

Script

Score: 0

この修正により、要求された挙動にゲームが変わります。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Block Breaker Game</title>
    <style>
        #gameArea {
            position: relative;
            width: 400px;
            height: 600px;
            border: 1px solid black;
        }

#paddle {
            position: absolute;
            width: 60px;
            height: 10px;
            background-color: black;
            bottom: 10px;
            left: 170px; /* Center the paddle */
        }

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

.block {
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: blue;
            bottom: 0; /* Start block from the bottom */
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <div id="paddle"></div>
    </div>

<div id="score">Score: 0</div>

let score = 0;
        let interval;

function startGame() {
            clearInterval(interval);

interval = setInterval(() => {
                const ball = document.createElement("div");
                ball.className = "ball";
                ball.style.left = Math.random() * (gameArea.offsetWidth - 20) + "px";
                gameArea.appendChild(ball);

const block = document.createElement("div");
                block.className = "block";
                block.style.left = Math.random() * (gameArea.offsetWidth - 50) + "px";
                gameArea.appendChild(block);

moveBall(ball, ball.offsetTop, gameArea.offsetHeight);
                moveBlock(block, gameArea.offsetHeight - block.offsetHeight);
            }, 1000);

document.addEventListener("keydown", movePaddle);
        }
        
        function moveBall(ball, top, maxTop) {
            const speed = 10;
            let direction = -1;

setInterval(() => {
                top += direction * speed;
                ball.style.top = top + "px";

if (top <= 0 || isBlockCollision(ball)) {
                    direction = -1;
                    destroyBlock(ball);
                    score += 10;
                    updateScore();
                }
            }, 30);
        }

function moveBlock(block, bottom) {
            const speed = 5;

setInterval(() => {
                bottom -= speed;
                block.style.bottom = bottom + "px";

if (isPaddleCollision(block)) {
                    gameOver();
                }

if (bottom <= 0) {
                    block.remove();
                }
            }, 30);
        }

function movePaddle(event) {
            const left = paddle.offsetLeft;

switch (event.key) {
                case "ArrowLeft":
                    if (left > 0) {
                        paddle.style.left = left - 5 + "px";
                    }
                    break;
                case "ArrowRight":
                    if (left + paddle.offsetWidth < gameArea.offsetWidth) {
                        paddle.style.left = left + 5 + "px";
                    }
                    break;
            }
        }

function isPaddleCollision(obj) {
            const objRect = obj.getBoundingClientRect();
            const paddleRect = paddle.getBoundingClientRect();

return (
                objRect.top <= paddleRect.top + paddleRect.height &&
                objRect.left >= paddleRect.left &&
                objRect.left + objRect.width <= paddleRect.left + paddleRect.width
            );
        }

function isBlockCollision(ball) {
            const ballRect = ball.getBoundingClientRect();
            const blocks = document.getElementsByClassName("block");

for (let i = 0; i < blocks.length; i++) {
                const blockRect = blocks[i].getBoundingClientRect();

if (
                    ballRect.top <= blockRect.top + blockRect.height &&
                    ballRect.left >= blockRect.left &&
                    ballRect.left + ballRect.width <= blockRect.left + blockRect.width
                ) {
                    return true;
                }
            }

return false;
        }

function destroyBlock(ball) {
            const blocks = document.getElementsByClassName("block");

for (let i = 0; i < blocks.length; i++) {
                const blockRect = blocks[i].getBoundingClientRect();
                const ballRect = ball.getBoundingClientRect();

if (
                    ballRect.top <= blockRect.top + blockRect.height &&
                    ballRect.left >= blockRect.left &&
                    ballRect.left + ballRect.width <= blockRect.left + blockRect.width
                ) {
                    blocks[i].remove();
                }
            }
        }

function updateScore() {
            document.getElementById("score").innerText = "Score: " + score;
        }

function gameOver() {
            clearInterval(interval);
            alert("Game Over! Your Score: " + score);
            score = 0;
            updateScore();
            clearGameArea();
        }

function clearGameArea() {
            const balls = document.getElementsByClassName("ball");
            const blocks = document.getElementsByClassName("block");

while (balls[0]) {
                balls[0].parentNode.removeChild(balls[0]);
            }

while (blocks[0]) {
                blocks[0].parentNode.removeChild(blocks[0]);
            }
        }

startGame();
    </script>
</body>
</html>
```
この修正により、要求された挙動にゲームが変わります。