javascript（テトリス006_テトラ（４）での作成）

■４マスのピースで作成。
少しずつ作ってきてようやく４マスのピースで動かせた。３マスからの拡張では大きな変更は必要なかった。点数などを追加した実行画面が下のような感じ。

動かしてみて特に問題はなさそうなのでロジックはこれで完成。あとはゲーム性とかデザイン性かな。
ゲーム性としては、時間を決めてのタイムアタックとか。時間を決めない耐久とか。あとは、始めに適当なピースを積み上げた状態から崩していくものとか。
デザイン性は、とりあえず点数のみ表示しているけど、時間を入れたり、Anime.jsで行が揃ったときや終了時の演出を入れたりがありそう。
出てきたピースや一度に消したラインの数などのカウントもできそう。

javascript のコードは今は下のような感じだけど、もう少し整理したい。

let block = []
let pattern = []

const block1 = [-5, 5, 4, -6]
const addArray = [[+10, -1, -10, +1], [-1, -10, +1, +10], [-10, +1, +10, -1], [+1, +10, -1, -10]]

const block2 = [-5, 5, 4, -4]
const addArray2 = [[+11, -11, +11, -11], [0, 0, 0, 0], [-9, +9, -9, +9], [+20, -20, +20, -20]]

const block3 = [-5, 5, 4, 3]
const addArray3 = [[+10, -1, -10, +1], [-1, -10, +1, +10], [-10, +1, +10, -1], [-19, +12, +19, -12]]

const block4 = [-6, 5, 4, 3]
const addArray4 = [[+11, +9, -11, -9], [+9, -11, -9, +11], [0, 0, 0, 0], [-9, +11, +9, -11]]

const block5 = [-6, 5, 4, 6]
const addArray5 = [[+1, +10, -1, -10], [-1, -10, +1, +10], [-10, +1, +10, -1], [+8, -21, -8, +21]]

const block6 = [-7, -6, -5, -4]
const addArray6 = [[-8, +8, -8, +8], [+1, -1, +1, -1], [+10, -10, +10, -10], [+19, -19, +19, -19]]

const block7 = [-6, -5, 5, 6]
const addArray7 = [[+2, -2, +2, -2], [+11, -11, +11, -11], [0, 0, 0, 0], [+9, -9, +9, -9]]

const pieces = [block1, block2, block3, block4, block5, block6, block7]
const patternList = [addArray, addArray2, addArray3, addArray4, addArray5, addArray6, addArray7]

const fixedColor = "#99CC99";
const pieceColor = "Red";
const endColor = "Grey";
const bgColor = "White";
const blockinterval = 1000;

let score = 0;

let board = Array(200).fill(0);
/*let board = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    0, 1, 0, 1, 1, 1, 1, 1, 1, 1,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 1,
];*/

let timer;

document.addEventListener('keypress', keypress_event);

function game_start() {

    block = createPieces();
    synchronizeBoard();
    $('.score').html('00000');


    timer = setInterval(function () {
        parallelMovetoDown(block);
    }, blockinterval);
}

function keypress_event(e) {

    if (e.key === 'a' || e.key === 'A') {
        parallelMovetoLeft(block);
    } else if (e.key === 'd' || e.key === 'D') {
        parallelMovetoRight(block);
    } else if (e.key === 'c' || e.key === 'C') {
        parallelMovetoDown(block);
    } else if (e.key === 's' || e.key === 'S') {
        rotationMove(block);
    }
    return false;
}

function createPieces() {
    let tempblock = [];
        let random = Math.floor(Math.random() * 7);
    //let random = 5;
    let block = pieces[random];
    let addArray = patternList[random];

    for (let i = 0; i < block.length; i++) {
        tempblock[i] = block[i];
    }
    pattern = [];
    for (let i = 0; i < addArray.length; i++) {
        let tempArr = [];
        for (let j = 0; j < addArray[i].length; j++) {
            tempArr.push(addArray[i][j]);
        }
        pattern.push(tempArr);
    }

    for (let i = 0; i < tempblock.length; i++) {
        $('.piece' + i).css('z-index', '120');
        if (board[tempblock[i]] === 1) {
            console.log("end");
            clearInterval(timer);
            document.removeEventListener('keypress', keypress_event);
            for (let i = 0; i < tempblock.length; i++) {
                if (tempblock[i] >= 0) {
                    $('.piece' + i).css('left', $('.squ' + tempblock[i]).position().left + 'px');
                    $('.piece' + i).css('top', $('.squ' + tempblock[i]).position().top + 'px');
                    $('.piece' + i).css('background-color', endColor);
                }
            }
            for (let i = 0; i < board.length; i++) {
                if (board[i] === 1) {
                    $('.squ' + i).css('background-color', endColor);
                }
            }
        }
    }
    return tempblock;
}

