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

No:1403

116

←

Prev Next

→

Pu-Yo Pu-Yo
Developer User3329｜Date and time 23/6/18 14:01:23
Build time 77.145 sec｜Game capacity 7.314KB｜

Script

ぷよぷよ

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ぷよぷよ</title>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
    }
    #game-board {
        display: inline-block;
        border: 2px solid black;
        margin-top: 20px;
    }
    .puyo {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
    #score {
        margin-top: 20px;
        font-size: 20px;
    }
</style>
</head>
<body>
<h1>ぷよぷよ</h1>
<div id="game-board"></div>
<div id="score">Score: 0</div>

// ゲームの変数
    let board = []; // 盤面
    let puyo1, puyo2; // 落下中のぷよ
    let score = 0; // スコア

// 盤面の初期化
    for (let x = 0; x < BOARD_WIDTH; x++) {
        board[x] = [];
        for (let y = 0; y < BOARD_HEIGHT; y++) {
            board[x][y] = null;
        }
    }

// 新しいぷよを作成する関数
    function createNewPuyo() {
        const color1 = PUYO_COLORS[Math.floor(Math.random() * PUYO_COLORS.length)];
        const color2 = PUYO_COLORS[Math.floor(Math.random() * PUYO_COLORS.length)];
        puyo1 = {x: Math.floor(BOARD_WIDTH / 2) - 1, y: 0, color: color1};
        puyo2 = {x: Math.floor(BOARD_WIDTH / 2), y: 0, color: color2};
    }

// ぷよを落とす関数
    function dropPuyo() {
        if (canMoveDown()) {
            puyo1.y++;
            puyo2.y++;
        } else {
            // 盤面にぷよを固定する
            board[puyo1.x][puyo1.y] = puyo1.color;
            board[puyo2.x][puyo2.y] = puyo2.color;

// 連結しているぷよを消す
            let connectedPuyos = getConnectedPuyos(puyo1.x, puyo1.y).concat(getConnectedPuyos(puyo2.x, puyo2.y));
            if (connectedPuyos.length >= 4) {
                for (let i = 0; i < connectedPuyos.length; i++) {
                    let x = connectedPuyos[i].x;
                    let y = connectedPuyos[i].y;
                    board[x][y] = null;
                }
                score += connectedPuyos.length * 10;
            }

// 新しいぷよを作成する
            createNewPuyo();
        }
    }

// 左に移動できるかどうかの判定関数
    function canMoveLeft() {
        return puyo1.x > 0 && puyo2.x > 0 && board[puyo1.x - 1][puyo1.y] === null && board[puyo2.x - 1][puyo2.y] === null;
    }

// 右に移動できるかどうかの判定関数
    function canMoveRight() {
        return puyo1.x < BOARD_WIDTH - 1 && puyo2.x < BOARD_WIDTH - 1 && board[puyo1.x + 1][puyo1.y] === null && board[puyo2.x + 1][puyo2.y] === null;
    }

// 下に移動できるかどうかの判定関数
    function canMoveDown() {
        return puyo1.y < BOARD_HEIGHT - 1 && puyo2.y < BOARD_HEIGHT - 1 && board[puyo1.x][puyo1.y + 1] === null && board[puyo2.x][puyo2.y + 1] === null;
    }

// ぷよが連結しているかどうかの判定関数
    function isPuyoConnected(x, y, color, checkedPuyos) {
        if (x < 0 || x >= BOARD_WIDTH || y < 0 || y >= BOARD_HEIGHT || board[x][y] !== color || checkedPuyos[x][y]) {
            return false;
        }
        checkedPuyos[x][y] = true;
        return isPuyoConnected(x - 1, y, color, checkedPuyos) || isPuyoConnected(x + 1, y, color, checkedPuyos) || isPuyoConnected(x, y - 1, color, checkedPuyos) || isPuyoConnected(x, y + 1, color, checkedPuyos);
    }

// 連結しているぷよを取得する関数
    function getConnectedPuyos(x, y) {
        let connectedPuyos = [];
        let color = board[x][y];
        let checkedPuyos = [];
        for (let i = 0; i < BOARD_WIDTH; i++) {
            checkedPuyos[i] = [];
            for (let j = 0; j < BOARD_HEIGHT; j++) {
                checkedPuyos[i][j] = false;
            }
        }
        if (isPuyoConnected(x, y, color, checkedPuyos)) {
            connectedPuyos.push({x: x, y: y});
            if (x > 0 && board[x - 1][y] === color && !checkedPuyos[x - 1][y]) {
                connectedPuyos = connectedPuyos.concat(getConnectedPuyos(x - 1, y));
            }
            if (x < BOARD_WIDTH - 1 && board[x + 1][y] === color && !checkedPuyos[x + 1][y]) {
                connectedPuyos = connectedPuyos.concat(getConnectedPuyos(x + 1, y));
            }
            if (y > 0 && board[x][y - 1] === color && !checkedPuyos[x][y - 1]) {
                connectedPuyos = connectedPuyos.concat(getConnectedPuyos(x, y - 1));
            }
            if (y < BOARD_HEIGHT - 1 && board[x][y + 1] === color && !checkedPuyos[x][y + 1]) {
                connectedPuyos = connectedPuyos.concat(getConnectedPuyos(x, y + 1));
            }
        }
        return connectedPuyos;
    }

// 盤面を表示する関数
    function render() {
        let gameBoardElem = document.getElementById("game-board");
        gameBoardElem.innerHTML = "";
        for (let y = 0; y < BOARD_HEIGHT; y++) {
            for (let x = 0; x < BOARD_WIDTH; x++) {
                let puyoElem = document.createElement("span");
                puyoElem.classList.add("puyo");
                if (board[x][y] != null) {
                    puyoElem.style.backgroundColor = board[x][y];
                }
                gameBoardElem.appendChild(puyoElem);
            }
            let brElem = document.createElement("br");
            gameBoardElem.appendChild(brElem);
        }
        let scoreElem = document.getElementById("score");
        scoreElem.innerHTML = "Score: " + score;
    }

// キーボードの入力を処理する関数
    function handleKeyPress(e) {
        switch(e.code) {
            case "ArrowLeft":
                if (canMoveLeft()) {
                    puyo1.x--;
                    puyo2.x--;
                }
                break;
            case "ArrowRight":
                if (canMoveRight()) {
                    puyo1.x++;
                    puyo2.x++;
                }
                break;
            case "ArrowDown":
                dropPuyo();
                break;
        }
    }

// ゲームループ
    createNewPuyo();
    render();
    setInterval(function() {
        if (canMoveDown()) {
            puyo1.y++;
            puyo2.y++;
            render();
        } else {
            // 盤面にぷよを固定する
            board[puyo1.x][puyo1.y] = puyo1.color;
            board[puyo2.x][puyo2.y] = puyo2.color;

// 新しいぷよを作成する
            createNewPuyo();
            render();
        }
    }, 500);

// キーボードイベントのリスナーを設定する
    document.addEventListener("keydown", handleKeyPress);
</script>
</body>
</html>