ハンドスピナー

流行（？）に便乗して、ハンドスピナーアプリもどきを作ってみました。
（HTML５）

---

<ハンドスピナー>

[ 遊び方 ]

• スピナーの右側を、マウスカーソルで素早く下に向かってスワイプすると、スピナーが回転します。
• なるべく長く回転するようトライしてみてください。長く回るとTOPに登録されます。（ページを閉じるとリセットされます）
• 画面下の小さなスピナーアイコンをタッチすると、スピナーのデザインを変えられます。

※　スマホでも動作しますが、動きがギクシャクする場合があります。

[ 備考 ]

ハンドスピナーって、数ヶ月前に海外で流行ってるって話を聞きましたが……

それからしばらく、話題を聞かなくなり（まあ、Youtuberなどでは話題になってたようですが）、日本では流行らなかったんだろうと思ってました。（家電量販店のおもちゃコーナーや、トイザらスなどでもあまり扱ってなかった）

ところが、最近になって突然、あちこちで見かけるようになりました。

スピナーのガチャガチャを発見したのを皮切りに……
祭の露店で、「スピナーくじ」を５件も6件も見かけたし。
ショッピングモールのUFOキャッチャーで大量に景品になっていて、子供も大人も一生懸命になってました。

今になってようやく、日本にスピナーブームが来てるんじゃないか？
……なんて思って、こんなモノを作ってみました。

もっとも、スピナーのアプリなんて、もはや手垢のついたネタだとは思いますけど。作るのも簡単だし。

本物のスピナーの気持ちよさまでは再現できてないですね。回転の振動が指に伝わるのが気持ちいいのかも。それに、アプリだと回転がコマ送りみたいに見えてしまいますね……。

あと、実際の性能のいいスピナーだと、3分も4分も回るって話ですけど、あまり長く回っていても飽きるんで、そこまで長くは回らないようにしてます。

(2017.8.20)

三十年王国

「三十年王国」β　（30Years Kingdom）をプレイ（HTML５）

　 ストーリー

あなたは、ある小さな島の領主です。
これから30年の間、この国により多くの人が住み、人々が幸せに暮らせるよう統治してください。

※　このゲームにはサウンドはありません。

　 操作方法

• 土地にタッチ：
  変化できる地形や、施設のアイコンが表示されます。
  施設アイコンの横に赤い三角がある場合↓　アイコンをタッチすると、施設を変更できます。

• ？ボタン：
  ゲームの簡易説明が表示されます。
  左下のボタンを押すと、進行データがリセットされ、初めからになります。
• SAVEボタン：
  SAVE後、次の年に進むか、ゲームを中断するか選べます。
  中断後は、画面をタッチするとタイトルに戻ります。

　 ルール

• 画面上部の「コマンド」（最初は3つ）の数だけ、行動できます。
• 土地を改良したり、施設を建設したりして、人口、資金、資源を増やしてください。
• コマンドを使い切ったら、右下のSAVEボタンでSAVE後、次の年に進めます。
• 幸福度x人口に応じて、スコア（王冠マーク）が上がります。30年（ターン）の間に、なるべく多くのスコアを獲得してください。終了時にハイスコアを獲得していると、記録されます。

<　施設などについて >

• 「道」
  様々な施設が作れます。まずは荒地を道に変えるのが良いでしょう。道を作るとスコアも増加します。
• 「町（家）」
  町を作ると、人口が増加します。町はその後、状況によって自動で発展します。また家の周囲の環境によって住民の幸福度が変化します。（例：町を隣接させると幸福度が下がります。また「砦」「製材所」なども幸福度を下げます）
• 「畑」
  食料が増加します。食料が人口以上ないと、町は育たず、幸福度も下がります。「畑」の隣に「湖」があると、その畑の生産量が増えます。
• 「製材所」「鉱山」
  森には製材所、山には鉱山を作れば、資源を入手できます。施設を建造するには資源が必要です。また、資源が少ないと町は発展しません。
• 「城」
  グレードアップするとコマンド数が増え、作れる施設の種類が増えます。
• 「砦」
  防衛力を上げます。蛮族をクリックすると、防衛力に応じてダメージを与えます。
• 「港」
  港があると、貿易を行い、食料を輸出入します。