function parallelMovetoLeft(tempblock) {

    let minPos = 9;
    let isCheckedtoPiece = false;
    for (let i = 0; i < tempblock.length; i++) {
        let temp = ('000' + tempblock[i]).slice(-1);
        minPos = Math.min(temp, minPos);
        if (board[tempblock[i] - 1] === 1) {
            isCheckedtoPiece = true;
        } else if (tempblock[i] < 0) {
            isCheckedtoPiece = true;
        }
    }
    minPos = minPos - 1;

    if (minPos === -1 || isCheckedtoPiece === true) {
        minPos = 9;
    } else {
        for (let i = 0; i < tempblock.length; i++) {
            tempblock[i] = tempblock[i] - 1;
            $('.piece' + i).css('left', $('.squ' + tempblock[i]).position().left + 'px');
            $('.piece' + i).css('top', $('.squ' + tempblock[i]).position().top + 'px');
            $('.piece' + i).css('background-color', pieceColor);
            minPos = 9;
        }
    }
}

function parallelMovetoRight(tempblock) {

    let maxPos = 0;
    let isCheckedtoPiece = false;
    for (let i = 0; i < tempblock.length; i++) {
        let temp = ('000' + tempblock[i]).slice(-1);
        maxPos = Math.max(temp, maxPos);
        if (board[tempblock[i] + 1] === 1) {
            isCheckedtoPiece = true;
        } else if (tempblock[i] < 0) {
            isCheckedtoPiece = true;
        }
    }
    maxPos = maxPos + 1;

    if (maxPos === 10 || isCheckedtoPiece === true) {
        maxPos = 0;
    } else {
        for (let i = 0; i < tempblock.length; i++) {
            tempblock[i] = tempblock[i] + 1;
            $('.piece' + i).css('left', $('.squ' + tempblock[i]).position().left + 'px');
            $('.piece' + i).css('top', $('.squ' + tempblock[i]).position().top + 'px');
            $('.piece' + i).css('background-color', pieceColor);
            maxPos = 0;
        }
    }
}

function parallelMovetoDown(tempblock) {

    let isFixed = false;
    for (let i = 0; i < tempblock.length; i++) {
        if ($('.squ' + (tempblock[i] + 10)).get(0) === undefined || board[tempblock[i] + 10] === 1) {
            isFixed = true;
        }
    }
    if (isFixed === true) {
        for (let i = 0; i < tempblock.length; i++) {
            $('.squ' + tempblock[i]).css('background-color', fixedColor);
            $('.piece' + i).css('left', '0px');
            $('.piece' + i).css('top', '0px');
            $('.piece' + i).css('display', 'none');
            $('.piece' + i).css('z-index', '10');
            board[tempblock[i]] = 1;
        }
        deleteSetLine();
        block = createPieces();
    } else {
        for (let i = 0; i < tempblock.length; i++) {
            tempblock[i] = tempblock[i] + 10;
            $('.piece' + i).css('display', 'block');
            $('.piece' + i).css('left', $('.squ' + tempblock[i]).position().left + 'px');
            $('.piece' + i).css('top', $('.squ' + tempblock[i]).position().top + 'px');
            $('.piece' + i).css('background-color', pieceColor);
        }
    }
    return
}


function rotationMove(tempblock) {

    let isCheckedtoPiece = false;
    let oneDigitinID = [];
    for (let i = 0; i < tempblock.length; i++) {
        if ($('.squ' + (tempblock[i] + pattern[i][0])).get(0) === undefined || board[tempblock[i] + pattern[i][0]] === 1) {
            isCheckedtoPiece = true;
        } else if (tempblock[i] < 0) {
            isCheckedtoPiece = true;
        } else {
            oneDigitinID.push((tempblock[i] + pattern[i][0]) % 10);
        }
    }
    if (Math.max(...oneDigitinID) === 9 && Math.min(...oneDigitinID) === 0) {
        isCheckedtoPiece = true;
    }
    if (isCheckedtoPiece === true) {
    } else {
        for (let i = 0; i < tempblock.length; i++) {
            tempblock[i] = tempblock[i] + pattern[i][0];
            $('.piece' + i).css('left', $('.squ' + tempblock[i]).position().left + 'px');
            $('.piece' + i).css('top', $('.squ' + tempblock[i]).position().top + 'px');
            $('.piece' + i).css('background-color', pieceColor);
        }

        for (let i = 0; i < pattern.length; i++) {
            let temp = pattern[i].shift();
            pattern[i].push(temp);
        }
    }
}

function deleteSetLine() {
    let deleted = [];
    for (let i = 0; i < 20; i++) {
        let isDeletedLine = 0;
        for (let j = 0; j < 10; j++) {
            if (board[i * 10 + j] === 0) {
                break;
            } else {
                isDeletedLine++;
            }
        }
        if (isDeletedLine === 10) {
            deleted.push(i);
        }
    }
    if (deleted.length > 0) {
        if (deleted.length === 4) {
            score = score + 1000
        } else if (deleted.length === 3) {
            score = score + 400
        } else if (deleted.length === 2) {
            score = score + 200
        } else if (deleted.length === 1) {
            score = score + 100
        }
        let scoretemp = ('00000' + score).slice(-6);
        $('.score').html(scoretemp);

        for (const start_line of deleted) {
            board.splice(start_line * 10, 10);
            board.unshift(0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
            synchronizeBoard();
            deleted = [];
        }
    }
}

function synchronizeBoard() {
    for (let i = 0; i < 200; i++) {
        if (board[i] === 0) {
            let temp = i;
            $('.squ' + temp).css('background-color', bgColor);
        } else {
            let temp = i;
            $('.squ' + temp).css('background-color', fixedColor);
        }
    }
}