AI game creator

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

No:31918

←

Prev Next

→

Block Breaker
Developer User15273｜Date and time 23/12/28 21:43:44
Build time 59.178 sec｜Game capacity 6.68KB｜

Script

Sure! Here's an example of a simple block breaker game implemented as a single HTML file using JavaScript:

To play the game, simply open the HTML file in a web browser. You can control the paddle's movement using the left and right arrow keys (or corresponding keys on a smartphone). The objective is to break all the bricks by bouncing the ball off the paddle and preventing it from hitting the bottom wall. If you successfully break all the bricks, you win! If the ball hits the bottom wall and you run out of lives, it's game over. Note: This implementation uses the `requestAnimationFrame` method to create smooth animations. However, if you prefer a more simple approach without animations, you can update the `draw()` function to use a regular loop instead.

←

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="480" height="320"></canvas>

// Set initial ball position and speed
        var x = canvas.width / 2;
        var y = canvas.height - 30;
        var dx = 2;
        var dy = -2;

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

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

// Set score and lives
        var score = 0;
        var lives = 3;

// Handle paddle controls
        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;
            }
        }

function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, 10, 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 drawLives() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
        }

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

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

// Move the ball
            x += dx;
            y += dy;

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

requestAnimationFrame(draw);
        }

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

Note: This implementation uses the `requestAnimationFrame` method to create smooth animations. However, if you prefer a more simple approach without animations, you can update the `draw()` function to use a regular loop instead.