AI game creator

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

No:40841

←

Prev Next

→

Block Breaker
Developer User18278｜Date and time 24/2/4 8:51:39
Build time 16.185 sec｜Game capacity 5.972KB｜

Script

Sure, here's an example of a simple Block Breaker game implemented as a single HTML file using JavaScript:

Copy the above code and save it as a `.html` file. Open the file in a web browser on your smartphone, and you should be able to play the Block Breaker game. Use the left and right arrow keys or on-screen controls to move the paddle, and try to break all the blocks using the bouncing ball. Enjoy the game!

←

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</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize the canvas and context
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

// Set up game variables
        const paddleWidth = 80;
        const paddleHeight = 10;
        const paddleSpeed = 8;
        const blockWidth = 75;
        const blockHeight = 20;
        const blockRowCount = 5;
        const blockColumnCount = 8;
        const ballRadius = 10;
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        let ballDX = 2;
        let ballDY = -2;
        let paddleX = (canvas.width - paddleWidth) / 2;
        let rightPressed = false;
        let leftPressed = false;
        let blocks = [];

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

// Listen for key events
        document.addEventListener('keydown', keyDownHandler, false);
        document.addEventListener('keyup', keyUpHandler, false);

// Move the paddle based on key events
        function keyDownHandler(event) {
            if (event.key === 'Right' || event.key === 'ArrowRight') {
                rightPressed = true;
            } else if (event.key === 'Left' || event.key === 'ArrowLeft') {
                leftPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.key === 'Right' || event.key === 'ArrowRight') {
                rightPressed = false;
            } else if (event.key === 'Left' || event.key === 'ArrowLeft') {
                leftPressed = false;
            }
        }

// Move the paddle and update the game state
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBlocks();
            drawPaddle();
            drawBall();

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

// Move the ball
            ballX += ballDX;
            ballY += ballDY;

// Check for ball collision with walls
            if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
                ballDX = -ballDX;
            }
            if (ballY - ballRadius < 0) {
                ballDY = -ballDY;
            }

// Check for ball collision with paddle
            if (
                ballY + ballRadius > canvas.height - paddleHeight &&
                ballX > paddleX &&
                ballX < paddleX + paddleWidth
            ) {
                ballDY = -ballDY;
            }

// Check for ball collision with blocks
            for (let c = 0; c < blockColumnCount; c++) {
                for (let r = 0; r < blockRowCount; r++) {
                    const block = blocks[c * blockRowCount + r];

if (block.status === 1) {
                        if (
                            ballX > block.x &&
                            ballX < block.x + blockWidth &&
                            ballY > block.y &&
                            ballY < block.y + blockHeight
                        ) {
                            ballDY = -ballDY;
                            block.status = 0;
                        }
                    }
                }
            }

// Game over condition
            if (ballY + ballRadius > canvas.height) {
                alert('Game Over');
                document.location.reload();
            }

requestAnimationFrame(update);
        }

// Draw the paddle
        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = '#0095DD';
            ctx.fill();
            ctx.closePath();
        }

// Draw the blocks
        function drawBlocks() {
            for (let c = 0; c < blockColumnCount; c++) {
                for (let r = 0; r < blockRowCount; r++) {
                    const block = blocks[c * blockRowCount + r];

if (block.status === 1) {
                        const blockX = r * (blockWidth + 10) + 30;
                        const blockY = c * (blockHeight + 10) + 30;
                        block.x = blockX;
                        block.y = blockY;

ctx.beginPath();
                        ctx.rect(blockX, blockY, blockWidth, blockHeight);
                        ctx.fillStyle = '#0095DD';
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }

// Draw the ball
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = '#0095DD';
            ctx.fill();
            ctx.closePath();
        }

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