img_20160405_01

【JavaScript】enchant.jsでシューティングゲームを作ってみた


突然ですが、シューティングゲームって好きですか?
ぶっちゃけぼくはまともにやったことはないんです。

そんなぼくがある日突然作りたくなっちゃったんですよ、シューティングを。

そしてついに作り上げました!
下の画像クリックしたらゲーム画面にとびます!

img_20160405_02

1. 操作方法_

操作は単純かつ直感的にできるようにしてみました。
PC・スマートフォン両方対応させましたがそれ以外にもPS3のコントローラーでも操作できます。
※テストではPS3純正コントローラーを使いました。他のbluetooth規格のコントローラーではテストしていないので確実に接続できるとは言えませんが理論上では可能です。

  • PC

  • スマートフォン

  • ゲームパッド

余談ですがぼくはSONY製品で育ってきた人間なので、個人的にはゲームパッド(PS3コントローラー)が一番ハイスコアを狙いやすいです(笑)
「え、PS3のコントローラーってPCに繋げられるの??」と思う方もいらっしゃるかと思いますがどうやら繋がるようなんですびっくりですよね。
ぼくも現場のエンジニアの方から教わりました(笑)

2. ゲームパッドの接続方法_

というわけでゲームパッドのつなぎ方についてです。
上記の通り、bluetooth規格かUSB規格のゲームパッドであれば接続が可能となっています。説明はPS3のコントローラーをベースに進めたいと思います。

必要なもの

・PC(解説はMacベースで)
・PS3コントローラー
・miniUSB(A-miniBタイプ)

①接続設定前にPS3のコンセントを外しておく

絶対にこれをやらないとダメなんて事はないんですが、コントローラー接続設定途中にPS3が起動して作業に支障が出てしまう可能性が0じゃないんで念の為にってかんじですね。

②「システム環境設定」>「Bluetooth」

Bluetoothのステータスが「入」になっていることを確認する。この段階でminiUSBを挿したコントローラーをPCに挿します。
しばらく待機しているとデバイス欄に「PLAYSTAION(R)3 Controller」と出てくるので「接続」をクリックしたら作業完了です。

3. 裏技コマンド_

ザ・ワールド

『↑, ↑, ↓, ↓, ←, →, ←, →, B, A』

4. まとめ_

作業開始から完成に至るまでの流れをざっくり書いておきます。

背景

過去の現場で自分のJSできなさ具合を痛感。
恥ずかしさと悔しさで毎日「WRYYYYYYYYYYY」って叫んでた。

JSを勉強したいけど何から始めたらいいか分からない。

自分はゲームを作りたいという願望がある。

どうせ勉強するなら楽しく勉強しよう。

Boy meets 『enchant.js』

要件

・JSの基礎をしっかりと学ぶ
・扱えるフレームワークを増やす
・自身のポートフォリオ作成も兼ねて人に見せれる物を作る
・ランキングを作る(途中で追加)

制作期間

約2か月

結果的に学んだこと

・JSの基礎
・JSへの苦手意識が消えた
・『GamePadAPI』を使ってゲームパッドによるブラウザ操作
・ajaxとphpとの関係性(クライアントサイドとサーバーサイドとの紐付け)
JSって楽しい

課題

・勉強も兼ねてソースコードをES2015で書き直してみる
・対戦機能の実装
・BOSSを設置してステージ制にする(マリオみたいなイメージ)

所感

いやーひとまず完成しました!
課題もあるんで現状に満足してるわけではないですけれど、自分の作ったものがちゃんとあるっていうのはやはり嬉しいものですね(笑)

個人的にJSの勉強にゲームを選んだのは正解だったと思います。
楽しいからモチベが続くってのもあるんですけれど何より課題が見えやすいっていうのはすごく大きい。

例えば、『プレイヤーを上下左右に移動させたいな』とか『弾と敵を衝突させたらどっちも画面から消えさせたい』とか次は何を実装すればいいっていうのがすぐ見えるのは苦痛じゃないし、むしろ楽しいからどんどん知識を吸収していこうって思える。
あと、ユーザー目線になってどこをどう改善すればいいかって考える力も養われたなぁと思いました。

ゲームが好きでJSスキルを磨きたいけど何からやればいいか分からない。そんな人にはenchant.jsはすごくすごくオススメです。
もともとプログラミング教育用に作られたフレームワークなので咀嚼もしやすいのもいいところです!

他にもゲームを通じて自分のスキルアップにつながるし、ポートフォリオ(製作実績)として公表できるので今後のキャリアアップに非常に有効的です。
あと、書いたソースコードをGitHubとかで公開すれば世界中の人の目に触れるんで色々指摘とかもらえます!慣れない手つきで書いたコードなんでひょっとしたらキツい指摘を受けるかもしれませんが、人からレビューをもらえるという事は自身の成長につながる非常にいい機会なんです!ですからソースコードを公開したり、技術発表会であったりというものには積極的に歩み寄っていくことをオススメします!(۶•̀ᴗ•́)۶
まぁこれは人の受け売りなんですけれどね!w

というわけでソースコードをGitHub上に公開しておいたのでボロクソにレビューしてもらえたらすごーく嬉しいです!!(笑)
https://github.com/U-0084/yuyakezora_shooting

このゲームは色んな人のおかげで完成まで持って行く事ができました。協力してくださった方々には本当に感謝しています…!!
ありがとうございました!

次回以降どこかのタイミングでenchant.jsの入門的な記事をあげるんでもし興味がある方は見てもらえたら嬉しいです!
でわでわー


  

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です