AI game creator

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

No:39856

←

Prev Next

→

反射光
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/30 17:56:25
Build time 27.186 sec｜Game capacity 7.304KB｜

Script

了解しました。以下に示すのは、スマートフォンで遊べる簡単なブロック崩しゲームの実装例です。

上記のコードでは、ブロック崩しゲームを実装しています。canvas要素を使用し、JavaScriptで描画や物理的な挙動を制御しています。ブロックを壊すとスコアが上がり、すべてのブロックを壊すと「YOU WIN!」のアラートが表示されます。ボールがパドルを通過するとライフが減り、ライフがなくなると「GAME OVER」のアラートが表示されます。このゲームでは、スマートフォンのタッチ操作でパドルを動かすことができます。ブラウザ上で上記のコードを実行すると、ゲームがプレイできます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に示すのは、スマートフォンで遊べる簡単なブロック崩しゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ブロック崩しゲーム</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>

init: function() {
                this.ctx = this.canvas.getContext("2d");
                this.createBricks();
                this.draw();
                this.update();
                this.start();
            },

createBricks: function() {
                for (var c = 0; c < this.brickColumnCount; c++) {
                    for (var r = 0; r < this.brickRowCount; r++) {
                        this.bricks.push({
                            x: (c * (this.brickWidth + this.brickPadding)) + this.brickOffsetLeft,
                            y: (r * (this.brickHeight + this.brickPadding)) + this.brickOffsetTop,
                            status: 1
                        });
                    }
                }
            },

drawBricks: function() {
                for (var i = 0; i < this.bricks.length; i++) {
                    if (this.bricks[i].status === 1) {
                        var brickX = this.bricks[i].x;
                        var brickY = this.bricks[i].y;
                        this.ctx.beginPath();
                        this.ctx.rect(brickX, brickY, this.brickWidth, this.brickHeight);
                        this.ctx.fillStyle = "#0095DD";
                        this.ctx.fill();
                        this.ctx.closePath();
                    }
                }
            },

collisionDetection: function() {
                for (var i = 0; i < this.bricks.length; i++) {
                    var b = this.bricks[i];
                    if (b.status === 1) {
                        if (this.ball.x > b.x && this.ball.x < b.x + this.brickWidth && this.ball.y > b.y && this.ball.y < b.y + this.brickHeight) {
                            this.ball.dy = -this.ball.dy;
                            b.status = 0;
                            this.score++;
                            if (this.score === this.brickRowCount * this.brickColumnCount) {
                                alert("YOU WIN!");
                                document.location.reload();
                            }
                        }
                    }
                }
            },

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

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

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

drawPaddle: function() {
                this.ctx.beginPath();
                this.ctx.rect(this.paddle.x, this.paddle.y, this.paddle.width, this.paddle.height);
                this.ctx.fillStyle = "#0095DD";
                this.ctx.fill();
                this.ctx.closePath();
            },

draw: function() {
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // キャンバスをクリア
                this.drawBricks();
                this.drawBall();
                this.drawPaddle();
                this.drawScore();
                this.drawLives();
            },

update: function() {
                // ボールの移動
                this.ball.x += this.ball.dx;
                this.ball.y += 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.ball.y + this.ball.dy < this.ball.radius) {
                    this.ball.dy = -this.ball.dy;
                } else if (this.ball.y + this.ball.dy > this.canvas.height - this.ball.radius) {
                    if (this.ball.x > this.paddle.x && this.ball.x < this.paddle.x + this.paddle.width) {
                        this.ball.dy = -this.ball.dy;
                    } else {
                        this.lives--;
                        if (!this.lives) {
                            alert("GAME OVER");
                            document.location.reload();
                        } else {
                            this.ball.x = 160;
                            this.ball.y = 240;
                            this.ball.dx = 2;
                            this.ball.dy = -2;
                            this.paddle.x = 140;
                        }
                    }
                }

// パドルの移動
                document.addEventListener("touchmove", function(e) {
                    var relativeX = e.changedTouches[0].pageX - this.canvas.offsetLeft;
                    if (relativeX > 0 && relativeX < this.canvas.width) {
                        this.paddle.x = relativeX - this.paddle.width / 2;
                    }
                }.bind(this), false);

this.collisionDetection();
            },

start: function() {
                setInterval(function() {
                    this.update();
                    this.draw();
                }.bind(this), 10);
            }
        };

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

このゲームでは、スマートフォンのタッチ操作でパドルを動かすことができます。ブラウザ上で上記のコードを実行すると、ゲームがプレイできます。