読者です 読者をやめる 読者になる 読者になる

不器用(TOT) エンジニアの気ままにプログラミング

~考え、作って、また考える~

javaScriptによるテトリス_002_処理メモ_落下処理

javaScriptによるテトリス

作成したテトリスの処理に関して、

忘れないうちにメモを残しておこうと思う。

 

制作物と超ざっくりした概要は下記に

以前、記載していた通りである。

この作成したテトリスの中でも、

『落下処理』

 に関してメモを残しておく。

 

落下処理に関しては、

「1つ下まで、落下してよいかどうか。」

ということが重要となってくる。

 

まず、HTML5Canvasを使用して

描画を行っているが、これはイメージ的には

下記のエリアを用意して、

f:id:shevhome:20150816225433p:plain

ぞれぞれのマスを塗りつぶして表示するか否か。

それをjavaScriptで制御している。

 

今回の作成ではテトリスの表示部分を

3×3のマスに決め、その中で、

テトリスのブロックを表示している。

f:id:shevhome:20150816225527p:plain

 

そして、落下処理に関しては、

ブロック表示エリアの最下行が、

「1行下に移動してもよいか」

ということを判断している。

f:id:shevhome:20150816225712p:plain

 

ブロックが一番下に近づいた時、

自分の場合は、ブロックエリアの中で、

一番下の行が空であれば、

ブロックエリアの書き換えを行っている。

f:id:shevhome:20150816225801p:plain

 

そして、ブロックエリアの最下行に

ブロックが設定されている場合は、

最初に決めたエリアを超える場合は、

それ以上、下に落下しない仕様としている。

f:id:shevhome:20150816225813p:plain

 

このように、考え方自体はシンプルだが、

シンプルな処理と描画を繰り返すことにより、

『落下処理』

を実現している。

 

テトリスをどのように作ったらいいか、

わからない場合は、このような図を

作ってみるのもよいかもしれない。