忍者ブログ

幻日記

お絵描き&ゲーム制作好きの ひとりごと日記

HTML5+Javascriptゲーム制作

HTML5(canvas)とJavascriptでのゲーム制作をしています。


操作できない場合は画面下部のグレー部分をクリックするか、
それでもダメなら下記の直リンクをお試しくださいませ


直リンクはこちら


(新しいプログラム言語を学ぶということで

 Flash+AS3のテストゲームを始めて作った時のモノに似せてます。)


■操作方法:←or→=移動 ↑=ジャンプ
しかもジャンプの際に↑キーを押す必要があるのですブラウザのスクロールバーが動いてしまう。
まだまだFlash+AS3の時のように簡単にはいかないようですね(・へ・`;)
修正済しました。「preventDefault();」を利用。


ゲームの完成系としてはSLG(※←シミュレーションゲームのこと)を目指しているのですが
Javascriptを勉強し始めて間もないので、作り慣れたアクションゲーム風でテストしています。
また、今回はキーボードのみの操作なのでPC以外の操作には対応しておりません。
今後はスマホなどでも遊べるゲームを作っていけると面白そう。






さて、時代の流れでもありますが、残念ながらFlashがオワコンになっちゃいました。
あの有名なブラウザゲーム「艦これ」などではまだ使われているようですが今後どうなるやら。
そんなもんで現在ActionScript3.0からJavascriptへ乗り換えている最中です。


AS3の時は変数宣言の際にint、String、Booleanなど型を指定する必要があったのですが
JSでは何も書く必要がないようです。この辺りは1番ビックリしました。他にも
オブジェクトの幅や高さを表す「.width」や「.height」を自分でこさえないといけないようです。


また、AS3の時はイマイチ理解できなくて手を出さなかった『ライブラリ』というのを
試しています。難しいことなのでイマイチ理解できていないのですが、ここでは
CreateJSというのを使っています。Flash+AS3の頃の感覚にかなり近いので助かっています。


やるやる詐欺常習犯なのでゲームを完成させるなんて書けないけど
今後は納得いくところまで作っていければ楽しそうだと思いました(´ω`)


更新履歴:
9/23:
・グレー部分を拡大、ついでに説明文を追加
・ゲーム画面のサイズをCSSにより640×480を480×360に縮小


10/5:
・ゲームデータを置いてる場所をDropboxから忍者サンドボックスに変更しました。
 Dropboxの仕様変更で10/3からは、この記事を表示すると
 HTMLが勝手にダウンロードされてしまう仕様に変更されていたようです。

拍手