Pu-Yo Pu-Yo's game | AI game creator

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

No:1725

210

Pu-Yo Pu-Yo
Developer User3346｜Date and time 23/6/18 23:04:48
Build time 211.059 sec｜Game capacity 17.072KB｜

→ 　

0　

0　

　

　
　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ぷよぷよ</title>
</head>

<body onload="startGame()">

<canvas id="gameCanvas" width="300" height="600" style="border:1px solid #d3d3d3;"></canvas>

<script>
        // ぷよぷよのゲームオブジェクト
        var game = {
            // ゲームの状態
            state: "ready",
            // スコア
            score: 0,
            // スコアを表示する要素
            scoreElement: null,
            // ぷよの色
            puyoColors: ["red", "blue", "green", "yellow"],
            // ぷよのサイズ
            puyoSize: 30,
            // ぷよの落下速度
            fallSpeed: 1,
            // プレイヤーが操作するぷよの情報
            player: {
                // 操作中のぷよ
                currentPuyo: null,
                // 操作中のぷよの位置
                x: 2,
                y: 0,
                // 操作中のぷよの移動方向
                dx: 0,
                // 操作中のぷよが回転している方向
                rotation: 0,
                // 操作できるかどうか
                canControl: true,
                // 操作が終了したかどうか
                controlFinished: false,
            },
            // フィールドの情報
            field: {
                // フィールドにあるぷよの情報 (0: ぷよがない, 1-4: ぷよの色)
                data: [],
                // フィールドの幅と高さ
                width: 6,
                height: 12,
            },
            // ぷよを作成する関数
            createPuyo: function() {
                // ぷよの色をランダムに決める
                var color1 = this.puyoColors[Math.floor(Math.random() * this.puyoColors.length)];
                var color2 = this.puyoColors[Math.floor(Math.random() * this.puyoColors.length)];
                // ぷよを作成
                var puyo1 = { x: 1, y: 0, color: color1 };
                var puyo2 = { x: 1, y: 1, color: color2 };
                return [puyo1, puyo2];
            },
            // ぷよを描画する関数
            drawPuyo: function(puyo) {
                var ctx = this.context;
                var x = puyo.x * this.puyoSize;
                var y = puyo.y * this.puyoSize;
                ctx.fillStyle = puyo.color;
                ctx.fillRect(x, y, this.puyoSize, this.puyoSize);
                ctx.strokeStyle = "#d3d3d3";
                ctx.strokeRect(x, y, this.puyoSize, this.puyoSize);
            },
            // フィールドを描画する関数
            drawField: function() {
                var ctx = this.context;
                // フィールドの背景を描画
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0, 0, this.width * this.puyoSize, this.height * this.puyoSize);
                // フィールドにあるぷよを描画
                for (var x = 0; x < this.field.width; x++) {
                    for (var y = 0; y < this.field.height; y++) {
                        var puyo = this.field.data[x + y * this.field.width];
                        if (puyo != 0) {
                            var color = this.puyoColors[puyo - 1];
                            this.drawPuyo({ x: x, y: y, color: color });
                        }
                    }
                }
            },
            // スコアを表示する関数
            drawScore: function() {
                var ctx = this.context;
                ctx.fillStyle = "#000000";
                ctx.font = "bold 20px Arial";
                ctx.fillText("Score: " + this.score, 10, 30);
            },
            // ぷよを移動させる関数
            movePuyo: function(puyo, dx, dy) {
                puyo.x += dx;
                puyo.y += dy;
            },
            // ぷよが下に落ちるかどうかの判定をする関数
            canFall: function(puyo) {
                var x = puyo.x;
                var y = puyo.y + 1;
                if (y >= this.field.height) {
                    return false;
                }
                var belowPuyo = this.field.data[x + y * this.field.width];
                return belowPuyo == 0;
            },
            // ぷよを下に落とす関数
            fallPuyo: function(puyo) {
                while (this.canFall(puyo)) {
                    this.movePuyo(puyo, 0, 1);
                }
            },
            // ぷよを落とす関数
            dropPuyo: function(puyo) {
                if (this.canFall(puyo)) {
                    this.movePuyo(puyo, 0, 1);
                } else {
                    // ぷよをフィールドに追加
                    var x = puyo.x;
                    var y = puyo.y;
                    var color = this.puyoColors.indexOf(puyo.color) + 1;
                    this.field.data[x + y * this.field.width] = color;
                    // ぷよを作成
                    this.player.currentPuyo = this.createPuyo();
                    this.player.x = 2;
                    this.player.y = 0;
                    // ぷよが消える場合は消す
                    this.checkPuyo();
                }
            },
            // ぷよが消えるかどうかの判定をする関数
            canClear: function(puyo) {
                var x = puyo.x;
                var y = puyo.y;
                var color = this.field.data[x + y * this.field.width];
                if (color == 0) {
                    return false;
                }
                // 上下左右のぷよを取得
                var upPuyo = this.getPuyo(x, y - 1);
                var downPuyo = this.getPuyo(x, y + 1);
                var leftPuyo = this.getPuyo(x - 1, y);
                var rightPuyo = this.getPuyo(x + 1, y);
                // 連鎖判定のための配列
                var clearList = [puyo];
                // 上下左右の同じ色のぷよを取得する
                this.getSameColorPuyo(puyo, upPuyo, color, clearList);
                this.getSameColorPuyo(puyo, downPuyo, color, clearList);
                this.getSameColorPuyo(puyo, leftPuyo, color, clearList);
                this.getSameColorPuyo(puyo, rightPuyo, color, clearList);
                // ３つ以上つながっている場合は消える
                if (clearList.length >= 3) {
                    return true;
                }
                return false;
            },
            // ぷよが消える場合は消す関数
            checkPuyo: function() {
                var clearFlag = false;
                // 全てのぷよをチェック
                for (var x = 0; x < this.field.width; x++) {
                    for (var y = 0; y < this.field.height; y++) {
                        var puyo = this.getPuyo(x, y);
                        if (puyo) {
                            if (this.canClear(puyo)) {
                                this.clearPuyo(puyo);
                                this.score += 10;
                                clearFlag = true;
                            }
                        }
                    }
                }
                // ぷよを消した場合は再チェック
                if (clearFlag) {
                    this.checkPuyo();
                }
            },
            // ぷよを消す関数
            clearPuyo: function(puyo) {
                var x = puyo.x;
                var y = puyo.y;
                this.field.data[x + y * this.field.width] = 0;
                this.drawField();
            },
            // 上下左右の同じ色のぷよを取得する関数
            getSameColorPuyo: function(puyo, otherPuyo, color, clearList) {
                if (otherPuyo && otherPuyo.color == color && !this.arrayContains(clearList, otherPuyo)) {
                    clearList.push(otherPuyo);
                    var upPuyo = this.getPuyo(otherPuyo.x, otherPuyo.y - 1);
                    var downPuyo = this.getPuyo(otherPuyo.x, otherPuyo.y + 1);
                    var leftPuyo = this.getPuyo(otherPuyo.x - 1, otherPuyo.y);
                    var rightPuyo = this.getPuyo(otherPuyo.x + 1, otherPuyo.y);
                    this.getSameColorPuyo(puyo, upPuyo, color, clearList);
                    this.getSameColorPuyo(puyo, downPuyo, color, clearList);
                    this.getSameColorPuyo(puyo, leftPuyo, color, clearList);
                    this.getSameColorPuyo(puyo, rightPuyo, color, clearList);
                }
            },
            // 指定した位置のぷよを取得する関数
            getPuyo: function(x, y) {
                if (x < 0 || x >= this.field.width) {
                    return null;
                }
                if (y < 0 || y >= this.field.height) {
                    return null;
                }
                var color = this.field.data[x + y * this.field.width];
                if (color == 0) {
                    return null;
                }
                return { x: x, y: y, color: this.puyoColors[color - 1] };
            },
            // 配列に指定した要素が含まれているかどうかを判定する関数
            arrayContains: function(array, element) {
                for (var i = 0; i < array.length; i++) {
                    if (array[i].x == element.x && array[i].y == element.y) {
                        return true;
                    }
                }
                return false;
            },
            // プレイヤーが操作中のぷよを描画する関数
            drawPlayerPuyo: function() {
                var ctx = this.context;
                var currentPuyo = this.player.currentPuyo;
                for (var i = 0; i < currentPuyo.length; i++) {
                    var puyo = currentPuyo[i];
                    var x = (this.player.x + puyo.x) * this.puyoSize;
                    var y = (this.player.y + puyo.y) * this.puyoSize;
                    ctx.fillStyle = puyo.color;
                    ctx.fillRect(x, y, this.puyoSize, this.puyoSize);
                    ctx.strokeStyle = "#d3d3d3";
                    ctx.strokeRect(x, y, this.puyoSize, this.puyoSize);
                }
            },
            // プレイヤーが操作中のぷよを移動する関数
            movePlayerPuyo: function() {
                if (this.player.canControl) {
                    var currentPuyo = this.player.currentPuyo;
                    for (var i = 0; i < currentPuyo.length; i++) {
                        var puyo = currentPuyo[i];
                        var x = this.player.x + puyo.x;
                        var y = this.player.y + puyo.y;
                        var newX = x + this.player.dx;
                        var newY = y;
                        if (newX < 0 || newX >= this.field.width) {
                            newX = x;
                        }
                        if (this.getPuyo(newX, newY)) {
                            this.player.dx = 0;
                            break;
                        }
                    }
                    this.player.x += this.player.dx;
                    this.player.dx = 0;
                }
            },
            // プレイヤーが操作中のぷよを回転する関数
            rotatePlayerPuyo: function() {
                if (this.player.canControl) {
                    var currentPuyo = this.player.currentPuyo;
                    var centerX = currentPuyo[0].x;
                    var centerY = currentPuyo[0].y;
                    for (var i = 1; i < currentPuyo.length; i++) {
                        var puyo = currentPuyo[i];
                        var x = puyo.x - centerX;
                        var y = puyo.y - centerY;
                        if (this.player.rotation == 1) {
                            var newX = -y + centerX;
                            var newY = x + centerY;
                        } else if (this.player.rotation == -1) {
                            var newX = y + centerX;
                            var newY = -x + centerY;
                        } else {
                            var newX = x + centerX;
                            var newY = y + centerY;
                        }
                        if (newX < 0 || newX >= this.field.width || newY < 0 || newY >= this.field.height) {
                            return;
                        }
                        if (this.getPuyo(this.player.x + newX, this.player.y + newY)) {
                            return;
                        }
                        puyo.x = newX;
                        puyo.y = newY;
                    }
                    if (this.player.rotation == 1) {
                        this.player.rotation = -1;
                    } else if (this.player.rotation == -1) {
                        this.player.rotation = 0;
                    } else {
                        this.player.rotation = 1;
                    }
                }
            },
            // ゲームオーバーになった時の処理
            gameOver: function() {
                this.state = "gameover";
                alert("Game Over!");
            },
            // ゲームのダミーオブジェクト
            dummy: {},
            // ゲームを開始する関数
            start: function(canvas) {
                // Canvasの初期設定
                this.canvas = canvas;
                this.context = canvas.getContext("2d");
                // スコアを表示する要素を取得
                this.scoreElement = document.getElementById("score");
                // フィールドの初期化
                this.field.data = new Array(this.field.width * this.field.height);
                // ぷよを作成
                this.player.currentPuyo = this.createPuyo();
                // ゲームのメインループを開始
                setInterval(this.update.bind(this), 20);
            },
            // ゲームのメインループ
            update: function() {
                // ゲームの状態に応じて処理を切り替える
                switch (this.state) {
                    case "ready":
                        // 画面をクリア
                        this.drawField();
                        this.drawPlayerPuyo();
                        // ゲームを開始するためのキー入力を待つ
                        document.onkeydown = function(event) {
                            if (event.keyCode == 32) { // Spaceキー
                                this.state = "playing";
                            }
                        }.bind(this);
                        break;
                    case "playing":
                        // 画面をクリア
                        this.drawField();
                        this.drawPlayerPuyo();
                        // プレイヤーが操作中のぷよを移動する
                        this.movePlayerPuyo();
                        // プレイヤーが操作中のぷよを落とす
                        this.fallPuyo(this.player.currentPuyo[0]);
                        this.fallPuyo(this.player.currentPuyo[1]);
                        // 一定時間ごとにぷよを落とす
                        this.dummy.tick = (this.dummy.tick || 0) + 1;
                        if (this.dummy.tick >= (60 - this.fallSpeed * 10)) {
                            this.dummy.tick = 0;
                            this.dropPuyo(this.player.currentPuyo[0]);
                            this.dropPuyo(this.player.currentPuyo[1]);
                        }
                        // スコアを表示する
                        this.drawScore();
                        // ゲームオーバーになった場合はゲームオーバー処理を行う
                        if (this.getPuyo(this.player.x + 1, this.player.y) || this.getPuyo(this.player.x + 1, this.player.y + 1)) {
                            this.gameOver();
                        }
                        break;
                    case "gameover":
                        // 何もしない
                        break;
                }
            },
        };

// ゲームを開始する関数
        function startGame() {
            game.start(document.getElementById("gameCanvas"));
        }

document.onkeydown = function(event) {
            switch (event.keyCode) {
                case 37: // 左
                    game.player.dx = -1;
                    break;
                case 38: // 上
                    game.rotatePlayerPuyo();
                    break;
                case 39: // 右
                    game.player.dx = 1;
                    break;
                case 40: // 下
                    game.fallSpeed++;
                    break;
            }
        };
    </script>

</body>

</html>