AI game creator

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

No:31382

←

Prev Next

→

Block Breaker
Developer User15113｜Date and time 23/12/26 15:40:49
Build time 52.488 sec｜Game capacity 6.254KB｜

Script

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

Save the code above into a single HTML file, and open it with a web browser (preferably on a smartphone) to play the game. The game consists of a paddle at the bottom and bricks at the top. The goal is to control the paddle using the arrow keys or on-screen controls (which can be added separately) to bounce the ball and break all the bricks. You earn points for each brick broken, and if you clear all the bricks, you win. If the ball falls below the paddle, the game ends. Refresh the page to play again.

←

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 JavaScript and HTML. Here's an example implementation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // Initialize canvas and game variables
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const ballRadius = 10;
        let x = canvas.width / 2;
        let y = canvas.height - 30;
        let dx = 2;
        let dy = -2;
        let paddleHeight = 10;
        let paddleWidth = 75;
        let paddleX = (canvas.width - paddleWidth) / 2;
        let rightPressed = false;
        let leftPressed = false;
        let brickRowCount = 3;
        let brickColumnCount = 5;
        let brickWidth = 75;
        let brickHeight = 20;
        let brickPadding = 10;
        let brickOffsetTop = 30;
        let brickOffsetLeft = 30;
        let bricks = [];
        let score = 0;

// Create 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 };
            }
        }

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

// Function to handle keydown event
        function keyDownHandler(e) {
            if(e.key === "Right" || e.key === "ArrowRight") {
                rightPressed = true;
            } else if(e.key === "Left" || e.key === "ArrowLeft") {
                leftPressed = true;
            }
        }

// Function to handle keyup event
        function keyUpHandler(e) {
            if(e.key === "Right" || e.key === "ArrowRight") {
                rightPressed = false;
            } else if(e.key === "Left" || e.key === "ArrowLeft") {
                leftPressed = false;
            }
        }

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

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

// Function to draw the bricks
        function drawBricks() {
            for(let c = 0; c < brickColumnCount; c++) {
                for(let r = 0; r < brickRowCount; r++) {
                    if(bricks[c][r].status === 1) {
                        let brickX = (c*(brickWidth+brickPadding)) + brickOffsetLeft;
                        let 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();
                    }
                }
            }
        }

// Function to detect collision with bricks
        function collisionDetection() {
            for(let c = 0; c < brickColumnCount; c++) {
                for(let r = 0; r < brickRowCount; r++) {
                    let 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;
                            score++;
                            if(score === brickRowCount*brickColumnCount) {
                                alert("YOU WIN!");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }

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

// Function to draw the game
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();
            collisionDetection();

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

// Move the ball and handle collision with walls and paddle
            if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx;
            }
            if(y + dy < ballRadius) {
                dy = -dy;
            } else if(y + dy > canvas.height - ballRadius) {
                if(x > paddleX && x < paddleX + paddleWidth) {
                    dy = -dy;
                } else {
                    alert("GAME OVER");
                    document.location.reload();
                }
            }

x += dx;
            y += dy;
            requestAnimationFrame(draw);
        }

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