AI game creator

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

No:42840

←

Prev Next

→

Block Breaker
Developer User18914｜Date and time 24/2/13 0:49:56
Build time 15.294 sec｜Game capacity 4.467KB｜

Script

Score: 0

Lives: 3

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<HTML>
<head>
    <title>Bloco Quebrador</title>
    <style>
        #gameArea {
            position: relative;
            width: 400px;
            height: 500px;
            background-color: #f2f2f2;
        }

#paddle {
            position: absolute;
            bottom: 10px;
            width: 80px;
            height: 20px;
            background-color: #333;
            border-radius: 50%;
            left: 160px;
        }

#ball {
            position: absolute;
            top: 200px;
            left: 200px;
            width: 20px;
            height: 20px;
            background-color: #333;
            border-radius: 50%;
        }

.bricks {
            position: absolute;
            width: 70px;
            height: 20px;
            background-color: #f44336;
            border-radius: 3px;
        }

#score {
            position: absolute;
            top: 20px;
            left: 20px;
        }

#lives {
            position: absolute;
            top: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <div id="paddle"></div>
        <div id="ball"></div>
        <div id="score">Score: 0</div>
        <div id="lives">Lives: 3</div>
    </div>

let paddleX = 160;
        let ballX = 200;
        let ballY = 200;
        let dx = 2;
        let dy = -2;
        let score = 0;
        let lives = 3;

document.addEventListener("keydown", movePaddle);

function movePaddle(event) {
            if (event.key === "ArrowLeft" && paddleX > 0) {
                paddleX -= 20;
            } else if (event.key === "ArrowRight" && paddleX + paddle.offsetWidth < gameArea.offsetWidth) {
                paddleX += 20;
            }
        }

function draw() {
            gameArea.innerHTML = "";
            paddle.style.left = paddleX + "px";
            ball.style.top = ballY + "px";
            ball.style.left = ballX + "px";

for (let i = 0; i < 24; i++) {
                let brick = document.createElement("div");
                brick.classList.add("bricks");
                brick.style.top = (Math.floor(i / 6) * 30 + 50) + "px";
                brick.style.left = (i % 6 * 70 + 20) + "px";
                gameArea.appendChild(brick);
            }

collisionDetection();

if (ballX + dx > gameArea.offsetWidth - ball.offsetWidth || ballX + dx < 0) {
                dx = -dx;
            }

if (ballY + dy < 0) {
                dy = -dy;
            } else if (ballY + dy > gameArea.offsetHeight - ball.offsetHeight) {
                if (ballX > paddleX && ballX < paddleX + paddle.offsetWidth) {
                    dy = -dy;
                } else {
                    lives--;
                    livesDisplay.textContent = "Lives: " + lives;
                    if (lives === 0) {
                        alert("Game Over!");
                        document.location.reload();
                    } else {
                        ballX = 200;
                        ballY = 200;
                        dx = 2;
                        dy = -2;
                    }
                }
            }

ballX += dx;
            ballY += dy;
            requestAnimationFrame(draw);
        }

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