この記事は コラボフロー Advent Calendar 2022 の17日目の記事です。
（追記：コラボフロー Advent Calendar 2023 で、続編を書きました）
「あ゙ぁ…ブロッ…ク消したぃ…」
「ゔぁーっ、ブロック消じたいぃーーーーっ！
」
と、禁断症状におそわれる人がいるくらい、テトリスには中毒性があります。
「テトリス効果」の症状を持つ人も、意外に身近にいるかもしれません。
一方でテトリスによりストレスが解消され、救われた人もいるとかいないとか。
（知らんけどっ！！）
とにかくテトリス好きの私が、コラボフロー上でテトリスができるよう
カスタマイズして「テトリス申請」を作ってみました！
そしてプレイしてみた様子がこちら
申請書のフォーム設定や、カスタマイズ内容などの一部をご紹介します。
Excel方眼紙で画面作成
コラボフローはExcelファイルを取り込んで申請書フォームを作れるので、
テトリス申請のレイアウトをExcel方眼紙で簡単に変えられます 
※Excelフォームを作成する – コラボフローサポート
縦長にしたり横長にしたり、色を変えたり。
（50列もあると1段消すのも大変
）
フォームパーツ設定とブロック表示
フォーム設定で、テトリスのブロック表示エリアには表形式の
「テキスト（一行）」パーツを配置し、値の手入力は不可の設定にしました。
パーツIDはカスタマイズで扱いやすいよう、
列の左からfidColumn1～fidColumn10と連番で設定しています。
そしてテトリスのブロックは「テキスト（一行）」パーツに
JavaScript APIで「■」の文字を値としてセットすることで表現しています。
落下中は普通の「■」、着地したら少し大きい「█」、
消す直前は白抜き「□」をセットと、状態により切り替えています。
（ブロックの表示を切り替えたら、プレイしやすくなりました
）
ブロックの配置管理
ブロック表示エリアは、カスタマイズプログラム内で
以下のように縦横の数値配列で管理しています。
0のところは空欄で落下ブロックを移動できるけど、
0以外は壁や着地済みブロックで移動できない場所になります。
また、JavaScript APIでは表形式のパーツオブジェクトも配列なので、
配置管理配列と連動させてパーツに値をセットすることができます。
例えば、1行1列目にブロックを配置する場合は、
parts.tbl_1.value[0].fidCloumn1.value = '■'
といった具合です。
ブロックの落下
setInterval()関数を使い、一定間隔でブロックを下段に移動させています。
引数「delay」の値を小さくすることで、落下を速くすることができます。
出現するブロックも、カスタマイズ次第で自由に作れます。
（どデカいブロック落ちて来た
）
おわりに
@miko3 さんから教えてもらった紙吹雪ライブラリを使ったら、画面が賑やかになりました
（連続で消せると爽快っ
）
キー入力イベントの話とか、ブロック回転の話とか、Tスピンの話とか、
得点加算の話とかいろいろあるけど、面倒になったので今回はここまで！
カスタマイズのデバッグと称してテトリスやり過ぎました
以下がテトリスカスタマイズのサンプルコードです。
テトリス狂のみなさんの参考になれば幸いです。
collaboflow_tetris.js
class collaboTetris {
'use strict';
constructor() {
this.fallingMino = {
type: null,
length: 0,
y:0,
x:0,
direction: 0
};
this.nextMinoType = null;
this.outputText = ['','■','█','□'];
this.minoType = {
empty: 0,
move: 1,
landed: 2,
remove: 3
};
this.minoShapes = {
T: [[0, 1, 0],[1, 1, 1],[0, 0, 0]],
S: [[0, 1, 1],[1, 1, 0],[0, 0, 0]],
Z: [[1, 1, 0],[0, 1, 1],[0, 0, 0]],
L: [[0, 0, 1],[1, 1, 1],[0, 0, 0]],
J: [[1, 0, 0],[1, 1, 1],[0, 0, 0]],
O: [[0, 0, 0, 0],[0, 1, 1, 0],[0, 1, 1, 0],[0, 0, 0, 0]],
I: [[0, 0, 0, 0],[1, 1, 1, 1],[0, 0, 0, 0],[0, 0, 0, 0]]
};
this.isPlaying = false;
this.score = 0;
this.startTime = 0;
this.baseDelay = 300;
this.currentDelay = 300;
this.minDelay = 100;
this.timerId = '';
}
set scorePartsId(scorePartsId) {
this._scorePartsId = scorePartsId;
}
set stagePartsId(stagePartsId) {
this._stagePartsId = stagePartsId;
}
set nextMinoPartsId(nextMinoPartsId) {
this._nextMinoPartsId = nextMinoPartsId;
}
set parts(parts) {
this.scoreParts = parts[this._scorePartsId];
this.tableParts = parts['tbl_1'].value;
}
init() {
if (!this._stagePartsId) {
alert('Part ID prefix is undefined.');
return;
}
this.rowLength = this.tableParts.length;
const stagePartsId = this._stagePartsId;
const stageParts = Object.keys(this.tableParts[0]).filter(function(partsId){
return partsId.startsWith(stagePartsId);
});
this.columnLength = stageParts.length;
this.stageMinos = this.createStage();
this.emptyRow = this.stageMinos[1].concat();
this.setCSS();
}
createStage() {
let minos = [];
const rowMaxIndex = this.rowLength + 1;
const columnMaxIndex = this.columnLength + 1;
for (let rowIndex = 0; rowIndex <= rowMaxIndex; rowIndex++) {
minos[rowIndex] = [];
for (let columnIndex = 0; columnIndex <= columnMaxIndex; columnIndex++) {
let value = this.minoType.empty;
if (rowIndex == 0 || rowIndex == rowMaxIndex) {
value = 1;
}
else if (columnIndex == 0 || columnIndex == columnMaxIndex) {
value = 1;
}
minos[rowIndex][columnIndex] = value;
}
}
return minos;
}
setCSS() {
const style = document.createElement('style');
document.head.appendChild(style);
const sheet = style.sheet;
sheet.insertRule('.mino_container {height:20px; width:20px; font-size:18px;}', 0 );
let elements = document.querySelectorAll('div[id^="div_' + this._stagePartsId + '"]');
Array.prototype.forEach.call(elements, function (element) {
element.classList.add('mino_container');
});
if (!this._nextMinoPartsId) {
return;
}
elements = document.querySelectorAll('div[id^="div_' + this._nextMinoPartsId + '"]');
Array.prototype.forEach.call(elements, function (element) {
element.classList.add('mino_container');
});
}
play() {
this.init();
document.onkeydown = this.keydownEvent.bind(this);
}
show() {
this.setCSS();
}
keydownEvent(event) {
const keyCode = event.code;
if (!this.isPlaying && keyCode === 'Enter') {
this.gameStart();
return;
}
if (this.fallingMino.type === null) {
return;
}
let destination = {y:0, x:0};
let isRotate = false;
switch (keyCode) {
case 'Enter':
console.log('STOP');
clearInterval(this.timerId);
this.isPlaying = false;
return;
case 'ArrowUp':
this.hardDropMino();
return;
case 'ArrowDown':
destination.y = 1;
break;
case 'ArrowLeft':
destination.x = -1;
break;
case 'ArrowRight':
destination.x = 1;
break;
case 'Space':
isRotate = true;
break;
default:
return;
}
this.setFallingMino(destination.y, destination.x, isRotate);
}
setNextMino() {
const shape = Object.keys(this.minoShapes);
let shapeIndex = Math.floor(Math.random() * shape.length);
const minoType = this.nextMinoType = shape[shapeIndex];
if (this.fallingMino.type === null || !this._nextMinoPartsId) {
return;
}
const minoLength = this.minoShapes[minoType].length;
for (let rowIndex = 0; rowIndex <= 3; rowIndex++) {
for (let columnIndex = 0; columnIndex <= 3; columnIndex++) {
let value = 0;
if (rowIndex < minoLength && columnIndex < minoLength) {
value = this.minoShapes[minoType][rowIndex][columnIndex];
}
let columnName = this._nextMinoPartsId + (columnIndex + 1);
this.tableParts[rowIndex][columnName].value = this.outputText[value];
}
}
}
createNewMino() {
const minoType = this.nextMinoType;
const minoLength = this.minoShapes[minoType].length;
const y = minoLength === 4 ? 0 : 1;
const x = Math.round((this.columnLength - minoLength + 1) / 2);
this.fallingMino = {type:minoType, length:minoLength, y:y, x:x, direction:0};
if(!this.setFallingMino(0, 0)) {
this.gameOver();
return;
}
}
gameStart() {
if (this.fallingMino.type === null) {
console.log('START');
this.startTime = new Date();
this.setNextMino();
this.showMino();
}
else {
console.log('RESTART');
}
this.isPlaying = true;
this.timerId = setInterval(this.autoDownMino, this.currentDelay, this);
}
gameOver() {
console.log('GAME OVER');
clearInterval(this.timerId);
this.isPlaying = false;
this.moveMino(0, 0, 0);
document.onkeydown = null;
}
setFallingMino(destinationY, destinationX, isRotate) {
let direction = this.fallingMino.direction;
if (isRotate) {
direction = (direction + 1) % 4;
}
if (this.isCollision(destinationY, destinationX, direction)) {
if (!isRotate) {
return false;
}
const simulated = this.simulateRotate(direction);
if (!simulated.success) {
return false;
}
destinationY = simulated.destinationY
destinationX = simulated.destinationX;
}
this.moveMino(destinationY, destinationX, direction);
return true;
}
rotateMino(mino) {
const minoLength = mino.length;
let rotatedMino = [];
for (let rowIndex = 0; rowIndex < minoLength; rowIndex++) {
rotatedMino[rowIndex] = [];
for (let columnIndex = 0; columnIndex < minoLength; columnIndex++) {
rotatedMino[rowIndex][columnIndex] = mino[minoLength - 1 - columnIndex][rowIndex];
}
}
return rotatedMino;
};
isCollision(destinationY, destinationX, direction) {
const mino = this.getMinoArray(direction);
const minoLength = this.fallingMino.length;
for (let minoRowIndex = 0; minoRowIndex < minoLength; minoRowIndex++) {
let stageY = this.fallingMino.y + minoRowIndex + destinationY;
if (this.stageMinos.length <= stageY) {
break;
}
for (let minoColumnIndex = 0; minoColumnIndex < minoLength; minoColumnIndex++) {
let minoValue = mino[minoRowIndex][minoColumnIndex];
let stageX = this.fallingMino.x + minoColumnIndex + destinationX;
let stageValue = this.stageMinos[stageY][stageX];
if (minoValue && stageValue) {
return true;
}
}
}
return false;
}
getMinoArray(direction) {
let mino = this.minoShapes[this.fallingMino.type];
if (direction === 0) {
return mino;
}
for (let rotateIndex = 0; rotateIndex < direction; rotateIndex++) {
mino = this.rotateMino(mino);
}
return mino;
}
moveMino(destinationY, destinationX, direction) {
this.resetStageMino();
this.fallingMino.y += destinationY;
this.fallingMino.x += destinationX;
this.fallingMino.direction = direction;
const mino = this.getMinoArray(direction);
const minoLength = mino.length;
for (let minoRowIndex = 0; minoRowIndex < minoLength; minoRowIndex++) {
let setY = this.fallingMino.y + minoRowIndex;
if (this.rowLength < setY) {
return;
}
for (let minoColumnIndex = 0; minoColumnIndex < minoLength; minoColumnIndex++) {
let value = mino[minoRowIndex][minoColumnIndex];
if (!value) {
continue;
}
let setX = this.fallingMino.x + minoColumnIndex;
if (setX <= 0 || this.columnLength < setX) {
continue;
}
let columnName = this._stagePartsId + setX;
this.tableParts[setY - 1][columnName].value = this.outputText[value];
}
}
}
resetStageMino() {
const endY = this.fallingMino.y + this.fallingMino.length;
const endX = this.fallingMino.x + this.fallingMino.length;
for (let rowIndex = this.fallingMino.y; rowIndex < endY; rowIndex++) {
if (this.rowLength < rowIndex) {
return;
}
if (rowIndex <= 0) {
continue;
}
for (let columnIndex = this.fallingMino.x; columnIndex < endX; columnIndex++) {
if (columnIndex <= 0 || this.columnLength < columnIndex) {
continue;
}
let columnName = this._stagePartsId + columnIndex;
let value = this.stageMinos[rowIndex][columnIndex];
this.tableParts[rowIndex - 1][columnName].value = this.outputText[value];
}
}
};
hardDropMino() {
const destinationX = 0;
const direction = this.fallingMino.direction;
let destinationY = 0;
for (destinationY; destinationY < this.rowLength; destinationY++) {
if (this.isCollision(destinationY, destinationX, direction)) {
break;
}
}
this.moveMino(destinationY - 1, destinationX, direction);
}
simulateRotate(direction) {
let result = {
success: false,
y: 0,
x: 0
};
for (let destinationY of [0, 1]) {
for (let destinationX of [-1, 1, -2, 2]) {
if (!this.isCollision(destinationY, destinationX, direction)) {
result = {
success: true,
destinationY: destinationY,
destinationX: destinationX
};
return result;
}
}
}
return result;
}
autoDownMino(tetris) {
if (!tetris.isPlaying) {
clearInterval(tetris.timerId);
return;
}
if (tetris.fallingMino.type === null) {
tetris.createNewMino();
tetris.setNextMino();
return;
}
if(!tetris.setFallingMino(1, 0, false)) {
tetris.landMino();
tetris.checkFilledRow();
tetris.showMino();
tetris.fallingMino.type = null;
}
tetris.controlSpeed();
}
landMino() {
const mino = this.getMinoArray(this.fallingMino.direction);
const minoLength = mino.length;
this.fallingMino.type = null;
for (let minoRowIndex = 0; minoRowIndex < minoLength; minoRowIndex++) {
let setY = this.fallingMino.y + minoRowIndex;
for (let minoColumnIndex = 0; minoColumnIndex < minoLength; minoColumnIndex++) {
let value = mino[minoRowIndex][minoColumnIndex];
if (!value) {
continue
}
let setX = this.fallingMino.x + minoColumnIndex;
this.stageMinos[setY][setX] = this.minoType.landed;
}
}
}
showMino() {
for (let rowIndex = 1; rowIndex <= this.rowLength; rowIndex++) {
for (let columnIndex = 1; columnIndex <= this.columnLength; columnIndex++) {
let columnName = this._stagePartsId + columnIndex;
let value = this.stageMinos[rowIndex][columnIndex];
this.tableParts[rowIndex - 1][columnName].value = this.outputText[value];
}
}
};
checkFilledRow() {
const top = this.fallingMino.y;
let bottom = top + this.fallingMino.length - 1;
bottom = Math.min(bottom, this.rowLength);
let removeRow = [];
for (let rowIndex = top; rowIndex <= bottom; rowIndex++) {
if (!this.stageMinos[rowIndex].includes(0)) {
removeRow.push(rowIndex);
for (let columnIndex = 1; columnIndex <= this.columnLength; columnIndex++) {
this.stageMinos[rowIndex][columnIndex] = this.minoType.remove;
}
};
}
if (removeRow.length) {
clearInterval(this.timerId);
this.isPlaying = false;
setTimeout(this.removeFilledRow.bind(this, removeRow), 200);
}
}
removeFilledRow(removeRow) {
for (let rowIndex of removeRow) {
this.stageMinos.splice(rowIndex, 1);
this.stageMinos.splice(1, 0, this.emptyRow.concat());
}
this.addScore(removeRow.length);
this.isPlaying = true;
this.showMino();
this.timerId = setInterval(this.autoDownMino, this.currentDelay, this);
}
addScore(removeRow) {
if (!removeRow || !this.scoreParts) {
return;
}
const now = new Date();
const passedTime = parseInt((now.getTime() - this.startTime.getTime()) / 1000);
const passedTimeScore = Math.floor(passedTime / (5 - removeRow));
const scoreTable = [0, 100, 300, 500, 800];
this.score += scoreTable[removeRow] + passedTimeScore;
this.scoreParts.value = this.score;
}
controlSpeed() {
if (this.currentDelay <= this.minDelay) {
return;
}
const now = new Date();
const passedTime = parseInt((now.getTime() - this.startTime.getTime()) / 1000);
const delayCoefficient = 10;
if (!(passedTime % delayCoefficient)) {
const delay = this.baseDelay - Math.floor(passedTime / delayCoefficient) * 10;
if (delay === this.currentDelay) {
return;
}
clearInterval(this.timerId);
this.currentDelay = delay;
this.timerId = setInterval(this.autoDownMino, delay, this);
}
}
}
collaboflow_events.js
(function () {
'use strict';
const tetris = new collaboTetris();
tetris.stagePartsId = 'fidColumn';
tetris.nextMinoPartsId = 'fidNextMino';
tetris.scorePartsId = 'fidSCORE';
collaboflow.events.on('request.input.show', function (data) {
tetris.parts = data.parts;
tetris.play();
});
const showEvents = ['request.confirm.show', 'request.detail.show', 'request.judgement.show'];
collaboflow.events.on(showEvents, function (data) {
tetris.show();
});
})();
明日のコラボフロー Advent Calendar 2022は、@hatanowf さんです！