AI game creator

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

No:36037

←

Prev Next

→

Block Breaker
Developer User16711｜Date and time 24/1/16 8:00:27
Build time 18.788 sec｜Game capacity 5.671KB｜

Script

Sure! Below is an example of a simple Block Breaker game implemented as a single HTML file:

You can copy and save the above code in a .html file, and open it in a web browser to play the game. The game is controlled by the left and right arrow keys on a keyboard, assuming a smartphone operation would require additional touch event handling. The game creates a canvas where blocks, a paddle, and a ball are rendered. The goal is to bounce the ball off the paddle and break all the blocks. If the ball hits the bottom wall, the game is over. When all blocks are destroyed, an alert message pops up and the game is reset. Please note that this is a simple implementation of the game and can be further enhanced with additional features and improvements.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Below is an example of a simple Block Breaker game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker</title>
    <style>
        #gameCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Paddle properties
        var paddleWidth = 80;
        var paddleHeight = 10;
        var paddleX = 200;
        var paddleSpeed = 5;

// Ball properties
        var ballRadius = 8;
        var ballX = 200;
        var ballY = 200;
        var ballSpeedX = 3;
        var ballSpeedY = -3;

// Block properties
        var blockWidth = 40;
        var blockHeight = 20;
        var numBlocks = 20;
        var blockRows = 4;
        var blockColors = ['#FF4136', '#FF851B', '#FFDC00', '#2ECC40'];

// Initialize the game
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
            document.addEventListener("keydown", movePaddle);

paddle = {
                width: paddleWidth,
                height: paddleHeight,
                x: paddleX,
                speed: paddleSpeed
            };

ball = {
                radius: ballRadius,
                x: ballX,
                y: ballY,
                speedX: ballSpeedX,
                speedY: ballSpeedY
            };

blocks = [];
            for (var row = 0; row < blockRows; row++) {
                for (var col = 0; col < numBlocks / blockRows; col++) {
                    blocks.push({
                        x: col * (blockWidth + 10) + 35,
                        y: row * (blockHeight + 10) + 30,
                        width: blockWidth,
                        height: blockHeight,
                        color: blockColors[row]
                    });
                }
            }

setInterval(updateGame, 10);
        }

// Update game state and render objects
        function updateGame() {
            clearCanvas();
            moveBall();
            drawPaddle();
            drawBall();
            drawBlocks();

// Game over condition
            if (ball.y + ball.radius > canvas.height) {
                clearInterval(updateGame);
                alert("Game Over!");
                document.location.reload();
            }
        }

// Clear the canvas
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

// Move paddle left or right
        function movePaddle(event) {
            if (event.key === "ArrowLeft" && paddle.x > 0) {
                paddle.x -= paddle.speed;
            } else if (event.key === "ArrowRight" && paddle.x < canvas.width - paddle.width) {
                paddle.x += paddle.speed;
            }
        }

// Move the ball
        function moveBall() {
            ball.x += ball.speedX;
            ball.y += ball.speedY;

// Ball collision with walls
            if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
                ball.speedX *= -1;
            }
            if (ball.y - ball.radius < 0) {
                ball.speedY *= -1;
            }

// Ball collision with paddle
            if (ball.y + ball.radius > paddle.height &&
                ball.x + ball.radius > paddle.x &&
                ball.x - ball.radius < paddle.x + paddle.width) {
                ball.speedY *= -1;
            }

// Ball collision with blocks
            for (var i = 0; i < blocks.length; i++) {
                var block = blocks[i];
                if (ball.y - ball.radius < block.y + block.height &&
                    ball.x + ball.radius > block.x &&
                    ball.x - ball.radius < block.x + block.width) {
                    ball.speedY *= -1;
                    blocks.splice(i, 1);
                }
            }
        }

// Draw the paddle
        function drawPaddle() {
            context.fillStyle = "#000000";
            context.fillRect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
        }

// Draw the ball
        function drawBall() {
            context.beginPath();
            context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            context.fillStyle = "#000000";
            context.fill();
            context.closePath();
        }

// Draw the blocks
        function drawBlocks() {
            for (var i = 0; i < blocks.length; i++) {
                var block = blocks[i];
                context.fillStyle = block.color;
                context.fillRect(block.x, block.y, block.width, block.height);
            }
        }

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

The game creates a canvas where blocks, a paddle, and a ball are rendered. The goal is to bounce the ball off the paddle and break all the blocks. If the ball hits the bottom wall, the game is over. When all blocks are destroyed, an alert message pops up and the game is reset.

Please note that this is a simple implementation of the game and can be further enhanced with additional features and improvements.