• 「税務署」
  毎年の収入を上げますが、建設時に幸福度が下がります。
• 「聖堂」「闘技場」
  建設時に幸福度が上がります。隣接する町の幸福度は高くなります。
• 「蛮族」
  蛮族は施設を破壊します。蛮族がオープンされた土地にいる（半透明でない）場合、クリックするとダメージを与えられます。防衛の値が大きいほど与えるダメージは大きくなります。倒された蛮族は、強力になって復活します。

　 備考

HTML5のゲームです。monacaを使って作成しました。
地形の絵は、「ぐんまでGO!」の使い回しです…。

もう少しやり足りないことがあるのでβとしてます。天災とか、住民の反乱とか…そういう要素も入れたいと思ってたのですが…まあ更新はしないかな…。

今回の目的は、HTML5でデータを保存（セーブ）する実験ですが、内容的にはけっこう本気で、自分で遊んでみたいゲームを作ってみました。
いつものことですが、ルールを考えながら作って行ったので、紆余曲折・試行錯誤あり。完成してみたら、最初に意図したものとちょっと違っているという…。
（もうちょっと政治的な要素の強いものにするつもりだったんですが、ボードゲーム寄りになってしまいました。まあ、どっちにしても自分好みではあるんですけど）

これで、HTML５（monaca）で、試したいことはだいたい試せたかな。
しかし、Flashと同じことをやろうとすると、手間がかかりますね…。
Flashは2020年には完全終了とのことなので、まあ、仕方ないんですが…。

デバッグが浅いので、極端なことをするとおかしくなる可能性はあります…。
てなこともあり、今回もgooglePlayにアップしたりしません。
monacaのおかげで、apkが簡単に作れることはわかったんですけどね。
まあ、いずれチャレンジしてみます。

(2017.8.6)

Monaca

「忍者サバイバー」でもちょっと触れましたが、ポスト・Flashの開発ツールとして…
「Monaca」（正確にはMonacaクラウド）を使い始めてます。

Monacaは、HTML5ハイブリッド開発プラットフォームです。ベースはHTML５（JavaScript）ですが、テキストエディタなどで開発するより便利なところが色々あります。

「Android & iOS両対応 つくりながら覚えるスマホゲームプログラミング」

Monacaの解説書です。
この本を本屋で見つけて、Monacaの存在を知りました。

著者、掌田 津耶乃さん…すげー懐かしい！　
HyperCardを使ってた頃、この方の解説書にお世話になってました。
今は、Monacaのエバンジェリストになってるんですね（それだけじゃないと思いますが）。

Monacaの利点を列挙すると…

• 無料！
  ベーシックプランなら無料で試せます。無料だと同時に3つのプロジェクトしか動かせませんが、たいてい一度に１プロジェクトしか扱わないだろうから、問題なし。
• ブラウザで開発できる
  インストールしなくて良いので、私のストレージ脆弱なタブレットでもOK。データはクラウドに置かれるので、自宅での作業の続きを出先で行ったりできます。
• 「Onsen UI」というGUIライブラリを使って、リッチなデザインを組み込めます（今の所使ってないけど）
• オートコンプリート機能
  エディターにオートコンプリート機能があって、入力サポートしてくれます。
• プレビューを常時表示
  スクリプトを保存するだけで、即実行確認できます。
• スマホと連携
  デバッガアプリをスマホにインストールすると、ネット経由でスマホと連携し実機確認できます。いちいちUSB接続などしなくても良いので楽。
• デプロイ機能
  APKを作ってくれたり、GooglePlayでの公開用の設定もひととおりやってくれるようです。こらはありがたい。テキストエディタでもJavaScriptは扱えるけど、スマホ向けデプロイはこういうツールを使わないとできないんで（私は）。これで作ったAPKをAndroidにインストールしたら、ちゃんと単品アプリとして動きました。
  ハイブリッドツールなので、iPhoneのアプリも当然できる…はず。
• エクスポートすると、プロジェクトをzipで吐き出してくれる。それでバックアップもできるし、展開するとPCブラウザ用アプリとして動かせます。（このBlogで公開してるように）

いいことばかり書きましたが、ちょっとした欠点もあります。

