はじめに

この記事は高校生1~2年生を想定して書いてます。
受験生はSNSやめて自習室に籠ってろ！

女子にモテたいなら

口回りのウブ毛を剃ろう
髪の毛をすいてもらってワックスで整えよう
1000円カットは地雷　1500~2000円くらいは出しとけ
校則ギリギリの範囲で眉毛の形を良くしよう
やや腰パン気味にしつつ校則と相談しながら制服の下にガラ付きのTシャツやパーカーをチラつかせよう
母さんに買ってもらった**DESTINYとか筆記体で書かれた私服はやめよう。RightOnやWEGO**にしておこう
積極的にカラオケとかに誘おう

テトリスを改造したいなら

まずスマホを置いてパソコンの電源を入れよう
最近の高校生はスマホで大体のことができてしまうのでパソコンを触らないらしい
兄ちゃんはYoutuberもSEKAI NO OWARIもいっちょんわからん
でも16歳そこらの君たちでも**テトリス**は知ってるだろう
という訳で、今日はどうやったらテトリスを改造できるのかを紹介しよう思う
テトリスを改造できてもクラスの女子にはモテないが、友達にドヤ顔はできると思う
今回は5つのピースのテトリス(pentrixと言うらしい)に改造する

用意するもの

パソコン　→　文字を打って表示できる便利な機械。OSっていうパソコンの中に入ってるソフトウェアはWindowsでもMacOSXでもLinuxでも良いよ。
ブラウザ　→　インターネットの情報を表示してくれるソフトウェア。たぶん初めから入っていて、InternetExplorer(IE)とかGoogleChromeとかSafariって名前だと思う。僕の弟の持っているWindowsVistaのInternetExplorerのバージョンは7だ。それだと古くすぎてこの後使うツールが動かないので、無難な**Google Chrome**をダウンロードして、起動しよう。

方針

4つのステップでできるよ

1. 便利なツールを使う

**jsFiddle**という、超簡単にゲームなどを作れるツールを使うよ。
ダウンロードとかはいらなくて、リンクをクリックするだけで使い初められるよ。
でも最初は何もかいてない白紙だよ。

2. テトリスを手に入れる

jsFiddleに**ソースコード（プログラム）**を書くよ。
でも**面倒だろうから作ってある**よ。
キューピー三分クッキングだね！

3. テトリスの仕組みを理解する

大変だから初めはコード（プログラム）は読まないよ！
一番楽なのは、テトリスの設計図を先に知ること
だからまずは「テトリスとは何か」を考えるよ！

先に答えを言っちゃうと、テトリスは5つのパーツで成り立っている

javascript:tetris

var TETRIS = {
  config: {},
  state: {},
  piece: {},
  play: function(name, config) {},
  fn: {}
};

上から順に日本語で表現するなら

設定
状態
ピース
開始する
アクション

となる。ピースを作るブロックの数を「５」にしたいなら、TETRIS.configかTETRIS.pieceが怪しいと考えるのが妥当か。それ以外のコードはとりあえず読まなくて良い。また

箱を定義する
操作の影響を保存する
ピースを定義する
ゲームを始める
入力情報と保存情報を基に描画する

と言い換えることもできる

ちなみにfnはfunction（関数/まとまった処理）の略で、テトリスがするべき「振る舞い/アクション」を定義している場所だ。その内訳は以下のようになる。

javascript:tetris

  fn: {
    mod: function(a, b) {},
    renderField: function(name) {},
    renderBlock: function(color, taken, control, x, y, index) {},
    renderPiece: function(type, rotate, x, y) {},
    renderNextPiece: function() {},
    renderBoard: function() {},
    isBlockAvailable: function(x, y) {},
    stepInterval: function() {},
    keyboardAction: function(key, from) {}
  }

renderと名のつく「描画系」や、keyboard操作系などが目立つ

4.ブロックの数を決めてるパーツを改造しよう

テトリスの設計図さえあれば「ひとつのピースあたりのブロックの数を決めているプログラム」の場所がわかる
その「４」って数字を「５」にすれば完了ちゃうかな

という訳で

1.便利なツールを使う
2.テトリスを手に入れる

は上でクリアしたので

3.テトリスの仕組みを理解する
4.ブロックの数を決めてるパーツを改造しよう

に挑戦だ！

ここで質問

Q. テトリスを因数分解するとどうなる？

難しい質問だね。
でも、良い問いは良い気付きを与えてくれるので一緒に考えてみよう。
「テトリスとはそもそも何なのか？」という哲学をして、テトリスと戯れると何を作るべきか見えてくるんです。

