【中高生必見】女子にモテモテになりつつテトリスを改造するイケてるしヤバい方法

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

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

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

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

# 方針
4つのステップでできるよ

### 1. 便利なツールを使う
![スクリーンショット 2015-01-11 00.32.22.png](https://qiita-image-store.s3.amazonaws.com/0/26475/330aca79-dba5-5e95-14cc-898bfa8c8fb2.png)

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

---

### 2. テトリスを手に入れる
![スクリーンショット 2015-01-11 00.31.55.png](https://qiita-image-store.s3.amazonaws.com/0/26475/9cac8dbf-e80c-4059-de95-720384b833be.png)

- jsFiddleに**ソースコード（プログラム）**を書くよ。
- でも**面倒だろうから[作ってある](http://jsfiddle.net/dL4oq4gm/3/)**よ。
- **キューピー三分クッキング**だね！

---

### 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つくらいしかない。
登場人物の役割と、登場人物がどんな動きをできるかを整理して、コンピューターに伝えることがプログラミングをするということなんだ。
もしプログラミングをする気になれなくても、「『**テトリスを因数分解すること(設計)』と『コンピューターに伝えること(実装)』は分けて考えることができる**」ということだけは覚えて帰ってくれたら嬉しいな。

## ここでおさらい

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

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

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

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

![スクリーンショット 2015-01-11 21.11.47.png](https://qiita-image-store.s3.amazonaws.com/0/26475/02f05871-586d-5a8a-15e7-635261f481c0.png)

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


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


# もっとレベル高いことをしたいなら
お兄さんは[milkcocoa](https://mlkcca.com/)っていう、誰でもインターネットのプログラミングが上手になる道具を作ってるんだ。
テトリスをオンライン対戦可能にしたりしたいときは、[@_sgtn](https://twitter.com/_sgtn)に連絡してくれ。





P.S.

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

![スクリーンショット 2015-01-11 21.44.19.png](https://qiita-image-store.s3.amazonaws.com/0/26475/b5225c02-934f-bc4e-04c7-7eaeac89f9e9.png)

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