AI game creator

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

No:12620

109

←

Prev Next

→

Block Breaker
Developer User5340｜Date and time 23/8/20 23:56:00
Build time 38.234 sec｜Game capacity 6.799KB｜

Script

Sure! Here's a simple implementation of a Block Breaker game using JavaScript, HTML, and pictograms. Please note that due to the limitations of the text-based environment, the interactive features of the game won't be functional here, but you can copy the code below and run it as a single HTML file in your browser to play the game.

Make sure to save the game assets (ball.png, paddle.png, brick.png) in the same directory as the HTML file for them to be loaded correctly. You can use any pictograms or images of your choice by replacing the `ballImage.src`, `paddleImage.src`, and `brickImage.src` URLs with the respective file names. Simply open the HTML file on your smartphone's browser, and you should be able to play the Block Breaker game using touch controls. Enjoy playing the game!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Pictogram assets
        var ballImage = document.createElement("img");
        ballImage.src = "ball.png";

var paddleImage = document.createElement("img");
        paddleImage.src = "paddle.png";

var brickImage = document.createElement("img");
        brickImage.src = "brick.png";

// Set starting position and size of the paddle
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;

// Set initial ball position, size, and velocity
        var ballRadius = 10;
        var ballX = canvas.width / 2;
        var ballY = canvas.height - 30;
        var ballDX = 2;
        var ballDY = -2;

// Set brick properties
        var brickRowCount = 3;
        var brickColumnCount = 5;
        var brickWidth = 75;
        var brickHeight = 20;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;

// Create bricks and set their initial states
        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 };
            }
        }

// Keep track of the player's score
        var score = 0;

// Handle paddle movement on touch devices
        function touchMoveHandler(event) {
            var relativeX = event.touches[0].clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                paddleX = relativeX - paddleWidth / 2;
            }
        }

// Check for collision between the ball and bricks
        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
                        ) {
                            ballDY = -ballDY;
                            b.status = 0;
                            score++;
                            if (score == brickRowCount * brickColumnCount) {
                                alert("Congratulations! You win!");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }

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

// Draw the bricks on the canvas
        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.drawImage(brickImage, brickX, brickY, brickWidth, brickHeight);
                    }
                }
            }
        }

// Draw the paddle on the canvas
        function drawPaddle() {
            ctx.drawImage(paddleImage, paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        }

// Draw the ball on the canvas
        function drawBall() {
            ctx.drawImage(ballImage, ballX - ballRadius, ballY - ballRadius, ballRadius * 2, ballRadius * 2);
        }

// Update game state and draw everything on the canvas
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();
            collisionDetection();

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

// Bounce off the walls
            if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
                ballDX = -ballDX;
            }
            if (ballY - ballRadius < 0) {
                ballDY = -ballDY;
            }
            // Game over if the ball hits the bottom edge
            if (ballY + ballRadius > canvas.height) {
                alert("Game Over!");
                document.location.reload();
            }

// Move the paddle on touch devices
            if (touchX > 0 && touchX < canvas.width) {
                paddleX = touchX - paddleWidth / 2;
            }

// Bounce off the paddle
            if (
                ballY + ballRadius > canvas.height - paddleHeight &&
                ballX > paddleX &&
                ballX < paddleX + paddleWidth
            ) {
                ballDY = -ballDY;
            }

requestAnimationFrame(draw);
        }

// Start the game when the webpage finishes loading
        document.addEventListener("DOMContentLoaded", function () {
            requestAnimationFrame(draw);
        });

// Register the touchmove event listener to move the paddle
        document.addEventListener("touchmove", touchMoveHandler, false);
    </script>
</body>
</html>
```

Simply open the HTML file on your smartphone's browser, and you should be able to play the Block Breaker game using touch controls. Enjoy playing the game!