素のHTML, CSS, JavaScriptで0から始めるWeb開発【応用編】

投稿日: カテゴリー: 未分類
Pocket

こんにちは、エムティーアイの井上です。今回はこれからWeb開発を始めたいという方向けにWeb開発の基礎となる部分を紹介します。

このシリーズのゴールはWeb開発に必要な3つの言語 HTML, CSS, JavaScript の仕組みを理解し書けるようになることにあります。HTML, CSS, JavaScriptでテトリスを作りながらそれぞれの仕組みをご紹介いたします。
全体で4部構成になっており今回はその第4弾【応用編】となります。

第1部 【入門編】Web開発未経験者
第2部 【HTML&CSS基礎編】簡単な仕組みはわかっているという人向け
第3部 【HTML&JavaScript基礎編】簡単な仕組みはわかっているという人向け
第4部 【応用編】Web開発経験者向け

今回実装する機能

今回実装する機能は下記の3つです。

  1. キーボードでブロックを操作する
  2. そろった行を消す
  3. 積みあがったらゲームオーバーとする

キーボードでブロックを操作する

JavaScriptではキー入力を利用することができます。
利用方法としては、クリックしたときに呼び出す関数を決め、キー入力があったときに呼び出すだけです。

キー入力されたときの処理は以下のように書けます。

moveLeft,moveRightはすでに関数だけは用意しましたね。
上記のプログラムではKeyCodeをもとにどのキーが押されたかを判断し、それぞれの関数を呼び出しています。
キーコードの確認をしたい場合はhttp://keycode.info/にて確認することができます。

それでは次に実際に左右に動かす部分の実装を行います。
まずは簡単に、fallingBlockNumで指定されたブロックを単純に左右に動かすようにします。

落ちるときの処理とやっていることはほとんど一緒ですね。
ただし、一番右側に来た時や、ブロックがあっていけない場合がありますね?
こういったとき、どのように条件を加えるかはfallBlocksを参考に挑戦してみましょう。

そろった行を消す

そろった行を消すのは簡単ですね。
1行ずつそろったかを確認し、削除するだけです。
しかし、削除した行より上のブロックをすべて1マス下にずらすのを忘れないようにしましょう!

積みあがったらゲームオーバーとする

これもシンプルですね。
上2行にブロックがあるときに止めればよいだけですから、
積み上がり切っているかどうかを判定してからほかの処理に入るようにしましょう!

最後に

これにて全4回のWeb開発ことはじめを終わりとします。
まだまだ気にしなければいけないデバッグなどがあることにお気づきだとは思います。
ぜひ、ご自身でトライしてみてください!

Pocket