テトリスはゲームである　→　正しい
テトリスにはスタートボタンがある　→　正しい
テトリスは大きな箱といろんな形のピースで出来ている　→　正しい
ピースは４つのブロックでできている　→　正しい
ピースは右と左に動かせる　→　正しい
ピースは回転できる　→　正しい
ピースは下に加速できる　→　正しい
ピースを構成するブロックが行を横一列に敷き詰めたとき、その行のブロックたちは消える　→　正しい
ピースは下に物があるとき、その物の上に乗ることができる　→　正しい
ピースが箱のてっぺんまで届くと、ゲームが終了する　→　正しい

気付いたかな、テトリスのルールは日本語で書くことができるんだ。
そして、登場人物は「テトリス」「ボタン」「箱」「行」「ピース」「ブロック」の6つくらいしかない。
登場人物の役割と、登場人物がどんな動きをできるかを整理して、コンピューターに伝えることがプログラミングをするということなんだ。
もしプログラミングをする気になれなくても、「『テトリスを因数分解すること(設計)』と『コンピューターに伝えること(実装)』は分けて考えることができる」ということだけは覚えて帰ってくれたら嬉しいな。

ここでおさらい

テトリスを因数分解する
因数分解したテトリスをコンピューターに教える

これだと2のやり方がまだ全然わかんないよね。
それに「まだ全然コード書いてないのに僕なんかにできるの？」って気分だよね。
その方法を次に説明するんだけど、ここからどうしても少し説明が難しくなってしまう。ヒントを書いておくから、自分で同じ道筋を辿ってみて、エラーを肌で感じてみよう！
完成品のリンクは下の方に張ってあるからね！

ピースを5ブロックにする方法

ピースを生成している処理がどこにあるか特定する。TETRIS.fn.renderPiece関数かな？やっぱりTETRIS.fnは「登場人物の振る舞い」を司っていそうだね！
ピースを生成するときに4つのブロックを生成しているはず。その処理を特定する。TETRIS.fn.renderNextPieceかな？
その中で4という数字がある場所を見つける
その箇所を読むと**for(i=0; i < 4; i++)**というコードがある。これは4回繰り返すという意味なので、試しにこれを5にしてみる。
エラーがでる！単純に１箇所変えただけじゃピースが５個になってくれない！他にも変えなきゃいけないところがあるのかな？
当たり判定や他の場所にも変更が影響してしまっている！他の場所も「ピースは４つ」という前提で作られていたんだ！
他の場所も良い感じにしてあげるために、まずは**$T.config.PieceNum : 4**を作る。config(設定)の中に、ピースの個数を記録して、ピースの個数の定義がバラバラに散らからないようにするんだ。ちなみに$Tはコードの最後の方で定義されている「TETRIS」クラスと同じ意味だよ。
**i < 4をi < $T.config.PieceNum**に置換する。こうすることで、「ピースはブロック4つ」という定義の管理がしやすくなった。
動くかどうか確認する　←　これで$T.config.PieceNumを4にしたり5にしたり楽にできる。数字をいろんな場所に書くより、変数に入れて一箇所書き換えるだけで大丈夫なようにするとかっこいい。
**$T.config.PieceNum : 5**にする
66行目あたりのpieceの形を定義している配列の要素を5個にしてみる
動いた！
他のpiece定義も書き換える
完成！

完成品のソースコードを置いておくね
ピースの形は面倒だったのであんま考えてないです。回転させると形が変わるのはpiece定義を調整すると直るよ。

まとめ

受験勉強もスポーツも恋愛もそうだけど、

一番大事なところ意外どうでもいい
本質を掴む
力の抜きどころを知る
スイートスポットに当てる
要点を抜き出す
方程式を作る
みたいな考え方はすごーく大事だから、自分の好きなことを通して身につけてしまおう！

もっとレベル高いことをしたいなら

お兄さんはmilkcocoaっていう、誰でもインターネットのプログラミングが上手になる道具を作ってるんだ。
テトリスをオンライン対戦可能にしたりしたいときは、@_sgtnに連絡してくれ。

P.S.

$T.config.PieceNumにピースの数を司る部分をまとめてしまったので、
**デカリス**とかも楽にできる（デカは10って意味ね）
piece定義をちゃんと考えるのが面倒だけどね！
ゲームがおもしろくなるようなpieceの形を考えるのが、「ゲームレベリング」って奴

それじゃ、かわいい彼女つくれよ！！！