AI game creator

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

No:14571

←

Prev Next

→

Block Breaker
Developer User6282｜Date and time 23/9/3 4:05:34
Build time 44.957 sec｜Game capacity 5.975KB｜

Script

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

This HTML file creates a canvas element where the game is rendered using JavaScript. The game consists of a ball, a paddle, and bricks that need to be destroyed by bouncing the ball off the paddle. The player controls the paddle using keyboard arrow keys or by moving the mouse. You can open this HTML file in a web browser on your smartphone or any other device to play the Block Breaker game. Enjoy!

←

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>
    <meta charset="UTF-8">
    <title>Block Breaker</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body onload="startGame()">

var ball = { x: canvas.width / 2, y: canvas.height - 30, dx: 2, dy: -2, radius: 10 };
    var paddle = { x: (canvas.width - 75) / 2, width: 75, height: 10 };
    var bricks = [];
    var brickRowCount = 3;
    var brickColumnCount = 5;
    var brickWidth = 75;
    var brickHeight = 20;
    var brickPadding = 10;
    var brickOffsetTop = 30;
    var brickOffsetLeft = 30;
    var score = 0;
    var lives = 3;

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

document.addEventListener("keydown", keyDownHandler);
    document.addEventListener("keyup", keyUpHandler);
    document.addEventListener("mousemove", mouseMoveHandler);

function startGame() {
        canvas.width = window.innerWidth - 10;
        canvas.height = window.innerHeight - 10;
        setInterval(updateGame, 10);
    }

function updateGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBricks();
        drawPaddle();
        drawBall();
        collisionDetection();
        drawScore();
        drawLives();

if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
            ball.dx = -ball.dx;
        }
        if (ball.y + ball.dy < ball.radius) {
            ball.dy = -ball.dy;
        } else if (ball.y + ball.dy > canvas.height - ball.radius) {
            if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
                ball.dy = -ball.dy;
            } else {
                lives--;
                if (!lives) {
                    endGame();
                } else {
                    ball.x = canvas.width / 2;
                    ball.y = canvas.height - 30;
                    ball.dx = 2;
                    ball.dy = -2;
                    paddle.x = (canvas.width - paddle.width) / 2;
                }
            }
        }

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

ball.x += ball.dx;
        ball.y += ball.dy;
    }

function drawBall() {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }

function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
        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);
    }

function keyDownHandler(e) {
        if (e.keyCode == 39) {
            rightPressed = true;
        } else if (e.keyCode == 37) {
            leftPressed = true;
        }
    }

function keyUpHandler(e) {
        if (e.keyCode == 39) {
            rightPressed = false;
        } else if (e.keyCode == 37) {
            leftPressed = false;
        }
    }

function mouseMoveHandler(e) {
        var relativeX = e.clientX - canvas.offsetLeft;
        if (relativeX > 0 && relativeX < canvas.width) {
            paddle.x = relativeX - paddle.width / 2;
        }
    }

function endGame() {
        clearInterval(interval);
        alert("Game Over");
    }
</script>

</body>
</html>
```

This HTML file creates a canvas element where the game is rendered using JavaScript. The game consists of a ball, a paddle, and bricks that need to be destroyed by bouncing the ball off the paddle. The player controls the paddle using keyboard arrow keys or by moving the mouse.

You can open this HTML file in a web browser on your smartphone or any other device to play the Block Breaker game. Enjoy!