AI game creator

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

No:28760

←

Prev Next

→

Block Breaker
Developer User14229｜Date and time 23/12/14 4:48:06
Build time 70.361 sec｜Game capacity 6.748KB｜

Script

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

Save the above code in a single HTML file (e.g., `block_breaker.html`), and when you open this file in a web browser, it will present you with a Block Breaker game interface. You can control the paddle using the left and right arrow keys on your smartphone. The objective is to break all the bricks by bouncing the ball off the paddle. If the ball touches the bottom edge, the game will end, and an alert box will appear with the message "GAME OVER." You can then reload the page to start a new game. Note: Since the implementation requires using the `<canvas>` element, it may not have perfect responsiveness for all smartphone screen sizes. You may need to adjust the canvas size and paddle speed for optimal gameplay experience on different devices.

←

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 in a single HTML file using JavaScript:

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

// Paddle properties
            var paddleWidth = 80;
            var paddleHeight = 10;
            var paddleX = (canvas.width - paddleWidth) / 2;
            var paddleSpeed = 7;

// Ball properties
            var ballRadius = 10;
            var ballX = canvas.width / 2;
            var ballY = canvas.height - 30;
            var ballDx = 2;
            var ballDy = -2;

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

// Game controls
            var rightPressed = false;
            var leftPressed = false;

// Event listeners
            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 (
                                ballX > b.x &&
                                ballX < b.x + brickWidth &&
                                ballY > b.y &&
                                ballY < b.y + brickHeight
                            ) {
                                ballDy = -ballDy;
                                b.status = 0;
                            }
                        }
                    }
                }
            }

// Draw functions
            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 draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawBricks();
                drawBall();
                drawPaddle();
                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 {
                        alert("GAME OVER");
                        document.location.reload();
                    }
                }

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

ballX += ballDx;
                ballY += ballDy;

requestAnimationFrame(draw);
            }

draw();
        }

// Start the game when the page is loaded
        window.onload = function () {
            startGame();
        };
    </script>
</body>
</html>
```

Note: Since the implementation requires using the `<canvas>` element, it may not have perfect responsiveness for all smartphone screen sizes. You may need to adjust the canvas size and paddle speed for optimal gameplay experience on different devices.