TOP絵変更 → 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41  クリックすると変更されます
HOME

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

右下にこっそりとある「テスト」欄のソース説明

これはみんなの呟きとjubeat譜面のページを混ぜて簡単にしたようなやつ。
バトルのないストーリーモードみたいな動きをする。

てことでソースの説明


まずHTML部分から。

<form name="formTest2">
<table onclick="clickScenario()">
<tr><td><span id="textImage">クリックすると</span></td></tr>
<tr><td><span id="textMessage">シナリオ開始</span> <span id="textNext"></span></td></tr>
<tr><td> </td></tr>
<tr><td><span id="textSelect1" onclick="textSelect(1)" style="color:#00ff00"></span></td></tr>
<tr><td><span id="textSelect2" onclick="textSelect(2)" style="color:#00ff00"></span></td></tr>
<tr><td><span id="textSelect3" onclick="textSelect(3)" style="color:#00ff00"></span></td></tr>
<tr><td><span id="textSelect4" onclick="textSelect(4)" style="color:#00ff00"></span></td></tr>
</table>
</form>

まぁ実はformはいらないんだけど。
こいつはテーブル内の何をクリックしても「clickScenario()」が
呼ばれる仕組みになっている。画面クリックみたいなもん。
文字であろうがイメージであろうが、テーブル内のやつをクリックすれば
次のシナリオへ飛ぶ。

id textImage のところにはイメージ画像表示予定、
id textMessage のところには文章表示予定
id textNext のところには、次へ進むのを促すマークみたいなのを表示予定。
id textSelect1~4 のところには各選択肢を表示予定。

onclick内のテーブルの中にさらにonclickを入れたらどういう動作になるか
わからんが、とりあえずIE10では一番内側のonclickが先に呼ばれる様子なので
それを利用してみました。
まぁブラウザ依存するようならonclickの範囲縮めるけど…。
とりあえずこれでいいや。(そもそもonclick自体ダメという説も)

なので選択肢をクリックした場合は先にtextSelectが呼ばれ、
そのあと連続してclickScenarioが呼ばれる仕組みになっている。


続けて直書きしてあるjavascript部分


<SCRIPT language="JavaScript" charset="euc-jp"><!--

var timerGlobalID;
var timerGlobalID2;
var textImage = "textImage";
var textMessage = "textMessage";
var textNext = "textNext";
var textSelect1 = "textSelect1";
var textSelect2 = "textSelect2";
var textSelect3 = "textSelect3";
var textSelect4 = "textSelect4";
var nextMarkFlg = 0;
var nextMarkTenmetu = 0;
var shiftTextCount = 0;
var shiftScenarioCount = 1;


まずはグローバル変数部分。
タイマーを使うのでIDを2個ほど用意、
あとそれぞれのid名を保持しつつ、
フラグやらカウントやらを用意している。





function clickScenario()
{
if ( shiftTextCount >= 1 ) {
document.getElementById(textMessage).innerHTML;
shiftTextCount = dataMessage[shiftScenarioCount].length + 1;
clearInterval(timerGlobalID);
timerGlobalID = setInterval("shiftText('" + dataMessage[shiftScenarioCount] + "')", 1);
return;
}


if ( shiftScenarioCount == 0 ) {
return;
}

// Nextマーク初期化
document.getElementById(textNext).innerHTML = "";
clearInterval(timerGlobalID2);

// 表示選択肢初期化
document.getElementById(textSelect1).innerHTML = "";
document.getElementById(textSelect2).innerHTML = "";
document.getElementById(textSelect3).innerHTML = "";
document.getElementById(textSelect4).innerHTML = "";

// 表示絵
document.getElementById(textImage).innerHTML = dataImage[shiftScenarioCount];

// 表示文字
shiftTextCount = 1;

// データタイプが0の場合、単純表示。それ以外の場合はスピード可変文字
if (dataType[shiftScenarioCount] == "0") {
timerGlobalID = setInterval("shiftText('" + dataMessage[shiftScenarioCount] + "')", 30);
} else {
timerGlobalID = setInterval("shiftTextSpeedChange('"
+ dataMessage[shiftScenarioCount] + "', "
+ dataChange[shiftScenarioCount] + ", "
+ dataSpeed[shiftScenarioCount]
+ ")", 30);
}

}


まぁスクリプト内のコメントの通り。

