前回からかなり間が空きましたが、v0.100にアップデートしました。主な変更点は以下のとおりです。前バージョンの問題点として、装備品のダメージや守備力の値が低い事で別名称の装備品の性能値が同じになるという事がありました。今回はその値を10倍程にして、キャラクターの性能もそれに合わせて調整しました。これまではダメージなどの値はダイス表記でしたが、今回からはMin・Max表記に変えています。レベルアップ時に得られるステータスポイントを1から5に、一部のステータス値(速度、種族ダメージなど)をパーセンテージに変更し、@が初期状態から埋め込みのレシピを覚えているように修正しました。今回から武器に筋力制限があり、筋力値が足りなくても装備する事は出来ますが命中値は最低値になります。このバランス調整に合わせて、薬やレシピなども一部追加、修正しています。UIの変更UIをCanvasからDOMに変更しました。実装当初はマップもDOMに変更しようとしたのですが、要素が数千個になると急激にパフォーマンスが下がったり、それ以前の問題としてDOMの動作が遅すぎるので、マップは以前通りCanvasで実装しています。完全にレスポンシブというわけではないですが、ゲーム画面をブラウザの幅に合わせるようにしました。前バージョンではオプションで影を付けるとキャラクターが移動した際などに、その影が残るという実装上の問題がありました。CanvasのdrawImage()でマップを描写する際に、地形とキャラ・アイテムなどを分けて複数回重ねて描写する事で解決しました。対応ブラウザについてFirefoxに関して、単なる処理の重なりなのか原因は不明ですがコンソールでAborterrorが出ることがあります。このエラーが出ても自分がプレイして確認した範囲では支障はありませんでした。Edgeに関して、これも原因が不明なのですが、ゲームの起動に1分程かかる場合があります。Operaなど)にしか対応していないので、その他のブラウザではデフォルトのスクロールバーが表示されます。上記の理由で、対応ブラウザはChrome最新版のみ表記してますが、プレイ自体はFirefoxやEdgeでも可能と思われます。実装に関してですが、状態異常の幻覚の背景色はCanvasのshadowColorでマップ全体の色を変えていたのですが、Chrome以外のブラウザだとパフォーマンスが目に見えて下がるので、これをDOMのbackground-colorに変更しています。実装について今回UIをDOMに変更するにあたり、Vuejsを導入しました。HTMLにJSの変数を割り当てることで、変数に変更があればHTMLにも反映されるリアクティブと呼ばれるシステムを構築しています。これは仮想DOMを介して行われ、差分だけDOMに反映されるので、余計なDOM操作を回避出来ます。言語を変えることなく既存のコードに対して部分的に適用出来るのでこのフレームワークを採用しました。CSSについて、過去のブラウザに対応させるベンダープレフィックスを併記するために、Autoprefixerを利用しました。JSについて、キーイベントの入力値であるkeyCodeが廃止予定になっていたので、同じキーイベントであるkeyに置き換えました。前者は数値ですが、後者は文字を直接取得します。Babelを使ってES6をES5に変換しようとしていたのですが、Googlebotが5月にアップデートされES6に対応していたので今回は見送りました。互換性について前バージョンとの互換性はありません。新規データとして始まります。コメントをキャンセルメールアドレスが公開されることはありません。