1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. enchant.js100行未満!!本格シューティングゲーム作り方。

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。

さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしまいます。
ならば、enchant.jsを使えば100行未満のシューティングゲームの開発が可能なのでしょうか?

今回はenchant.jsでのたった100行未満の、本格シューティングゲーム開発に挑戦してみました。

では、今回の目標を発表します。

  • プログラムは100行以内。
  • 行数を縮めるために、無理やり1行にしたりはなるべくしない。
  • 背景は表示する。スクロールもさせる。
  • 敵はまっすぐ下に弾を撃つ。自機ももちろん弾を撃てる
  • スコアも表示させる。

こんな感じで作ってみようと思います。
では、まずは実際に作ってみたゲームをごらんください。
9leapにアップロードしてみました。
こちらでプレイできます。

ソースはこちらです。

大まかに見ていきましょう。

9〜15行目で、背景(空)の画像を2枚表示しています。2枚表示するのは、背景をスクロールさせるためです。
行数を省略するため、for文を使いました。
22〜25行目で、背景(空)の画像をスクロールさせています。
26〜30行目で、敵を40フレームごとに出現させています。
32〜38行目は、ゲームオーバーシーンを作っています。このシーンを読み込むことで、ゲームオーバー画面を作ることができます。

クラスとして、Player、Enemy、Shotのクラスを作成しています。
今回は行数を減らすため、Shotクラスを、自機、敵機の2つから同じものを利用しています。

その為に、Shotクラスに弾を出す機体を判別する為の引数を加えました。

スポンサードリンク

関連コンテンツ

オススメ記事

java

Eclipseによる、Javaでじゃんけんゲームプログラムの作り方

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされ

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

今月の残り日数を計算するべ!

小学生からのJavaScript入門。今月の残り日数を計算してみよう!

小学生からのJavaScript入門、第2弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割った

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

リセットCSS は何を使う? 2019年ランキング5選とその他3選紹介

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

コメントをどうぞ!

メールアドレスが公開されることはありません。