AI game creator

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

No:25016

←

Prev Next

→

Block Breaker
Developer User12087｜Date and time 23/11/16 2:24:23
Build time 209.164 sec｜Game capacity 8.09KB｜

Script

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

This code will render a game canvas, paddle, ball, and bricks for the Block Breaker game. The player can move the paddle horizontally to bounce the ball and break the bricks. The score and number of lives will be displayed on the screen, and the game will end if all lives are lost or all bricks are destroyed.

←

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 Game</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

canvas {
            background: #f2f2f2;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="blockBreakerCanvas" width="400" height="600"></canvas>

// Game variables
            const paddleWidth = 100;
            const paddleHeight = 20;
            const paddleSpeed = 8;
            const brickRowCount = 5;
            const brickColumnCount = 8;
            const brickWidth = 50;
            const brickHeight = 20;
            let score = 0;
            let lives = 3;

// Paddle object
            const paddle = {
                x: canvas.width / 2 - paddleWidth / 2,
                y: canvas.height - paddleHeight,
                width: paddleWidth,
                height: paddleHeight,
                dx: 0
            };

// Ball object
            const ball = {
                x: canvas.width / 2,
                y: canvas.height - paddleHeight - 10,
                radius: 8,
                dx: 4,
                dy: -4
            };

// Brick objects
            const bricks = [];
            for (let row = 0; row < brickRowCount; row++) {
                bricks[row] = [];
                for (let col = 0; col < brickColumnCount; col++) {
                    bricks[row][col] = {
                        x: col * (brickWidth + 10),
                        y: row * (brickHeight + 5),
                        width: brickWidth,
                        height: brickHeight,
                        visible: true
                    };
                }
            }

// Move paddle event listeners
            document.addEventListener("keydown", handleKeyDown);
            document.addEventListener("keyup", handleKeyUp);

// Move paddle functions
            function handleKeyDown(e) {
                if (e.key === "Right" || e.key === "ArrowRight") {
                    paddle.dx = paddleSpeed;
                } else if (e.key === "Left" || e.key === "ArrowLeft") {
                    paddle.dx = -paddleSpeed;
                }
            }

function handleKeyUp(e) {
                if (
                    e.key === "Right" ||
                    e.key === "ArrowRight" ||
                    e.key === "Left" ||
                    e.key === "ArrowLeft"
                ) {
                    paddle.dx = 0;
                }
            }

// Game over and reset
            function resetGame() {
                paddle.x = canvas.width / 2 - paddleWidth / 2;
                ball.x = canvas.width / 2;
                ball.y = canvas.height - paddleHeight - 10;
                ball.dx = 4;
                ball.dy = -4;
                score = 0;
                lives = 3;

for (let row = 0; row < brickRowCount; row++) {
                    for (let col = 0; col < brickColumnCount; col++) {
                        bricks[row][col].visible = true;
                    }
                }
            }

// Collision detection
            function detectCollision() {
                for (let row = 0; row < brickRowCount; row++) {
                    for (let col = 0; col < brickColumnCount; col++) {
                        const brick = bricks[row][col];
                        if (brick.visible) {
                            if (
                                ball.x > brick.x &&
                                ball.x < brick.x + brick.width &&
                                ball.y > brick.y &&
                                ball.y < brick.y + brick.height
                            ) {
                                brick.visible = false;
                                ball.dy = -ball.dy;
                                score++;
                                if (score === brickRowCount * brickColumnCount) {
                                    alert("Congratulations! You won!");
                                    resetGame();
                                }
                            }
                        }
                    }
                }

if (
                    ball.x > paddle.x &&
                    ball.x < paddle.x + paddle.width &&
                    ball.y > paddle.y &&
                    ball.y < paddle.y + paddle.height
                ) {
                    ball.dy = -ball.dy;
                }

if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
                    ball.dx = -ball.dx;
                }

if (ball.y - ball.radius < 0) {
                    ball.dy = -ball.dy;
                }

if (ball.y + ball.radius > canvas.height) {
                    lives--;
                    if (lives === 0) {
                        alert("Game Over! Your score is: " + score);
                        resetGame();
                    } else {
                        resetBall();
                    }
                }
            }

// Reset ball
            function resetBall() {
                ball.x = canvas.width / 2;
                ball.y = canvas.height - paddleHeight - 10;
                ball.dx = 4;
                ball.dy = -4;
            }

// Game loop
            function update() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddle
                ctx.beginPath();
                ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();

// Draw ball
                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();

// Draw bricks
                for (let row = 0; row < brickRowCount; row++) {
                    for (let col = 0; col < brickColumnCount; col++) {
                        const brick = bricks[row][col];
                        if (brick.visible) {
                            ctx.beginPath();
                            ctx.rect(brick.x, brick.y, brick.width, brick.height);
                            ctx.fillStyle = "#0095DD";
                            ctx.fill();
                            ctx.closePath();
                        }
                    }
                }

// Move paddle
                paddle.x += paddle.dx;
                if (paddle.x < 0) {
                    paddle.x = 0;
                } else if (paddle.x + paddle.width > canvas.width) {
                    paddle.x = canvas.width - paddle.width;
                }

// Move ball
                ball.x += ball.dx;
                ball.y += ball.dy;
                detectCollision();

// Display score and lives
                ctx.font = "16px Arial";
                ctx.fillStyle = "#0095DD";
                ctx.fillText("Score: " + score, 8, 20);
                ctx.fillText("Lives: " + lives, canvas.width - 85, 20);

requestAnimationFrame(update);
            }

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