• PC単体でのデバッグ機能がイマイチ
  PC単体でエディットしてると、つまらないSyntaxエラーすら教えてくれない…。スマホ　と連携してスマホ側で実行すると、PC側にもエラー表示されるので、問題ないといえばないんだけど…PC単体でもちょっとしたエラーくらい教えて欲しい。
• オンラインでないと使えない
  クラウドなので、ネット接続してないと使えません。私のタブレットはWifiしか使えないので、喫茶店でちょっと見るだけでも、スマホでテザリングする必要があります。

…とまあ、そんなところもありますが、概ねいい感じで、最近気に入って使うようになってます。（前も書いたけど、Monacaそのものより、解説書で扱ってたEnchant.jsが気に入ったところも大きいけど）

もっとも、Flashでやってたようなことを再現できるようになるまでは、まだまだ習熟が必要ですね。あとは、自分の気力がな…。

世間的に、Monacaの認知度、どうなんですかね。
良いものなので、ぜひ普及して欲しいものです。
（HyperCardやFlashのように、滅んでもらっては困るし…）

(2017.3.18)

忍者サバイバー

忍者サバイバー（Ninja Survivors)をプレイ（HTML5)

　 ストーリー

戦え、抜け忍！　
あなたを亡き者にせんと迫り来る、悪虐非道の組織の者どもを、ひとりでも多く返り討ちにするのだ！

　 ルール

• 敵忍者を手裏剣で倒すと得点。
• 敵忍者は3種類。スコアが上がると手強い忍者が登場します。
• 手裏剣は同時に3発まで投げられます。
  （左上の手裏剣アイコンが表示されている時に、使用できます）
• 敵の手裏剣に当たると、残機が1つ減ります。3回当たるとゲームオーバー。

　 操作方法

• マウスで操作します（PC）
• 地面をクリック：そのX位置に高速移動します。　移動は左右のみです。
  （移動中に敵手裏剣に当たってもアウトです）
• 赤忍者をクリックしてから、ドラッグする：その方向に手裏剣を投げます。
  ドラッグするスピードによって、手裏剣のスピードも変化します。
  ※　単に赤忍者をクリックするだけでも手裏剣を投げますが、スピードは遅いです。
• ゲームオーバー時、画面の中央より上をクリック：タイトルに戻ります。

　 備考

今回は、久々のHTML5の習作です。

前作「ぐんまでGO!」は（自分としては）重めのFlash作でしたが…その反動もあって、軽く仕上がりそうなものにしました。

ゲーム的にも、特に新規なネタはないです。スワイプ操作で手裏剣を投げる雰囲気を出したかったのが、唯一ネタといえばネタですかね。（PCのマウス操作だと雰囲気出ませんが…）

あ、今回はSEはありません。
面倒だったのと、HTML5ってブラウザによって音が遅延するので、徒労な気がして。

-----

脱Flashの試みとして、HTML5の修行を続けてます。そこそこのことができるようになってはきたのですが…HTML5って、流派（？）が色々あるようで、本によって作法が微妙に違うんですよね…。どの流派で行くべきか迷ってしまい…同じようなことを何度もやり直してて…三歩進んで二歩下がる感じでした…。

そんな折、「Monaca」というHTML5+javascriptのハイブリッドアプリ開発ツールの存在を知りました。

Monacaについて詳しくは別途書いてみたいと思ってますが、とにかく今回はこれを使って1本でっち上げてみたという感じです。

本来、スマホアプリにもビルドできるようですが、今回はそこまではやらず（まだよくわかってない）、PC用にエクスポートしてみました。

総じていうとMonaca自体より、解説本を見て初めて使ったenchant.jsというライブラリ（フレームワーク）が使いやすかったのが収穫ですね。キャラアニメがさせやすかったし、本体が軽いのもいい。

今までcreate.jsを使ったり、ライブラリを使わずに試したりと思考錯誤してましたが、enchant.js派になりそうな予感。

(2017.2.15)

From Beyond

From Beyondをプレイ（HTML5）

（スタートボタンが1回で効かないことがありますが、その場合は再度押してみてください）

「From　Beyond（彼方より）」

　名状し難きストーリー

