AI game creator

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

No:22913

←

Prev Next

→

Block Breaker
Developer User10596｜Date and time 23/10/26 16:30:44
Build time 116.476 sec｜Game capacity 7.203KB｜

Script

Sure! Here's a simple implementation of a Block Breaker game using JavaScript, HTML, and CSS. The game is enclosed within script tags and can be played as a finished game by opening the HTML file in a web browser, preferably on a smartphone. Pictograms are not used in this implementation, but you can customize it to include them if you prefer.

To play the game, you need to save the above code into a file with the ".html" extension (e.g., `block_breaker_game.html`) and open it using a web browser on your smartphone. You can move the paddle using the keyboard arrow keys or by dragging your finger across the screen. The objective is to break all the bricks using the ball without letting it touch the bottom of the canvas.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker</title>
    <style>
        #gameCanvas {
            position: absolute;
            top: 40px;
            left: 0;
            right: 0;
            margin: auto;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const ballRadius = 10;
            let ballX = canvas.width / 2;
            let ballY = canvas.height - 30;
            let ballDx = 2;
            let ballDy = -2;

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

const brickRowCount = 3;
            const brickColumnCount = 5;
            const brickWidth = 75;
            const brickHeight = 20;
            const brickPadding = 10;
            const brickOffsetTop = 30;
            const brickOffsetLeft = 30;

let score = 0;

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

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

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

function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawBricks();
                drawBall();
                drawPaddle();
                collisionDetection();
                drawScore();

if (ballX + ballDx > canvas.width - ballRadius || ballX + ballDx < ballRadius) {
                    ballDx = -ballDx;
                }
                if (ballY + ballDy < ballRadius) {
                    ballDy = -ballDy;
                } else if (ballY + ballDy > canvas.height - ballRadius) {
                    if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                        ballDy = -ballDy;
                    } else {
                        alert("Game Over!");
                        document.location.reload();
                    }
                }

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

ballX += ballDx;
                ballY += ballDy;

requestAnimationFrame(draw);
            }

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

function mouseMoveHandler(e) {
                const relativeX = e.clientX - canvas.offsetLeft;
                if (relativeX > 0 && relativeX < canvas.width) {
                    paddleX = relativeX - paddleWidth / 2;
                }
            }

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

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