AI game creator

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

No:15533

←

Prev Next

→

Block Breaker
Developer User6733｜Date and time 23/9/9 20:43:19
Build time 51.751 sec｜Game capacity 6.136KB｜

Script

Sure! Here's an example of a simple Block Breaker game implemented as a single HTML file using JavaScript:

This implementation includes handling paddle movement using left and right arrow keys (or 'A' and 'D' keys). The aim is to bounce the ball off the paddle to destroy all the bricks. Once the ball falls below the paddle, the game is over and an alert is shown to restart the game. Feel free to customize the styling, pictograms, or add additional features to enhance the game further!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple Block Breaker game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Create paddle
        const paddleWidth = 75;
        const paddleHeight = 10;
        let paddleX = (canvas.width - paddleWidth) / 2;
        const paddleSpeed = 7;
        let rightPressed = false;
        let leftPressed = false;

// Create ball
        let ballRadius = 10;
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        let ballSpeedX = 3;
        let ballSpeedY = -3;

// Create bricks
        const brickRowCount = 3;
        const brickColumnCount = 5;
        const brickWidth = 75;
        const brickHeight = 20;
        const brickPadding = 10;
        const brickOffsetTop = 30;
        const brickOffsetLeft = 30;
        const bricks = [];
        for (let c = 0; c < brickColumnCount; c++) {
            bricks[c] = [];
            for (let r = 0; r < brickRowCount; r++) {
                bricks[c][r] = { x: 0, y: 0, status: 1 };
            }
        }

// Handle paddle movement
        function keyDownHandler(event) {
            if (event.key === "Right" || event.key === "ArrowRight") {
                rightPressed = true;
            } else if (event.key === "Left" || event.key === "ArrowLeft") {
                leftPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.key === "Right" || event.key === "ArrowRight") {
                rightPressed = false;
            } else if (event.key === "Left" || event.key === "ArrowLeft") {
                leftPressed = false;
            }
        }

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

// Detect collision between ball and bricks
        function collisionDetection() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    const brick = bricks[c][r];
                    if (brick.status === 1) {
                        if (
                            ballX > brick.x &&
                            ballX < brick.x + brickWidth &&
                            ballY > brick.y &&
                            ballY < brick.y + brickHeight
                        ) {
                            ballSpeedY = -ballSpeedY;
                            brick.status = 0;
                        }
                    }
                }
            }
        }

// Draw paddle
        function drawPaddle() {
            context.beginPath();
            context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

// Draw ball
        function drawBall() {
            context.beginPath();
            context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

// Draw bricks
        function drawBricks() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status === 1) {
                        const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
                        const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
                        bricks[c][r].x = brickX;
                        bricks[c][r].y = brickY;
                        context.beginPath();
                        context.rect(brickX, brickY, brickWidth, brickHeight);
                        context.fillStyle = "#0095DD";
                        context.fill();
                        context.closePath();
                    }
                }
            }
        }

// Game loop
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            collisionDetection();

// Ball movement
            ballX += ballSpeedX;
            ballY += ballSpeedY;
            if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
                ballSpeedX = -ballSpeedX;
            }
            if (ballY + ballSpeedY < ballRadius) {
                ballSpeedY = -ballSpeedY;
            } else if (ballY + ballSpeedY > canvas.height - ballRadius) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    // Ball hits paddle
                    ballSpeedY = -ballSpeedY;
                } else {
                    // Game over
                    alert("Game Over");
                    document.location.reload();
                }
            }

// Paddle movement
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += paddleSpeed;
            } else if (leftPressed && paddleX > 0) {
                paddleX -= paddleSpeed;
            }

requestAnimationFrame(draw);
        }

draw(); // Start the game loop
    </script>
</body>
</html>
```

Feel free to customize the styling, pictograms, or add additional features to enhance the game further!