「やつらがいまおれを追っている－むさぼり喰い、溶かす奴らが。しかしおれは奴らをかわす方法を知っている。奴らが召使たちを捕えたように、今度捕えるのは、おまえなんだ……身じろぎしているな。動いたら危険だといっておいたはずだ。（中略）動いていたら、もうとうの昔に奴らに捕らえられていただろう。（中略）ほら、見ろよ。見るんだ。おまえの左肩にいるじゃないか……」（「彼方より」H.P.ラブクラフト）

　名状し難きルール

「奴ら」に捕まらないように逃げつつ、プラズマ銃で「奴ら」を破壊し、薬を取ってください。

• プラズマ銃で敵を倒すと得点。（距離によってポイントは変化）
• LIFEは時間で徐々に減っていく。銃を撃つとさらに減少。
• 薬を取るとLIFEが少し回復。
• LIFEが0になるとゲームオーバー。
• 茂みの中に入ると、プレイヤーも敵も動きが遅くなります。

プレイヤーの状態によって、状況が以下のように変化します

■　プレイヤーが動いている間

• 敵の姿が出現します。
• 敵がプレイヤーを追ってきます。
• 敵に捕まると、即時にゲームオーバー。

■　プレイヤーが止まっている間

• 敵の姿が見えなくなります。
• 敵がプレイヤーを見失い、ランダムに動きます。
• 見えない敵に接触しても、即ゲームオーバーになりませんが、LIFEの減り方が早くなります。
• 止まっている時に弾を撃つと敵が見えますが、止まっていれば即ゲームオーバーにはなりません。

敵は倒しても倒しても無限に沸いてきます。クリアはありません。最終的には自分がやられてゲームオーバーになるしかないという絶望的な部分も、ラブクラフト世界観なのです（適当）。

　名状し難き操作方法

マウスで操作します

• マウスカーソルとプレイヤーをある程度離す：その方向にプレイヤー移動
• マウスカーソルとプレイヤーが近い：プレイヤー停止
• マウスクリック：マウスカーソルの方向にプラズマ弾を発射（4方向）

　名状し難き備考

久々の自作ゲーム。今回もHTML5の習作です。
前作からえらい時間経って、ようやくコレかよという感じですが…。

前作までのHTML5のゲームでは、CreateJSの「EaselJS」という外部ライブラリを使用したのですが、その後、HTML5の基本仕様だけでもっとシンプルにできないのものか…と色々調べていました。

そんな時、EaselJSを使わないゲーム製作法を解説しているらしい参考書を見つけました。
その参考書の手法を学んで作ってみたのが、今回のゲームです。

（丁寧でわかりやすく、物理エンジンサンプルまで付いていて良い本です）

で、実際どうやって登場キャラクターを表示したりアニメしたりするのか…順に追って本を学んで行き、肝心なその手法のところまでたどり着いて、ちょっとビックリしました。

スプライトのような概念ではなく、フレームごとに画面を全部塗りつぶして、新たに全部描き直す（背景も、キャラクターも）という、豪快な方法だったのです！

そんなことをして処理速度的に大丈夫かいな、と思い、細かいキャラがわらわら出るゲームを作って試してみようと思いました。で、こんな感じの物を作りました。

ゲーム的には、以前やはりFlashのActionScript3.0習作時に作った「Alien Hunter」とほとんど一緒ですが…でもプログラムは全然流用してません（見直すのも面倒だったので）…。

見た目がレトロっぽいのも、別にスペックのせいではなく、意図的なものです。
ゲーム内容がレトロっぽかったのと、最近自分の中でレトロゲーム熱が高まっていたので、こんな感じにしてみました。（このゲーム内容のまま、リアルな絵に差し替えも可能です）

試してみたところ、この程度ならまったく問題なく動くようですね。まあ、こんなビジュアルなので、サンプルになるのかどうかもわかりませんが。

ということで「EaselJS」を使わないゲーム製作法を会得したわけですが…

…結果としては「EaselJSを使った方が楽そう」という感想でした…。やはり自分には、ASライクなEaselJSの方が使いやすそうです。まあ、作るものによって、ケースバイケースかなとも思いますが。

本作はラブクラフトの「彼方より」をモチーフにしてますが…

作り始めたときは、もっと普通のゲームにするつもりだったのです。ただ、「AlienHunter」に似すぎていて芸がないと思い、たまたま思い出した「彼方より」（HPL作品としては世間評は低いようですが、私は好き）をモチーフにして、こんなルールのゲームにしてみました。

