AI game creator

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

No:33857

←

Prev Next

→

Block Breaker
Developer User15889｜Date and time 24/1/6 21:16:07
Build time 64.542 sec｜Game capacity 6.541KB｜

Script

Sure, I can help you create a simple block breaker game using HTML and JavaScript. Here's an example implementation:

This code will create a simple block breaker game using HTML and JavaScript. The game canvas is a rectangle where you can use the left and right arrow keys to move the paddle and prevent the ball from hitting the bottom edge of the canvas. The objective is to break all the bricks on the screen by deflecting the ball with the paddle. Note: This is a basic implementation that can be expanded and customized further as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure, I can help you create a simple block breaker game using HTML and JavaScript. Here's an example implementation:

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

// Set up the ball properties
        var ballRadius = 10;
        var x = canvas.width / 2;
        var y = canvas.height - 30;
        var dx = 2;
        var dy = -2;

// Set up the paddle properties
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;
        var rightPressed = false;
        var leftPressed = false;

// Set up the brick properties
        var brickRowCount = 3;
        var brickColumnCount = 5;
        var brickWidth = 75;
        var brickHeight = 20;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;
        var bricks = [];
        for (var c = 0; c < brickColumnCount; c++) {
            bricks[c] = [];
            for (var r = 0; r < brickRowCount; r++) {
                bricks[c][r] = { x: 0, y: 0, status: 1 }; // status 1 indicates the brick is active
            }
        }

// Set up the score
        var score = 0;

// Event listeners for paddle control
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
            if (e.key == "Right" || e.key == "ArrowRight") {
                rightPressed = true;
            }
            else if (e.key == "Left" || e.key == "ArrowLeft") {
                leftPressed = true;
            }
        }

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

// Collision detection function
        function collisionDetection() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    var b = bricks[c][r];
                    if (b.status == 1) {
                        if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
                            dy = -dy;
                            b.status = 0; // Mark the brick as inactive
                            score++; // Increase the score
                            if (score == brickRowCount * brickColumnCount) {
                                alert("Congratulations! You won!");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }

// Drawing the ball on the canvas
        function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

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

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

// Drawing the score on the canvas
        function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Score: " + score, 8, 20);
        }

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

// Update ball position
            x += dx;
            y += dy;

// Ball collision detection with walls
            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx;
            }
            if (y + dy < ballRadius) {
                dy = -dy;
            }
            else if (y + dy > canvas.height - ballRadius) {
                // Ball collision detection with paddle
                if (x > paddleX && x < paddleX + paddleWidth) {
                    dy = -dy;
                }
                else {
                    alert("Game Over");
                    document.location.reload();
                }
            }

// Move paddle
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            }
            else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }

requestAnimationFrame(draw);
        }

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

Note: This is a basic implementation that can be expanded and customized further as per your requirements.