AI game creator

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

No:40135

←

Prev Next

→

ブロック崩し
Developer 食べる鶏と熱いタバスコ｜Date and time 24/2/1 7:22:06
Build time 28.044 sec｜Game capacity 8.938KB｜

Script

了解しました。以下にブロック崩しのゲームを実装したHTMLファイルを示します。

このHTMLファイルをブラウザで開くと、ブロック崩しゲームがプレイできます。スマートフォンでも操作が可能です。画面上部にスコアと残機が表示されます。パドルを動かしてボールを跳ね返し、ブロックを壊して点数を稼ぎましょう。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解しました。以下にブロック崩しのゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ブロック崩し</title>
    <style>
        #canvas {
            background-color: black;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>

init: function() {
                this.ctx = this.canvas.getContext("2d");
                this.ball = new Ball(this.canvas.width / 2, this.canvas.height - 30, 10, "#0095DD", 2, -2);
                this.paddle = new Paddle((this.canvas.width - 75) / 2, this.canvas.height - 10, 75, 10, "#0095DD");
                this.createBricks();

document.addEventListener("keydown", this.handleKeyDown.bind(this));
                document.addEventListener("keyup", this.handleKeyUp.bind(this));
                this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
            },

start: function() {
                if (this.gameInterval) return;
                this.gameInterval = setInterval(this.update.bind(this), 10);
            },

stop: function() {
                clearInterval(this.gameInterval);
                this.gameInterval = null;
            },

update: function() {
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.ball.draw(this.ctx);
                this.paddle.draw(this.ctx);
                this.drawBricks();

this.ball.move();
                this.checkCollision();
                this.checkGameOver();
                this.updateScore();

if (this.ball.y + this.ball.dy > this.canvas.height - this.ball.radius || 
                    this.ball.y + this.ball.dy < this.ball.radius) {
                    this.ball.dy = -this.ball.dy;
                }

if (this.ball.x + this.ball.dx > this.canvas.width - this.ball.radius || 
                    this.ball.x + this.ball.dx < this.ball.radius) {
                    this.ball.dx = -this.ball.dx;
                }

if (this.rightPressed && this.paddle.x < this.canvas.width - this.paddle.width) {
                    this.paddle.x += 5;
                }

if (this.leftPressed && this.paddle.x > 0) {
                    this.paddle.x -= 5;
                }
            },

checkCollision: function() {
                // パドルとの衝突判定
                if (this.ball.collision(this.paddle)) {
                    this.ball.dy = -this.ball.dy;
                }

// ブロックとの衝突判定
                for (var row = 0; row < this.bricks.length; row++) {
                    for (var col = 0; col < this.bricks[row].length; col++) {
                        var brick = this.bricks[row][col];
                        if (brick && this.ball.collision(brick)) {
                            this.ball.dy = -this.ball.dy;
                            this.bricks[row][col] = null;
                            this.score += 10;
                        }
                    }
                }
            },

checkGameOver: function() {
                // ゲームオーバー判定
                if (this.ball.y + this.ball.dy > this.canvas.height - this.ball.radius) {
                    this.lives--;

if (this.lives === 0) {
                        this.stop();
                        alert("Game Over");
                    } else {
                        this.ball.reset(this.canvas.width / 2, this.canvas.height - 30);
                    }
                }
            },

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

createBricks: function() {
                for (var row = 0; row < 4; row++) {
                    this.bricks[row] = [];
                    for (var col = 0; col < 6; col++) {
                        var x = (col * 65) + 5;
                        var y = (row * 20) + 30;
                        this.bricks[row][col] = new Brick(x, y, 60, 15, "#0095DD");
                    }
                }
            },

drawBricks: function() {
                for (var row = 0; row < this.bricks.length; row++) {
                    for (var col = 0; col < this.bricks[row].length; col++) {
                        var brick = this.bricks[row][col];
                        if (brick) {
                            brick.draw(this.ctx);
                        }
                    }
                }
            },

handleKeyDown: function(event) {
                if (event.code === "ArrowRight") {
                    this.rightPressed = true;
                } else if (event.code === "ArrowLeft") {
                    this.leftPressed = true;
                }
            },

handleKeyUp: function(event) {
                if (event.code === "ArrowRight") {
                    this.rightPressed = false;
                } else if (event.code === "ArrowLeft") {
                    this.leftPressed = false;
                }
            },

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

// ボールクラス
        function Ball(x, y, radius, color, dx, dy) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.color = color;
            this.dx = dx;
            this.dy = dy;
        }

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

Ball.prototype.move = function() {
            this.x += this.dx;
            this.y += this.dy;
        };

Ball.prototype.collision = function(obj) {
            var distanceX = Math.abs(this.x - obj.x - obj.width / 2);
            var distanceY = Math.abs(this.y - obj.y - obj.height / 2);

if (distanceX > obj.width / 2 + this.radius ||
                distanceY > obj.height / 2 + this.radius) {
                return false;
            }

if (distanceX <= obj.width / 2 ||
                distanceY <= obj.height / 2) {
                return true;
            }

var cornerDistanceSq = (distanceX - obj.width / 2) ** 2 +
                                   (distanceY - obj.height / 2) ** 2;
            return cornerDistanceSq <= this.radius ** 2;
        };

Ball.prototype.reset = function(x, y) {
            this.x = x;
            this.y = y;
            this.dx = 2;
            this.dy = -2;
        };

// パドルクラス
        function Paddle(x, y, width, height, color) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.color = color;
        }

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

// ブロッククラス
        function Brick(x, y, width, height, color) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.color = color;
        }

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

// ゲームの初期化と開始
        game.init();
        game.start();
    </script>
</body>
</html>
```