最初にif文で聞いてリターンしているのは、
テキスト表示中の場合はクリック無視、
またシナリオがすでに終了している場合はクリック無視の
2つのチェックをしている。
(テキスト表示中クリックしたら即表示処理を後で追加した)

そのあと次へ促すマークを一旦消して、
選択肢の表示も初期化、そのあと絵を表示後、
文字を表示。

文字には2種類のタイプが用意してあり、
0かそれ以外かで判断している。 データ部については後に説明。
つまり「シナリオn番目のタイプは何か」を聞いている。

タイプが0の場合、シンプルな文字表示を行う。
シンプルといっても選択肢は表示可能。
できないのは文字表示速度の可変部分。

タイプが1(予定)の場合、文字表示速度可変可能な文字表示を行う。
これはデータに何文字目から何秒間隔で表示するかを、
配列に用意してコントロールしている。
たとえば「4文字目から0.3秒に1文字表示」や
「8文字目から0.04秒に1文字表示」等、複数指定できる。
指定方法もデータ部のときに説明する。





// 一定間隔で1文字ずつ表示
function shiftText(text){

document.getElementById(textMessage).innerHTML = text.substring(0 , shiftTextCount);
if(shiftTextCount != text.length+1) {
shiftTextCount++;

} else {
shiftTextCount = 0;

// 表示選択肢
document.getElementById(textSelect1).innerHTML = dataSelect1[shiftScenarioCount];
document.getElementById(textSelect2).innerHTML = dataSelect2[shiftScenarioCount];
document.getElementById(textSelect3).innerHTML = dataSelect3[shiftScenarioCount];
document.getElementById(textSelect4).innerHTML = dataSelect4[shiftScenarioCount];

// 指定メッセージジャンプがある場合、そのメッセージへ遷移
if ( dataJump[shiftScenarioCount] != 0 ) {
shiftScenarioCount = dataJump[shiftScenarioCount];
} else {
shiftScenarioCount++;

// シナリオカウントがMAXの場合、処理終了
if (iDataMax < shiftScenarioCount) {
shiftScenarioCount = 0;
}
}

clearInterval(timerGlobalID);
timerGlobalID2 = setInterval("nextMark()", 500);
}
}


ここでタイマー登場。
1文字1文字をタイマー機能を使って表示している。
文字が表示する文字列すべて表示した場合はタイマーストップ。
そして表示する選択肢がデータにあれば表示。
代わりに次へ促すマークのタイマー開始を行う。
また、データ部にはジャンプ機能もあるため、
メッセージID(?)を指定するとその箇所まで
シナリオをジャンプできる。

ジャンプ指定がなかったら普通にシナリオを1加算して次に進む。

ただしシナリオがMAXの場合はもう処理をしないため、
shiftScenarioCountを0、つまりclickScenarioの
最初のチェックにひっかけて処理をさせないようにする。






// 一定間隔で1文字ずつ表示 指定文字列でスピード変更
function shiftTextSpeedChange(text, change, speed){

document.getElementById(textMessage).innerHTML = text.substring(0 , shiftTextCount);
if(shiftTextCount != text.length+1) {

// 可変箇所を検索し、タイマー再実行
for( var key in change ) {
if ( change[key] == shiftTextCount ) {
clearInterval(timerGlobalID);
timerGlobalID = setInterval("shiftTextSpeedChange('"
+ dataMessage[shiftScenarioCount] + "', "
+ dataChange[shiftScenarioCount] + ", "
+ dataSpeed[shiftScenarioCount]
+ ")", speed[key]);
}
}
shiftTextCount++;

} else {
shiftTextCount = 0;

// 表示選択肢
document.getElementById(textSelect1).innerHTML = dataSelect1[shiftScenarioCount];
document.getElementById(textSelect2).innerHTML = dataSelect2[shiftScenarioCount];
document.getElementById(textSelect3).innerHTML = dataSelect3[shiftScenarioCount];
document.getElementById(textSelect4).innerHTML = dataSelect4[shiftScenarioCount];

if ( dataJump[shiftScenarioCount] != 0 ) {
shiftScenarioCount = dataJump[shiftScenarioCount];
} else {
shiftScenarioCount++;
// シナリオカウントがMAXの場合、処理終了
if (iDataMax < shiftScenarioCount) {
shiftScenarioCount = 0;
nextMarkFlg = 1;
}
}

clearInterval(timerGlobalID);
timerGlobalID2 = setInterval("nextMark()", 500);
}
}


