JavaScriptでゲームフレームワークを作成
4月末～5月末位に社内のSNSを経由してJavaScriptの勉強会をしていたのですが、会社の頭が固すぎて(良く言うとシッカリした管理体系を持っている)、「小集団の勉強会はコンプライアンスに適合できない」とお達しがあり、中途半端な状況で終わりました。(＋私は仕事をかけもちしていたので、途中から忙しくて参加できなくなったというものあるのですが)
その際、折角勉強で新しい言語に触れたという事で、「机上の空論ではなくて、具体的に何かを作ってみよう」という事で、5月末の土日を使って(2日徹夜で)サンデープログラムを書いてみました。
(…って、気がつきゃ、ソレを作ってから2ヶ月も経ってるなぁ…(^^;)
その際、折角勉強で新しい言語に触れたという事で、「机上の空論ではなくて、具体的に何かを作ってみよう」という事で、5月末の土日を使って(2日徹夜で)サンデープログラムを書いてみました。
(…って、気がつきゃ、ソレを作ってから2ヶ月も経ってるなぁ…(^^;)
今回のサンデープログラムはシューティングゲームにしました。勉強会から2週間程度の覚えたてホヤホヤの超初心者なので、文法とかは適当で書きました。(^^ゞ
言語に慣れるためにenchant.jsとかのリッチなフレームワークを使わずに、「全てスクラッチ」から起こしてみた感じです。
今の時代は「なんでもUnity」になってきていますが(確かにそれが良いと思ってます)、「言語を触ってみる」という観点からは、"最初だけは"このような便利ツールは使っていけないと日頃から思っているので、"最初だけは"全て自作です。
Rubyの時とノリは同じｗ (音は鳴らないけど。(^^ゞ)
【実行】
ファイルを展開して「SampleShootingGame_for_HTML5.html」をブラウザに表示させます。
《 ファイルをダウンロード 》
【パラメータ】
画面の拡大率：screen_magnify
2倍にしたい場合はURLを
「SampleShootingGame_for_HTML5.html?screen_magnify=2」
といった感じでブラウザに表示させます。
【操作】
開始：'ENTER' or 'W'キー
終了：'ESC'キー
移動：カーソルキー
ショット：'Z'キー (押しっぱなしで連射します)
PAUSE(ゲーム中)：'ENTER' or 'W'キー
【実装】
01.タスク管理を設計。
02.キャラクター描画管理を設計。
03.テキストスクリーン管理(＋フォント管理)を設計。
04.背景管理を設計(実装は1面BGのみ)。
05.仮想入力管理を設計。
06.ステージ管理を設計。
【未実装】
01.音管理(SE)。
02.音管理(BGM)。
03.仮想座標(やっている事は1画面)。
04.エフェクト(fade in/outの軽量エフェクトすら未実装)。
【動作環境】
OS：Linux mint 15, Windows 7
ブラウザ：Chrome34.x, Firefox 26.x - 29.x
(IE 10は動きませんでしたｗ)
※1 今のスマホの殆どは動かないような気もします。
※2 Mac OSのブラウザ(Safariでなのか不明)で動いたとレポートはもらいました。
【開発環境】
エディタ：Emacs 23.4.1
デバッグ：Firefox 26.x
◇ ◇ ◇
とりあえずまずは「作ってみた。」という感じです。
ソースは見れば分かるとおり「漢のモノリシック(一枚板)のHTMLファイル」です(爆)
ちなみに、このソースの一つ前のバージョン(背景管理の設計をしてないバージョン)をChatterに上げてみたところ、JavaScript勉強会の発足者に「よく動きますねぇ！ こんなヒドイコードで。(キッパリ)」と言われたので、ちゃんと動く保証はありません。(^^;
(しっかし、JavaScriptのド初心者に言うセリフかね。これは。仮にも人に物を教える立場だってーのに、やる気を消失させて何が楽しいんだか… まぁ、この人は教育のトーシロという事だけは良く判りました。)
まぁ、恐らくJavaScriptを仕事で使うことは当面皆無だと思うので、その辺りはベーリー気にしなぁ～い。
Javaでさえ1995年の登場時に即独習して、2003年に2Dゲームを作成したというのに、結局現時点まで一度も仕事で使った事ないし(爆)
1996年に受けたJavaの研修の教本ｗ
この言語、全く使わねー。
◇ ◇ ◇
超高級言語でもここまでは動く事が分ってなによりです。最初にJavaScriptで物が動いているのを見たのは、1996年(位だったかな？)にナムコの公式サイトで、パックマンのアニメーションを実現していたのを見て、「なんじゃ、このヌルヌル動く画面はっ！？」という思い出があります。(Internet Explorer 3.0からサポートなので、当時表示できないマシンが沢山あった時代。会社で周りに見せようとしたら、動かないマシンばかりで、残念がった思い出もあったりｗ)
しっかし、いざちゃんと言語に向き合って触ってみると、文法も設計思想も気持ち悪い言語だった… でも簡単な言語だから(極めて行くと大変かもしれないけど)、単価も低いエンジニア向けの言語って気がしました。
言語に慣れるためにenchant.jsとかのリッチなフレームワークを使わずに、「全てスクラッチ」から起こしてみた感じです。
今の時代は「なんでもUnity」になってきていますが(確かにそれが良いと思ってます)、「言語を触ってみる」という観点からは、"最初だけは"このような便利ツールは使っていけないと日頃から思っているので、"最初だけは"全て自作です。
 |  |
【実行】
ファイルを展開して「SampleShootingGame_for_HTML5.html」をブラウザに表示させます。
《 ファイルをダウンロード 》
【パラメータ】
画面の拡大率：screen_magnify
2倍にしたい場合はURLを
「SampleShootingGame_for_HTML5.html?screen_magnify=2」
といった感じでブラウザに表示させます。
【操作】
開始：'ENTER' or 'W'キー
終了：'ESC'キー
移動：カーソルキー
ショット：'Z'キー (押しっぱなしで連射します)
PAUSE(ゲーム中)：'ENTER' or 'W'キー
【実装】
01.タスク管理を設計。
02.キャラクター描画管理を設計。
03.テキストスクリーン管理(＋フォント管理)を設計。
04.背景管理を設計(実装は1面BGのみ)。
05.仮想入力管理を設計。
06.ステージ管理を設計。
【未実装】
01.音管理(SE)。
02.音管理(BGM)。
03.仮想座標(やっている事は1画面)。
04.エフェクト(fade in/outの軽量エフェクトすら未実装)。
【動作環境】
OS：Linux mint 15, Windows 7
ブラウザ：Chrome34.x, Firefox 26.x - 29.x
(IE 10は動きませんでしたｗ)
※1 今のスマホの殆どは動かないような気もします。
※2 Mac OSのブラウザ(Safariでなのか不明)で動いたとレポートはもらいました。
【開発環境】
エディタ：Emacs 23.4.1
デバッグ：Firefox 26.x
とりあえずまずは「作ってみた。」という感じです。
ソースは見れば分かるとおり「漢のモノリシック(一枚板)のHTMLファイル」です(爆)
ちなみに、このソースの一つ前のバージョン(背景管理の設計をしてないバージョン)をChatterに上げてみたところ、JavaScript勉強会の発足者に「よく動きますねぇ！ こんなヒドイコードで。(キッパリ)」と言われたので、ちゃんと動く保証はありません。(^^;
(しっかし、JavaScriptのド初心者に言うセリフかね。これは。仮にも人に物を教える立場だってーのに、やる気を消失させて何が楽しいんだか… まぁ、この人は教育のトーシロという事だけは良く判りました。)
まぁ、恐らくJavaScriptを仕事で使うことは当面皆無だと思うので、その辺りはベーリー気にしなぁ～い。
Javaでさえ1995年の登場時に即独習して、2003年に2Dゲームを作成したというのに、結局現時点まで一度も仕事で使った事ないし(爆)
1996年に受けたJavaの研修の教本ｗ
この言語、全く使わねー。
超高級言語でもここまでは動く事が分ってなによりです。最初にJavaScriptで物が動いているのを見たのは、1996年(位だったかな？)にナムコの公式サイトで、パックマンのアニメーションを実現していたのを見て、「なんじゃ、このヌルヌル動く画面はっ！？」という思い出があります。(Internet Explorer 3.0からサポートなので、当時表示できないマシンが沢山あった時代。会社で周りに見せようとしたら、動かないマシンばかりで、残念がった思い出もあったりｗ)
しっかし、いざちゃんと言語に向き合って触ってみると、文法も設計思想も気持ち悪い言語だった… でも簡単な言語だから(極めて行くと大変かもしれないけど)、単価も低いエンジニア向けの言語って気がしました。
コメント
流石！okiさん
お約束どおり載せてみましたよ～
先日の会合の時に話したとおり、ブログに上げてみましたｗ
お陰様で良いタイミングができました。ありがとうございます。(^^)
＞「小集団の勉強会はコンプライアンスに適合できない」
まぁ、自己啓発は名前のとおり、こうして自分でできますから。(^^)
人とツルんでやるもヨシ、独りで黙々と進めるのもヨシと思ってます。
(ようはただのメシのタネなだけですしｗ)
＞「サンデープログラム」
シューティングゲームのプログラミングって一番簡単なジャンルだと思っているので、基礎知識があれば、こんな感じで作れちゃいますね～。
…って、「ズブの素人のドヤ発言」と受け取ってくださいｗ
＞しかも、スクラッチ開発ですからね！
"趣味の"勉強のためならエ～ンヤコーラ♪ですｗ
＞「あぁ！もう夜が明けた」ってなりませんでしたか？
最近の就寝は相変わらず4時近いので、若干空が明るくなってから寝る感じです。
命が削られているのが、よーく分かります(爆)
＞早寝早起き（起床4時）
ホント、尊敬します。(^^)
私が「心の中で望んでいる生活サイクル」なので… (でも、できない…)
＞最近ではサンデープログラムしていないです。
趣味は色々あると良いと思いますので、今は「車いじりの時期」という事で。(^^)
この間お話したとおり、こう見えて(?)も、私もスキューバ時代、海外旅行時代、単車時代、ピアノ時代など、色々とありました。(テレビゲームとプログラミングだけはライフワークだったので、並行していましたが…)
＞プレイさせていただきました。
＞ヌルヌルと動くものなのですね。イイです！
プレー感想ありがとうございます！
まずはお一人様の動作確認をしていただいて大変恐縮です。m(_ _)m
＞私の脳内ではスターフォースのBGMが
雰囲気はアレのオマージュなので、合ってますよｗ
実はちょっと細工すれば、アレと同じように横スクロールも実現ができるようにしてるんですｗ
BGMを作曲できれば色々と楽しんで作れるんですけどねぇ…
フリーの素材とか持ってくればやれるんでしょうけど、今はそこまで腰が上らないです。
＞どう云うつもりでの発言なんですかね？
＞ちょっと理解し難いです。
右に同じです。「まだ面識が少ない人に向かって、ヒドイ事言うなー」って思いました。
しかも、「どこがヒドイのか言わない」のが卑怯です。ヒドイのはド素人のプログラミングなんで、火を見るより明らかなので、「じゃぁ添削して、もっと出来の良いのを見せてから言ってくれ」と思ってます。
(といっても、私は「レベルの低い人には近寄らない仕様」があるので、そんな人はそっとしておきますけど)
＞スゴイのを作ったのが悔しかったんですよ。
個人的には「スゴイのを作った感覚が無い」ので、もしも本当にソレを思ってたら、『かなりの小者』って気がします。
仮にも仕事で何年もJavaScriptをやってて、それを教えようとしている人間という立場なのですし…
＞「何だか悔しい。アイツ、すごい才能ある・・・けれど認めたくない」
＞・・・みたいな感じ？
ｗｗｗ ヒガみ根性ってヤツですかｗ
まさに小者！ もしもそう思ってたら、私だったら「オマエ凄いな。俺と一緒になんか大きなもの作ってみない？」って感じなります。
＞FM TOWNSのWindows95のがIE2でした。
ｗｗｗ TOWNSでWindows 95が動いていた事、そしてIE2だった事が驚きですｗ そこまで延命してたんですね。
時代的に私は既にAT互換機に完全移行していたので、自宅でX68000はギリギリ動かしていても、当時ベクトルの違っていたTOWNSの動向は気にしてませんでした。(^^ゞ
お陰様で良いタイミングができました。ありがとうございます。(^^)
＞「小集団の勉強会はコンプライアンスに適合できない」
まぁ、自己啓発は名前のとおり、こうして自分でできますから。(^^)
人とツルんでやるもヨシ、独りで黙々と進めるのもヨシと思ってます。
(ようはただのメシのタネなだけですしｗ)
＞「サンデープログラム」
シューティングゲームのプログラミングって一番簡単なジャンルだと思っているので、基礎知識があれば、こんな感じで作れちゃいますね～。
…って、「ズブの素人のドヤ発言」と受け取ってくださいｗ
＞しかも、スクラッチ開発ですからね！
"趣味の"勉強のためならエ～ンヤコーラ♪ですｗ
＞「あぁ！もう夜が明けた」ってなりませんでしたか？
最近の就寝は相変わらず4時近いので、若干空が明るくなってから寝る感じです。
命が削られているのが、よーく分かります(爆)
＞早寝早起き（起床4時）
ホント、尊敬します。(^^)
私が「心の中で望んでいる生活サイクル」なので… (でも、できない…)
＞最近ではサンデープログラムしていないです。
趣味は色々あると良いと思いますので、今は「車いじりの時期」という事で。(^^)
この間お話したとおり、こう見えて(?)も、私もスキューバ時代、海外旅行時代、単車時代、ピアノ時代など、色々とありました。(テレビゲームとプログラミングだけはライフワークだったので、並行していましたが…)
＞プレイさせていただきました。
＞ヌルヌルと動くものなのですね。イイです！
プレー感想ありがとうございます！
まずはお一人様の動作確認をしていただいて大変恐縮です。m(_ _)m
＞私の脳内ではスターフォースのBGMが
雰囲気はアレのオマージュなので、合ってますよｗ
実はちょっと細工すれば、アレと同じように横スクロールも実現ができるようにしてるんですｗ
BGMを作曲できれば色々と楽しんで作れるんですけどねぇ…
フリーの素材とか持ってくればやれるんでしょうけど、今はそこまで腰が上らないです。
＞どう云うつもりでの発言なんですかね？
＞ちょっと理解し難いです。
右に同じです。「まだ面識が少ない人に向かって、ヒドイ事言うなー」って思いました。
しかも、「どこがヒドイのか言わない」のが卑怯です。ヒドイのはド素人のプログラミングなんで、火を見るより明らかなので、「じゃぁ添削して、もっと出来の良いのを見せてから言ってくれ」と思ってます。
(といっても、私は「レベルの低い人には近寄らない仕様」があるので、そんな人はそっとしておきますけど)
＞スゴイのを作ったのが悔しかったんですよ。
個人的には「スゴイのを作った感覚が無い」ので、もしも本当にソレを思ってたら、『かなりの小者』って気がします。
仮にも仕事で何年もJavaScriptをやってて、それを教えようとしている人間という立場なのですし…
＞「何だか悔しい。アイツ、すごい才能ある・・・けれど認めたくない」
＞・・・みたいな感じ？
ｗｗｗ ヒガみ根性ってヤツですかｗ
まさに小者！ もしもそう思ってたら、私だったら「オマエ凄いな。俺と一緒になんか大きなもの作ってみない？」って感じなります。
＞FM TOWNSのWindows95のがIE2でした。
ｗｗｗ TOWNSでWindows 95が動いていた事、そしてIE2だった事が驚きですｗ そこまで延命してたんですね。
時代的に私は既にAT互換機に完全移行していたので、自宅でX68000はギリギリ動かしていても、当時ベクトルの違っていたTOWNSの動向は気にしてませんでした。(^^ゞ
MacOSXで動作しました！(^^)
環境は毎度おなじみのウチのiMacで、OSのバージョンは10.5.8、ブラウザは普段メインで使用しているFirefoxの16.0.2です。
プレイさせて頂いた感想ですが、予想以上に軽快な動きで実にイイですね！
カーソルキーで移動させるゲーム自体が超久々（シューティングでは恐らく高校時代に物理部のMZ-2000でプレイしたジェルダ以来…笑）だったため移動がおぼつかなく、８回目のプレイで必死こいてようやく出せたスコアは9000点ジャストでした。(^^;
＞スターフォース
確かに！（笑）
あと、撃ち漏らした敵から発射される弾！
その厳しさにスターフォースを感じますね。
難易度ノーマル以上の設定の台でプレイしている雰囲気を味わいました。(^^;
プレイさせて頂いた感想ですが、予想以上に軽快な動きで実にイイですね！
カーソルキーで移動させるゲーム自体が超久々（シューティングでは恐らく高校時代に物理部のMZ-2000でプレイしたジェルダ以来…笑）だったため移動がおぼつかなく、８回目のプレイで必死こいてようやく出せたスコアは9000点ジャストでした。(^^;
＞スターフォース
確かに！（笑）
あと、撃ち漏らした敵から発射される弾！
その厳しさにスターフォースを感じますね。
難易度ノーマル以上の設定の台でプレイしている雰囲気を味わいました。(^^;
動確ありがとうございます！
＞MacOSXで動作しました！(^^)
助かります～。
私の身近で職場以外の人でMacOSの人って、わで～んさんだけなんですよ～。
(以前仕事場で動かしてくれた人は部署が違うので、その後、このプログラムの話をするタイミングもなく、ゲームをする人でもなく…)
＞予想以上に軽快な動きで実にイイですね！
環境がしっかりしてれば、音も出ない分、ブラウザのキャッシュに載れば60fpsで動くようになってます。
＞カーソルキーで移動させるゲーム
これが難点ですよねぇ～。言語もソースが読める言語ですし、ジョイパッドも普通では使えないので、一気に開発する気力が無くなりました(爆)
＞スターフォース
アレと違って敵弾は100%自機に当るように飛ばしているので、チョンチョンとキーボードを動かすと、実はかなり当らない状態だったりしますｗ
一部弾を撃つフェラーと、ガリっぽい動きにしたので、スターフォースっぽく感じるようにしましたｗ
ちゃんとシンプルなシューティングとか作ってみたいものですが、やる事が多くてゲームを作るどころか、プレーすら最近はおぼつかない感じでして…
(それでも先日、マリオブラザーズとフリッキーで遊んでたりはするのですがｗ)
助かります～。
私の身近で職場以外の人でMacOSの人って、わで～んさんだけなんですよ～。
(以前仕事場で動かしてくれた人は部署が違うので、その後、このプログラムの話をするタイミングもなく、ゲームをする人でもなく…)
＞予想以上に軽快な動きで実にイイですね！
環境がしっかりしてれば、音も出ない分、ブラウザのキャッシュに載れば60fpsで動くようになってます。
＞カーソルキーで移動させるゲーム
これが難点ですよねぇ～。言語もソースが読める言語ですし、ジョイパッドも普通では使えないので、一気に開発する気力が無くなりました(爆)
＞スターフォース
アレと違って敵弾は100%自機に当るように飛ばしているので、チョンチョンとキーボードを動かすと、実はかなり当らない状態だったりしますｗ
一部弾を撃つフェラーと、ガリっぽい動きにしたので、スターフォースっぽく感じるようにしましたｗ
ちゃんとシンプルなシューティングとか作ってみたいものですが、やる事が多くてゲームを作るどころか、プレーすら最近はおぼつかない感じでして…
(それでも先日、マリオブラザーズとフリッキーで遊んでたりはするのですがｗ)
コメントの投稿
なんと。それは残念ですね。
＞月末の土日を使って(2日徹夜で)サンデープログラム
＞「全てスクラッチ」から起こしてみた
「サンデープログラム」・・良いですね！
新たな（取り組みの）言語なのに僅か2日で仕上げてしまう事が凄いと思いました。
しかも、スクラッチ開発ですからね！
最近は(5月の頃でも）日の出が早いので「あぁ！もう夜が明けた」ってなりませんでしたか？
私の週末の過ごし方は早寝早起き（起床4時）なので「早く日が上がらないかなぁ」とお日様を待っています。
直近では外での作業（日曜大工）なので（起床してから）日が昇るまでの間はその作業についての思案時間となっています。
そう言えば、最近ではサンデープログラムしていないです。
＞とりあえずまずは「作ってみた。」という感じです。
兎に角、作ってみる（やってみる）という事って大事ですよね。
そして、プレイさせていただきました。
ヌルヌルと動くものなのですね。イイです！
なお、数回チャレンジして8700点でした。
私の脳内ではスターフォースのBGMが流れていましたよ。スターフォースもこんな感じで敵キャラが動いていたような気がするのです。
（すみません。私の記憶違いかもしれません。「スターフォース」と云っても殆どプレイ経験がなく、弟がやっているのを見ていただけなのです。でもBGMは記憶に刻まれています）
＞JavaScriptのド初心者に言うセリフかね。これは。
＞仮にも人に物を教える立場だってーのに、やる気を消失させて何が楽しいんだか…
どう云うつもりでの発言なんですかね？ちょっと理解し難いです。
生徒が(OKIさんが）スゴイのを作ったのが悔しかったんですよ。きっとそうだ。
・・・と私はそう思いました。
ドリフトやってきているドライバーが、レーシングカーに乗っていきなり好ラップだしちゃった。
セオリー無視なのに、なぜか速い（結果出している）
長年レースやってきている人からしてみたら
「何だか悔しい。アイツ、すごい才能ある・・・けれど認めたくない」
・・・みたいな感じ？
ごめんなさい。例が悪いかもしれませんね。
＞Internet Explorer 3.0からサポートなので、当時表示できないマシン
96年って3.0だったんですね。特に印象深い（記憶に残る）事がなかったので忘れていました。
思い返してみると、FM TOWNSのWindows95のがIE2でした。