こんにちは、よみあきです。
最近、日本のみならず海外のコンテンツ、文献に手を伸ばすことの重要さを感じてきました。
英語で検索するということだけで、得られるコンテンツの量がかなり広がります。
なかなか日本語で見つからなかったことが、英語だと案外すぐ見つかり問題の解決につながることも…
今回はそんなわけで、いろいろと漁った海外のJavaScriptチュートリアルのなかで、面白かったものを紹介しようと思います！
「JavaScriptとHTML5を使ってテトリスをつくる！」というものです！
学べること
- テトリスの仕組みを知ることができる
- HTML5 CanvasとJavaScriptを実際に書きながら学べる
- 図形の表示、キーボード操作、アニメーション、当たり判定を学べる
テトリスの仕組みを知ることができる
この動画ではテトリスを作っていくわけですが、まずはテトリスがどういう仕組みになっているかを知らなければなりません。
いやいや、一行埋まったらそこが消えるんでしょ！っていうことはわかると思いますが、テトリスが何行何列のステージになっているのか、テトリミノ（落ちてくるブロック）はどういうものがあるのかなどを知ることができます。
動画の構成として、前半は説明パート、後半は実際にコードを書くパートとなっています
前半パートでこのテトリスの説明をざっとしています。
HTML5 CanvasとJavaScriptを実際に書きながら学べる
前半パートと後半パートで分かれていますが、前半パートではテトリスの仕組みに加えて、その動きを実現するコードも併せて説明されています。
前半パートで使う関数の説明を受けて、後半で実際にアウトプットできるので、とてもいい勉強になりました。
この関数は何だろう？ってなったら前半パートに戻って、解説を見にいきます。英語が聞き取れなくても、画面にコード説明文と図がわかりやすく載っているので大丈夫です。
図形の表示、キーボード操作、アニメーション、当たり判定を学べる
テトリスを実現することにおいて、考えなければならないことがたくさんあります。
- 格子、テトリミノを描くにはどうすればいいのか
- テトリミノを移動、回転、降下させるにはどうすればいいのか
- テトリミノの上に積み重ねるにはどうすればいいのか
- 操作しているときテトリミノが画面外に出ないようにするにはどうすればいいのか
- 一行そろってその部分を消すにはどうすればいいのか
などなど…
これらのことを可能にする、図形の表示、キーボード操作、アニメーション、当たり判定などの書き方を学ぶことができます。
ここで学んだ考えは、JavaScriptに限らず、別の言語においても応用可能だと思います。
とてもわかりやすくて、たくさんのことが学べるチュートリアルなのでぜひやってみください！
脳死で打ち込んでも、完成した時はアドレナリンが出ると思います…！
解説している言語は違っても、打ち込むコードと出来上がるものは同じなので、「なんだ英語かー…」なんて思わずに、ぜひやってみてください！
コメント