文字表示速度可変用。
データ部をチェックしてその文字列まで来たら、
タイマーを一旦止めて、スピードを変えて再始動している。
それ以外はシンプル版と大体同じ。





// 一定間隔で次へ促すマーク表示
function nextMark(){

var mark = "▼";

if (nextMarkTenmetu == 0) {
nextMarkTenmetu = 1;
mark = "▼";
if ( nextMarkFlg == 1 ) {
mark = "■"
}
} else {
nextMarkTenmetu = 0;
mark = "";
}

document.getElementById(textNext).innerHTML = mark;

}


次へ促すマークの表示。
文字が表示し終わるとタイマーによって始動される。
基本的には"▼"が点滅するような動きになる。
シナリオが終了になると"■"になる。





function textSelect(number)
{

if (number == 1) {
if (dataSelectJump1[shiftScenarioCount - 1] != 0) {
shiftScenarioCount = dataSelectJump1[shiftScenarioCount - 1];
}
} else if (number == 2) {
if (dataSelectJump2[shiftScenarioCount - 1] != 0) {
shiftScenarioCount = dataSelectJump2[shiftScenarioCount - 1];
}
} else if (number == 3) {
if (dataSelectJump3[shiftScenarioCount - 1] != 0) {
shiftScenarioCount = dataSelectJump3[shiftScenarioCount - 1];
}
} else if (number == 4) {
if (dataSelectJump4[shiftScenarioCount - 1] != 0) {
shiftScenarioCount = dataSelectJump4[shiftScenarioCount - 1];
}
}
}


選択肢用スクリプト。
前述した「一番内側のonclickが先に呼ばれる様子」を利用して
押された選択肢のデータ部を取得し、そこに指定されたシナリオの
番号を入れるだけの処理となる。
shiftScenarioCountに入れておけばその後外側のonclickが呼ばれて、
そのまま動く。
ただし選択肢を選択した時はシナリオは次のカウントを読んでいるため、
ここではマイナス1して前のデータを拾うようにしている。



スクリプトは以上。次はデータ部。
データ部は「message_data.js」という外部ファイルにまとめている。



var dataNo = new Array(0);
var dataMessage = new Array(0);
var dataImage = new Array(0);
var dataType = new Array(0);
var dataChange = new Array(0);
var dataSpeed = new Array(0);
var dataJump = new Array(0);
var dataSelectFlg = new Array(0);
var dataSelect1 = new Array(0);
var dataSelectJump1 = new Array(0);
var dataSelect2 = new Array(0);
var dataSelectJump2 = new Array(0);
var dataSelect3 = new Array(0);
var dataSelectJump3 = new Array(0);
var dataSelect4 = new Array(0);
var dataSelectJump4 = new Array(0);

var iData = 0;
var iDataMax = 4;

iData = 4;

dataNo[iData] = iData;
dataMessage[iData] = "とにかく今はテスト段階ですw";
dataImage[iData] = "";
dataType[iData] = "1";
dataChange[iData] = "new Array('1')";
dataSpeed[iData] = "new Array('30')";
dataJump[iData] = 3;
dataSelectFlg[iData] = 0;
dataSelect1[iData] = "";
dataSelectJump1[iData] = 0;
dataSelect2[iData] = "";
dataSelectJump2[iData] = 0;
dataSelect3[iData] = "";
dataSelectJump3[iData] = 0;
dataSelect4[iData] = "";
dataSelectJump4[iData] = 0;


iData = 3;

...(以下略)...



全部グローバル変数。
data~から始まる配列型の変数群をあらかじめ用意する。
各変数説明

・dataNo
 実はいらない

・dataMessage
 表示する文字列を格納

・dataImage
 表示する画像を格納 別に画像じゃなくても表示される。

・dataType
 文字をシンプル表示するか、文字表示速度可変で表示するかのフラグ。
 0:シンプル 1:可変(予定)

・dataChange
 文字可変の場合、どの文字から可変するかを設定する。
 たとえば「new Array('4', '8', '13')」とした場合、
 4文字目、8文字目、13文字目からそれぞれ別のスピードに可変する。
 スピードについては以下、dataSpeedにて。
 dataChangeとdataSpeedは関連性があるため、要素数は同じにしなければならない。

