AI game creator

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

No:25218

←

Prev Next

→

Block Breaker
Developer User12303｜Date and time 23/11/19 7:36:21
Build time 164.675 sec｜Game capacity 6.316KB｜

Script

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

To play the game, open the HTML file using a web browser, and you'll see the block breaker game running in the browser window. You can control the paddle using the arrow keys or by moving your mouse. The game features a ball, a paddle, and bricks. The objective is to bounce the ball off the paddle and destroy all the bricks by hitting them with the ball. The player earns points for each brick destroyed and loses lives if the ball hits the bottom of the screen. The game ends when all lives are lost or when all bricks are destroyed. The score and remaining lives are displayed on the screen. Hope you enjoy playing 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 Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #f1f1f1;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="480" height="320"></canvas>

// Brick matrix
    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 };
        }
    }

// Event listeners
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    document.addEventListener("mousemove", mouseMoveHandler, false);

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

function mouseMoveHandler(e) {
        var relativeX = e.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(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                        dy = -dy;
                        b.status = 0;
                        score++;
                        if(score == brickRowCount*brickColumnCount) {
                            alert("Congratulations! You won!");
                            document.location.reload();
                        }
                    }
                }
            }
        }
    }

// Drawing functions
    function drawBall() {
        ctx.beginPath();
        ctx.arc(x, y, 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 drawScore() {
        ctx.font = "16px Arial";
        ctx.fillStyle = "#0095DD";
        ctx.fillText("Score: " + score, 8, 20);
    }

function drawLives() {
        ctx.font = "16px Arial";
        ctx.fillStyle = "#0095DD";
        ctx.fillText("Lives: " + lives, canvas.width-65, 20);
    }

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

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 {
                lives--;
                if(!lives) {
                    alert("Game Over");
                    document.location.reload();
                }
                else {
                    x = canvas.width/2;
                    y = canvas.height-30;
                    dx = 2;
                    dy = -2;
                    paddleX = (canvas.width-paddleWidth)/2;
                }
            }
        }

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

x += dx;
        y += dy;

requestAnimationFrame(draw);
    }

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

To play the game, open the HTML file using a web browser, and you'll see the block breaker game running in the browser window. You can control the paddle using the arrow keys or by moving your mouse.

The game features a ball, a paddle, and bricks. The objective is to bounce the ball off the paddle and destroy all the bricks by hitting them with the ball. The player earns points for each brick destroyed and loses lives if the ball hits the bottom of the screen. The game ends when all lives are lost or when all bricks are destroyed. The score and remaining lives are displayed on the screen.

Hope you enjoy playing the game!