Yoyogi Jotaro の何だかよく分からないブログ

主にゲームブックについて語ります。他、北海道ネタ、ホリエモン、雑談など

WordPressに外部JavaScriptファイル実装して、単独でテキストベースなら戦闘シーン出来ました

皆様今日は。

ゲームブック投稿サイトを運営しているものです。

f:id:oniisann:20150915221937j:plain

今回はTRPG系ゲームブックの戦闘シーンの自動化の途中経過をお伝えしたいと思います。

f:id:oniisann:20150915012103j:plain

※戦闘シーン想像図。物凄い盛ったイメージです。ぱくたそさんより。

 

ステータス

体力点?? VS 敵の体力点??

技術点?? VS 敵の技術点??

防御点?? VS 敵の防御点??

■■戦闘状況■■

あなたの攻撃

敵の攻撃

ホントのイメージはこんな感じです。

↑開始・続けるボタンをクリックしても反応しません。

何故かはてなブログではinputタグのonclickを入力・保存しようとしても保存されず、ボタンが飾りに成り下がってしまうようです。

で、こちらのHTMLは下記のようになっています。

<script type="text/javascript" src="http://gamebook.xyz/wp-content/themes/hathor/js/sample2.js"></script>

<div style="background-color : #26ae90; width : 320px;">
<center>
<p>ステータス</p>
<p id="hit">体力点?? VS 敵の体力点??</p>
<p id="tech">技術点?? VS 敵の技術点??</p>
<p id="defen">防御点?? VS 敵の防御点??</p>
<p id="number">■■戦闘状況■■</p>
<p id="youat">あなたの攻撃</p>
<p id="eneat">敵の攻撃</p>
<input type="button" value="開 始" onclick="ready()" style="width : 160px;">
<input type="button" value="続ける" onclick="battle()" style="width : 160px;">
</center>
</div>

一時はWordPressでJavaScriptを動かすことも出来ませんでしたが、徐々にinlineプラグインで強引に記事内で実装できるようになり、さらに今では外部ファイルにして読み込むところまではやっと理解できました。(赤字のところです)

慣れると、外部ファイルにした方がずっと扱いやすいですね。

何だかWordPressは勝手に<p>タグつけられたり、タグが一部削除されなりなど挙動が変なところがありますからね。

(それ以上に強敵ははてなブログ。本当にコイツには参る……。青字のところが保存されなかったところです)

多分セキュリティの兼ね合いからわざとそうしているんでしょうけど、慣れないと大変ですね。

ま、プログラミングで大事なことを思い出しましたよ。

「習うより慣れろ」

です。

ググッて試行錯誤して、分からなければまたググッて試行錯誤して。

その繰り返しで何とかなるものです。

もっとも、若い方なら飲み込みや吸収が早いでしょうけど、大人になっちゃうと結構歩みが鈍くなりますね。悲しい……。(;_;)

はい、それで実行結果のイメージはこちら。

f:id:oniisann:20150916212441g:plain

最初に「開始」ボタンを押し、後は「続ける」ボタンを押す毎に、第1回戦、第2回戦…とバトルが展開されていきます。

ほぼ自動で楽なのはいいとして、あまりにも味気ないですね。

せっかくのバトルがつまんないというか……。(T_T)

ドラクエの様にダメージを受けたら画面が点滅するとか、相手の攻撃を避けることができたら文字の色が変わって表示されるとか、色々やりたいんですけど、HTMLで直接タグのスタイル弄っても変化がないので、またいろいろ試行錯誤したいと思います。

もっと言えばサイコロが転がっている状態で、読者がクリックすると決定して後は自動で計算して勝敗を決めてくれるというような、ガンバライドのような感じがいいですね。1:42あたりから御覧ください。

(もちろんここまで3Dグラフィックを使うという意味じゃないですよ(^_^;))

youtu.be

 

あと一番困っているのは、このバトルシーン、1箇所限定なんですよ。

他にも配置したところで最初のモノが反応するだけで、他はピクリとも動きません。

これが敵が現れるところ全てに配置できればいいんですよね。

そして敵によってパラメータが異なるとか、主人公は前回のバトルでのパラメータを引き継いでいるとか、途中食事を取って回復出来るとか。

なかなかJavascriptは単純なことをやらせるのが困難ですね。

ま、後は敵のイメージ画像は投稿者の方に用意して頂くとして、上記バトル画面の行間を圧縮できればいいですね。

この辺り、JavaScriptの関数とかonloadとかタイマーとか、CSSの理解と運用が不可欠でしょうねえ。

 

ま、あんまり期待せずにいて下さい。

 

以上北海道からでした。

GameBook.xyz - スマホ対応!無料で楽しめるゲームブック投稿サイト

f:id:oniisann:20150908153952j:plain

 

さて、あなたはどうする?
GameBook.xyzへもどる→1
Googleへ行く→14