その結果、わけのわからないゲームになってしまいましたが…まあ、実験作ですし、まじめにプレイする人なんていないだろうし、前衛的・ゲージツ的で、こんなのもいいんじゃないかなと。

実は、相変わらずFlashでの制作も平行していて、引き続きRPGっぽいモノを作ってます。当初思ってたものからだいぶ違うものになりつつありますが…。こっちはかなり複雑で、リソースも多く、まだまだ時間かかりそうです…。

(2016.5.11)

車間距離 -SUDDEN BRAKE-

「車間距離 =SUDDEN BRAKE-」をプレイ

　はじめに

車を運転する際、適正な車間距離ってどれくらいなのか。
以前は、速度の数字と同等なm（時速50kmなら50m）だと言われていましたが、最近では「3秒ルール」が提唱されているようです。
3秒ルールとは「前方の車との距離を3秒分取る」ということ。こちらの方がわかりやすいし、安全度は高いということのようです。

実際には「ある地点を前の車が通過してから自分の車が通過するまでの時間を計って3秒以上ならOK」というわけです。
しかし、実際やってみると、正確に測るのはなかなか難しい。

余裕を持って、5秒とか10秒くらいのつもりで空ければ、追突という意味では安全かもしれませんが…あまり空けすぎると、今度は車の流れを乱して後続車をイラつかせることになったり、空いた所に急に割り込みが入ってきたりして、それはそれで危ないこともある。

…なんてことを、運転しながら考えていたら、こんなゲームを作ってみたくなりました。

まあ、作りがいい加減なので、シミュレーターにはなりませんけど……反射神経の訓練くらいにはなるかも？

みんな大好きHTML5で作りましたので、ぜひプレイしてみてください。

※　ブラウザはChromeかIE推奨です。Safariではサウンドが遅延するようです。
※　このゲームはフィクションです。実際の運転には充分注意しましょう。危険なアオリはやめよう！

　ルール

前方を走る車に追突しないよう速度をコントロールしながら、なるべく速い速度で走ってください。
前方の車は急ブレーキをかけることもあるので注意！

追突してしまうか、TIMEが0になるとゲームオーバーです。

操作方法

マウスの位置で操作します。
画面上でマウスカーソルを上方に：加速
画面上でマウスカーソルを下方に：減速

※　タイトルのStartボタンの効きが悪い時があります…。スタートするまで何回か押してみてください。

備考

今年中に間に合った。今年最後の自作ゲーム。

今回もHTML5で作ってみました。

当初、画面作りはThree.jsでの3D表示に挑戦しようと思ってたのですが、2Dとの表示の合成の仕方がよくわからなかったり、ブラウザによって表示速度が著しく変わったりなど不都合があり（対処するのも面倒になって）、断念。

ってことで、「アウトラン」や「スペースハリアー」のような、昔懐かしい擬似3D表示にしてみました。
上下左右の動きはないので、アウトランなどに比べても、だいぶ手抜きですけどね。

使用している画像は…
運転席は、自前の車のものです。詳しい人には車種がバレるな（笑）。古い軽自動車です。

先行車は、誰とも知らない車を、車窓から勝手に撮影して使わせてもらってます…。
一応、特定できないように配慮はしたつもりですので、ご容赦を…。

道路脇の樹は、Photoshopのフィルターの描画機能で作ったものです。
世の中便利になってるなあ。こっちはどんどん堕落していく。

---

今年は、GooglePlayにアップするほどのゲームは作れませんでしたね。

Flashの方ではRPGモドキを作ってて、出来によってはGooglePlayも視野に入れてはいるのですが…
作るのに時間がかかるものは億劫で（特に絵素材とか）、今回のような小ネタを思いつくたび、脱線するというか逃げてます。

今年は本業が忙しかったせいもあるけど、Flashの先行き怪しさでモチベーションが下がってるんですよね。
かといって、完全にシフトするほどHTML5も信用できないしなあ…。

Flashも改称の機に、月額をPhooshopくらい安くしてくれればいいのになあ。無理か。

来年はいよいよ、決断の年になるのかな…。

(2015.12.26)