AI game creator

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

No:20475

←

Prev Next

→

Block Breaker
Developer User9067｜Date and time 23/10/10 0:15:14
Build time 32.705 sec｜Game capacity 5.841KB｜

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 save the above code as a .html file and open it in a web browser. You'll see a canvas element representing the game area with a paddle at the bottom, blocks at the top, and a ball bouncing around. Use the left and right arrow keys to move the paddle and prevent the ball from hitting the bottom. The objective is to destroy all the blocks by bouncing the ball off the paddle and hitting the blocks. Please note that this is a basic implementation of a block breaker game, and you can further enhance it by adding more features or improving the graphics as per your requirements.

←

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>
    <title>Block Breaker Game</title>
    <style>
        #gameCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Set initial position and size of the paddle
        let paddleX = (canvas.width - 75) / 2;
        const paddleWidth = 75;
        const paddleHeight = 10;
        const paddleSpeed = 7;
        let rightPressed = false;
        let leftPressed = false;

// Set initial position, size, and movement of the ball
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        const ballRadius = 10;
        let dx = 2;
        let dy = -2;

// Set initial configuration of the blocks
        const blockRowCount = 3;
        const blockColumnCount = 5;
        const blockWidth = 75;
        const blockHeight = 20;
        const blockPadding = 10;
        const blockOffsetTop = 30;
        const blockOffsetLeft = 30;
        let blocks = [];
        for (let c = 0; c < blockColumnCount; c++) {
            blocks[c] = [];
            for (let r = 0; r < blockRowCount; r++) {
                blocks[c][r] = { x: 0, y: 0, status: 1 };
            }
        }

// Handle paddle movement
        function keyDownHandler(event) {
            if (event.keyCode === 39) {
                rightPressed = true;
            } else if (event.keyCode === 37) {
                leftPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.keyCode === 39) {
                rightPressed = false;
            } else if (event.keyCode === 37) {
                leftPressed = false;
            }
        }

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

// Detect collision between ball and blocks
        function collisionDetection() {
            for (let c = 0; c < blockColumnCount; c++) {
                for (let r = 0; r < blockRowCount; r++) {
                    const block = blocks[c][r];
                    if (block.status === 1) {
                        if (ballX > block.x && ballX < block.x + blockWidth && ballY > block.y && ballY < block.y + blockHeight) {
                            dy = -dy;
                            block.status = 0;
                        }
                    }
                }
            }
        }

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

// Draw blocks
            for (let c = 0; c < blockColumnCount; c++) {
                for (let r = 0; r < blockRowCount; r++) {
                    if (blocks[c][r].status === 1) {
                        const blockX = (c * (blockWidth + blockPadding)) + blockOffsetLeft;
                        const blockY = (r * (blockHeight + blockPadding)) + blockOffsetTop;
                        blocks[c][r].x = blockX;
                        blocks[c][r].y = blockY;
                        ctx.beginPath();
                        ctx.rect(blockX, blockY, blockWidth, blockHeight);
                        ctx.fillStyle = "#0095DD";
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }

// Draw paddle
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();

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

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

// Move ball
            ballX += dx;
            ballY += dy;

// Ball collision with walls
            if (ballX + dx > canvas.width - ballRadius || ballX + dx < ballRadius) {
                dx = -dx;
            }
            if (ballY + dy < ballRadius) {
                dy = -dy;
            } else if (ballY + dy > canvas.height - ballRadius) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    dy = -dy;
                } else {
                    // Game over
                    alert("GAME OVER");
                    document.location.reload();
                }
            }

// Detect collision with blocks
            collisionDetection();

requestAnimationFrame(draw);
        }

// Start the game
        draw();
    </script>
</body>
</html>
```

Please note that this is a basic implementation of a block breaker game, and you can further enhance it by adding more features or improving the graphics as per your requirements.