AI game creator

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

No:12573

←

Prev Next

→

Block Breaker
Developer User4516｜Date and time 23/8/19 23:45:34
Build time 35.708 sec｜Game capacity 6.522KB｜

Script

Sure! Here's a simple implementation of a Block Breaker game using JavaScript and enclosed in `` tags within a single HTML file. Please note that this implementation uses ASCII characters instead of pictograms for simplicity. You can copy and paste the code into an HTML file and open it in a web browser to play the game: <br><br> <br> <style> #game { width: 400px; height: 400px; border: 1px solid black; background-color: #f0f0f0; margin: 0 auto; } </style> <canvas id="game"></canvas>

This implementation creates a basic block breaker game where you control a paddle at the bottom of the screen to bounce a ball and break the bricks at the top. The game ends if the ball hits the bottom wall without being caught by the paddle. Please feel free to customize and enhance the game further according to your specific requirements!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's a simple implementation of a Block Breaker game using JavaScript and enclosed in `<script>` tags within a single HTML file. Please note that this implementation uses ASCII characters instead of pictograms for simplicity. You can copy and paste the code into an HTML file and open it in a web browser to play the game:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker</title>
    <style>
        #game {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            background-color: #f0f0f0;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="game"></div>
    
    <script>
        // Game Variables
        var canvas = document.getElementById("game");
        var context = canvas.getContext("2d");
        var x = canvas.width / 2;
        var y = canvas.height - 30;
        var dx = 2;
        var dy = -2;
        var ballRadius = 10;
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;
        var rightPressed = false;
        var leftPressed = false;
        var brickRowCount = 3;
        var brickColumnCount = 5;
        var brickWidth = 75;
        var brickHeight = 20;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;
        var bricks = [];

// Create the 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 };
            }
        }

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

// Mouse listener
        document.addEventListener("mousemove", mouseMoveHandler, false);

// Keyboard event handlers
        function keyDownHandler(e) {
            if (e.key === "Right" || e.key === "ArrowRight") {
                rightPressed = true;
            } else if (e.key === "Left" || e.key === "ArrowLeft") {
                leftPressed = true;
            }
        }

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

// Mouse event handler
        function mouseMoveHandler(e) {
            var relativeX = e.clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                paddleX = relativeX - paddleWidth / 2;
            }
        }

// Collision detection between ball and bricks
        function collisionDetection() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    var brick = bricks[c][r];
                    if (brick.status === 1) {
                        if (
                            x > brick.x &&
                            x < brick.x + brickWidth &&
                            y > brick.y &&
                            y < brick.y + brickHeight
                        ) {
                            dy = -dy;
                            brick.status = 0;
                        }
                    }
                }
            }
        }

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

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

// Draw the bricks
        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;
                        context.beginPath();
                        context.rect(brickX, brickY, brickWidth, brickHeight);
                        context.fillStyle = "#0095DD";
                        context.fill();
                        context.closePath();
                    }
                }
            }
        }

// Draw the score
        function drawScore() {
            context.font = "16px Arial";
            context.fillStyle = "#0095DD";
            context.fillText("Score: " + score, 8, 20);
        }

// Game Loop
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();
            collisionDetection();

// Ball movement logic
            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx;
            }
            if (y + dy < ballRadius) {
                dy = -dy;
            } else if (y + dy > canvas.height - ballRadius) {
                if (x > paddleX && x < paddleX + paddleWidth) {
                    dy = -dy;
                } else {
                    alert("Game Over");
                    document.location.reload();
                }
            }

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

x += dx;
            y += dy;

requestAnimationFrame(draw);
        }

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

This implementation creates a basic block breaker game where you control a paddle at the bottom of the screen to bounce a ball and break the bricks at the top. The game ends if the ball hits the bottom wall without being caught by the paddle.

Please feel free to customize and enhance the game further according to your specific requirements!