MDNのチュートリアルで「ブロックくずし」を作ってみた。part1(導入編)

MDNのチュートリアルで「ブロックくずし」を作ってみた。part1(導入編)

<はじめに>ゲームプログラミングに挑戦

沙知です。先日、こんなTweetをしました。

2月からスマホゲームの開発に携わっています。
わたしが密かに「師匠」と崇めている会社の上司から
「スキルアップするには、とりあえず何かつくってみるといいよ」
と言われました。

いろいろ探してみたら、こんなおあつらえ向きのチュートリアルを発見。
しかもMDN。

https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript

(そのままのJavaScriptを使ったブロックくずしゲーム | MDN web docs)

MDN(MDN Web Docs)とは?
→ Mozilla(Firefoxで有名)の公式Webサイト。Web技術と、Webを支えるソフトウェアについて学べる。

というわけでゲームエンジニアデビュー、はじめの一歩は
ブロックくずし」に挑戦しました。

JavaScriptに苦手意識のあった私でも、たのしく作れました!

チュートリアルの内容

どんなゲームを作れるの?

↓完成したのはこちら↓

  • Google ChromeなどのWebブラウザで動作するゲーム
  • 使うのは「JavaScript」だけ
  • 所要時間は、じっくり読んで理解して4時間くらい
    (サクサクやれば、1時間で出来る)

ゲーム完成までの<10ステップ>

チュートリアルは、10のステップに分かれています。
人によって「多いな。。。」と感じるかもしれませんが、各ステップの文量(コード量含め)は少なめでしたのでご安心ください。笑

  1. Canvasを作ってその上に描画する
  2. ボールを動かす
  3. ボールを壁で弾ませる
  4. パドルとキーボード操作
  5. ゲームオーバー
  6. ブロックのかたまりを作る
  7. 衝突検出 ← ここまで頑張ったら、きっと感動します!!
  8. スコアと勝ち負けを記録する
  9. マウス操作
  10. 仕上げ

作業に必要なものは?
◆Webブラウザ(GoogleChrome、Firefoxなど)
◆テキストエディタ(メモ帳など)
 →私のオススメは、Visual Studio Codeです

長くなりそうなので、今回の記事はここまで…

次回、「万物創造編」

[Eye catch image] Photo by Sarah Pflug from Burst

IT / プログラミングカテゴリの最新記事