AI game creator

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

No:10945

←

Prev Next

→

Block Breaker
Developer User4723｜Date and time 23/8/5 23:37:20
Build time 51.529 sec｜Game capacity 6.438KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>

<head>
    <title>Block Breaker</title>
</head>

// Game Variables
        var canvas;
        var ctx;
        var paddleX;
        var rightPressed = false;
        var leftPressed = false;
        var ball;
        var bricks;
        var score;

// Paddle Object
        var paddle = {
            width: PADDLE_WIDTH,
            height: PADDLE_HEIGHT,
            color: PADDLE_COLOR
        };

// Ball Object
        function Ball(x, y) {
            this.x = x;
            this.y = y;
            this.radius = BALL_RADIUS;
            this.speedX = BALL_SPEED;
            this.speedY = -BALL_SPEED;

this.draw = function () {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = "#000000";
                ctx.fill();
                ctx.closePath();
            };

this.update = function () {
                this.x += this.speedX;
                this.y += this.speedY;

// Ball collision with walls
                if (this.x + this.radius > canvas.width || this.x - this.radius < 0)
                    this.speedX *= -1;
                if (this.y - this.radius < 0)
                    this.speedY *= -1;

// Ball collision with paddle
                if (this.y + this.radius > canvas.height - paddle.height && this.x > paddleX && this.x < paddleX + paddle.width)
                    this.speedY *= -1;

// Ball collision with bricks
                for (var c = 0; c < BRICK_COLS; c++) {
                    for (var r = 0; r < BRICK_ROWS; r++) {
                        var brick = bricks[c][r];
                        if (brick.status == 1) {
                            if (this.x + this.radius > brick.x && this.x - this.radius < brick.x + BRICK_WIDTH && this.y + this.radius > brick.y && this.y - this.radius < brick.y + BRICK_HEIGHT) {
                                this.speedY *= -1;
                                brick.status = 0;
                                score++;
                            }
                        }
                    }
                }
            };
        }

// Brick Object
        function Brick(x, y, color) {
            this.x = x;
            this.y = y;
            this.width = BRICK_WIDTH;
            this.height = BRICK_HEIGHT;
            this.color = color;
            this.status = 1;

this.draw = function () {
                ctx.beginPath();
                ctx.rect(this.x, this.y, this.width, this.height);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            };
        }

// Event Listeners
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

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

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

// Initialization
        function init() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            paddleX = (canvas.width - paddle.width) / 2;

ball = new Ball(canvas.width / 2, canvas.height - paddle.height - BALL_RADIUS - 5);

bricks = [];
            for (var c = 0; c < BRICK_COLS; c++) {
                bricks[c] = [];
                for (var r = 0; r < BRICK_ROWS; r++) {
                    var brickX = (c * (BRICK_WIDTH + BRICK_PADDING)) + BRICK_OFFSET_LEFT;
                    var brickY = (r * (BRICK_HEIGHT + BRICK_PADDING)) + BRICK_OFFSET_TOP;
                    bricks[c][r] = new Brick(brickX, brickY, BRICK_COLORS[r]);
                }
            }

score = 0;

draw();
            setInterval(update, 10);
        }

// Game Functions
        function drawBricks() {
            for (var c = 0; c < BRICK_COLS; c++)
                for (var r = 0; r < BRICK_ROWS; r++) {
                    var brick = bricks[c][r];
                    if (brick.status == 1)
                        brick.draw();
                }
        }

function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddle.height, paddle.width, paddle.height);
            ctx.fillStyle = paddle.color;
            ctx.fill();
            ctx.closePath();
        }

function drawBall() {
            ball.draw();
        }

function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#000000";
            ctx.fillText("Score: " + score, 8, 20);
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawPaddle();
            drawBall();
            drawScore();
        }

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

function updateBall() {
            ball.update();
        }

function update() {
            updatePaddle();
            updateBall();
            draw();
        }

// Start the game
        init();
    </script>
</body>

</html>