AI game creator

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

No:33082

←

Prev Next

→

Block Breaker
Developer User15646｜Date and time 24/1/2 15:09:05
Build time 44.876 sec｜Game capacity 6.062KB｜

Script

Sure! Here's a simple implementation of a Block Breaker game using JavaScript and HTML:

To play the game, you can copy this code into a single HTML file (e.g., `block_breaker.html`) and open it in a web browser. The game will be played on a canvas element, and you can control the paddle using either the arrow keys, mouse or touch drag. The objective is to break all the green blocks using the blue ball without letting it touch the bottom of the screen. If the ball touches the bottom, the game is over.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's a simple implementation of a Block Breaker game using JavaScript and HTML:

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

// Ball variables
        var ballRadius = 10;
        var ballX = canvas.width / 2;
        var ballY = canvas.height - 30;
        var ballDX = 2;
        var ballDY = -2;

// Paddle variables
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;
        var rightPressed = false;
        var leftPressed = false;

// Block variables
        var blockRowCount = 3;
        var blockColumnCount = 5;
        var blockWidth = 75;
        var blockHeight = 20;
        var blockPadding = 10;
        var blockOffsetTop = 30;
        var blockOffsetLeft = 30;
        var blocks = [];

// Create the blocks
        for (var c = 0; c < blockColumnCount; c++) {
            blocks[c] = [];
            for (var r = 0; r < blockRowCount; r++) {
                blocks[c][r] = { x: 0, y: 0, status: 1 };
            }
        }

// Event listeners to control the paddle
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);
        document.addEventListener("mousemove", mouseMoveHandler, 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;
            }
        }

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

// Collision detection
        function collisionDetection() {
            for (var c = 0; c < blockColumnCount; c++) {
                for (var r = 0; r < blockRowCount; r++) {
                    var b = blocks[c][r];
                    if (b.status == 1) {
                        if (
                            ballX > b.x &&
                            ballX < b.x + blockWidth &&
                            ballY > b.y &&
                            ballY < b.y + blockHeight
                        ) {
                            ballDY = -ballDY;
                            b.status = 0;
                        }
                    }
                }
            }
        }

// Drawing functions
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "blue";
            ctx.fill();
            ctx.closePath();
        }

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

// Game update function
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            drawPaddle();
            drawBlocks();
            collisionDetection();

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 {
                    // Game over condition
                    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(update);
        }

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