・dataSpeed
 文字可変の場合、文字のスピードを設定する。
 たとえばdataChangeが「new Array('4', '8', '13')」となっていて、
 dataSpeedが「new Array('500', '30', '50')」とした場合、
 4文字目からスピード'500'、8文字目からスピード'30'、13文字目からスピード'50'となる。
 (スピードはミリ秒単位)
 dataChangeとdataSpeedは関連性があるため、要素数は同じにしなければならない。

・dataJump
 指定したシナリオ番号へ飛ぶ。
 (グローバル変数iDataに指定した場所を次に読み込むということ)
 dataJumpを3にした場合、このシナリオの次は3のデータ部を表示する。
 シナリオ3が特に選択肢もジャンプも書かれていない場合は、
 4と3をずっとループすることになる。
 0を指定するとジャンプを無視する。

・dataSelectFlg
 用意はしたけど実はいらない。

・dataSelect1~4
 選択肢1~4に表示する文字。
 基本的にはデータが""になっていればクリックできない。
 (クリックできないからdataSelectFlgがいらない子になった)

・dataSelectJump1~4
 選択肢1~4を選択した場合にジャンプするシナリオ番号。
 ジャンプ先の番号が0だと選択肢を無視して次のシナリオに行く。
 (無視するからdataSelectFlgがさらにいらない子になった)



まぁ後でこのmessage_data.jsを自動生成するエクセルでも
作っておきますけどね。
入力フォーム無しとかありえないんd




以上かなぁ。
これでjavascriptでノベルゲー、ギャルゲーみたいなことが
できるようになったということ。
文字色変更したいとか文字を大文字にしたいとかもあるだろうから
まだ改良するかもだけど、まずはこれを基礎として
作り上げればいいんじゃないかな。
(文字色もタグを使って、タグ部分の表示速度を1にすれば
 ほぼいけるんだけどね)
スポンサーサイト

テーマ : テイルズウィーバー
ジャンル : オンラインゲーム

コメントの投稿

非公開コメント

著作権

Copyrights (C) NEXON Corporation and NEXON Co., Ltd.
All Rights Reserved.
乱数試行機

乱数試行機

成功率 %
試行回数 回

成功    :0 回
失敗    :0 回
成功率結果 :0 %
試行回数結果:0 回
簡易MRシミュレータ

簡易MRシミュレータ
by †真・ブリニクルディメンションスレイヤー

S:64 
H:136 
F:17 
I:16 
M:14 
X:16 
A:11 
Q:10 
C:9 
アンチ無
MR費用:0
MR券込:0
回した回数:0

※ステがMAXになると
 黄色文字になります
 ステ自体違う場合はコメントくだs
※ラジオボタンを押下すると
 アンチマジックを使った状態に
なります

個人リンク
みんなの呟き

   



サイト説明
BloodyRosary は
テイルズウィーバーなブログです。
レコ…霧鯖で活動してるってばよ。
TwitterID:yoinagiTW

このブログはリンクフリーです。
+50000
しかしなぜか東方カウンター
自己紹介

宵凪(テチ) Lv:290
3次覚醒済


江戸川ドイル(アナイス) Lv290
2次覚醒済


竜崎シオン(イソ) Lv290
2次覚醒済


ラストセラフィ(ベンヤ) Lv290
2次覚醒済


シルフィアス(ナヤ) Lv:290
2次覚醒済


ジールラファル(マキシ) Lv:255
覚醒済


レスヴィリア(ミラ) Lv:255
覚醒済


聖王リヴァイア(シベ) Lv:255
覚醒済


セレス(クロエ) Lv265
覚醒済


月千夜(ジョシュ) Lv255
覚醒済


雪千夜(ランジエ) Lv255
覚醒済


超社長(イサック) Lv255
覚醒済


ナズナ(ボリ) Lv255
覚醒済


シルベイン(ピン) Lv:255
覚醒済


ディシディア(ルシ) Lv255
覚醒済


メルブレイズ(ロアミニ) Lv255
覚醒済


ルヴァリオ(ノクターン) Lv255
覚醒済


臼いネコ(テチ) Lv290


x音葉x(テチ) Lv199

他のキャラ
セリカ様(アナイス) Lv290
黒銀シア(ピン) Lv274
全キャラレコ…霧鯖で適当に活動中
今までの絵
右下に行くほど新
左上に行くほど古
リンクにマウスをあわせると
縮小画像表示

ちなみに読み込み遅いです。
最新コメント
カレンダー
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
カテゴリ
リンク
テスト
クリックすると
シナリオ開始 
 
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。