Block Breaker's game | AI game creator

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

No:21947

59

Block Breaker
Developer User10121｜Date and time 23/10/19 11:28:35
Build time 104.39 sec｜Game capacity 5.807KB｜

Sure! Here's an example implementation of a simple Block Breaker game using JavaScript and HTML:

This code sets up a canvas element where the game is rendered. The player controls a paddle using either arrow keys or mouse movements to prevent a ball from hitting the bottom of the canvas. The ball bounces off the paddle and breaks the bricks at the top of the canvas. The game ends if the ball fails to hit the paddle. Note: The code provided is a basic implementation of a Block Breaker game and can be further enhanced with additional features, levels, scoring, sound effects, etc.

→ 　

0　

0　

　
　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

Sure! Here's an example implementation of a simple Block Breaker game using JavaScript and HTML:

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

<script>
        // Game setup
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        
        // Ball properties
        var ballX = canvas.width / 2;
        var ballY = canvas.height - 30;
        var ballRadius = 10;
        var dx = 2;
        var dy = -2;
        
        // Paddle properties
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;
        var rightPressed = false;
        var leftPressed = false;
        
        // 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 };
            }
        }
        
        // Game controls
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);
        document.addEventListener("mousemove", mouseMoveHandler, false);
        
        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;
            }
        }
        
        function mouseMoveHandler(event) {
            var relativeX = event.clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                paddleX = relativeX - paddleWidth / 2;
            }
        }
        
        // Collision detection
        function collisionDetection() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    var b = bricks[c][r];
                    if (b.status == 1) {
                        if (ballX > b.x && ballX < b.x + brickWidth && ballY > b.y && ballY < b.y + brickHeight) {
                            dy = -dy;
                            b.status = 0;
                        }
                    }
                }
            }
        }
        
        // Game loop
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            collisionDetection();
            
            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
                    document.location.reload();
                }
            }
            
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            } else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }
            
            ballX += dx;
            ballY += dy;
            requestAnimationFrame(draw);
        }
        
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 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 drawBricks() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status == 1) {
                        var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
                        var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
                        bricks[c][r].x = brickX;
                        bricks[c][r].y = brickY;
                        ctx.beginPath();
                        ctx.rect(brickX, brickY, brickWidth, brickHeight);
                        ctx.fillStyle = "#0095DD";
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }
        
        draw();
    </script>
</body>
</html>
```

This code sets up a canvas element where the game is rendered. The player controls a paddle using either arrow keys or mouse movements to prevent a ball from hitting the bottom of the canvas. The ball bounces off the paddle and breaks the bricks at the top of the canvas. The game ends if the ball fails to hit the paddle.

Note: The code provided is a basic implementation of a Block Breaker game and can be further enhanced with additional features, levels, scoring, sound effects, etc.