備忘録 『ドラゴンクレイズ』用のモンスター図鑑の作成記録 忍者ブログ
javascriptの初心者。  http://ocyanomi.chagasi.com/
Admin / Write
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HPにpngの絵が表示されない。

原因が分からないまま ほっといていたのだけど

たまたま FTPでファイルを見てみると
.png と.PNG の拡張子の大文字 小文字の違いが・・・

イントラネットだと影響がなかったので気が付かなかったけど
まさかと思い 小文字に変換したら 表示されたヽ(^o^)丿

覚え書き
PR
原因不明 ( ;∀;)
記憶部分の桁まとめで使用 忘れがちなので

1,56,278 を 001,056,278 と桁を合わせたい場合、

そのまま考えると
 if( suuji < 10 ) { suuji = "00" + suuji; }
else if ( suuji < 100 ) { suuji = "0" + suuji; }
壱桁の時は00を足す、十桁の時は0を足す処理となる。

頭を切り替え割り切って文字だと考えると
suuji = ("000"+suuji).slice(-3);
これは000を上部に足してした3文字で切り 3桁にする

1    の時、000 + 1 = 0001 で 0001 から下3文字 001
56  の時、000 + 56 = 00056 で 00056 から下3文字 056
278 の時 000 + 278 = 000278 で 000278 から下3文字 278

なんとなく すごくズルした気分 (*'▽')
たぶん Indexof() を 使うと スマートに行くと思う。
     jQuery が 使えてもスマートに行くと思う。

両方うまくいかずこんがらがったので、forで片っ端から探す事にしました。

////////////    検索文字決め部分 ////////////
var knamech = new Array();       // 検索される文字配列
   knamech[0] = new Array();
   knamech[1] = new Array();     // 検索される文字
var knamech = [
   ["0","-"],
   ["1","赤のスライム♀"],
   ["2","炎のエレメンタル"]
   ]

////////////    検索文字決め部分 ////////////
var knumber = new Array();                 // 検索結果格納用
for (i=0;i<342;i++){knumber[i]=0};  // 検索結果格納用に0を書き込む
var kcount  = 1;          // 合致している数+1
検索文字 = document.kensaku.kensakukey.value ;        // textboxより検索したい文字
検索文字 = 検索文字.trim();                                           // 文字両端の空白を削除

////////////    検索部分 ////////////

for (var i=1;i<knamech.length;i++){            // 1から配列最後(この場合2)まで検索
  var 対象文字 = knamech[i][1];
  if(対象文字.search(検索文字) == -1){     //// 合致しない場合
  }else{                                      //// 合致の場合
  knumber[kcount]=i;
  kcount = kcount +1;
  }
////////////    検索部分終了 ////////////
ChromeとFireFox の確認が出来ていたので油断してた。
fix部の
 <div id="setumei" style="color:red; width:600px; text-align:center;"></div>
を書き換えの
document.getElementById("setumei").innerHTML= "”
が 
IE と Edge が 動作しない。

どうしようか???
javascript 図鑑の枠組みの作成方法 Excelを使用



<div id="disp001">
<table id="ta001" class="auto-style1" style="width: 600px">
<tr>
<td class="auto-style2" style="width: 120px"><div id="name001"></div></td>
<td class="auto-style2" style="width: 160px"><div id="wazaname1001"></div></td>
<td class="auto-style2" style="width: 160px"><div id="wazaname2001">&nbsp;</div></td>
<td class="auto-style2" style="width: 160px"><div id="wazaname3001"></div></td>
</tr>
<tr>
<td class="auto-style3" style="width: 120px">
<div id="chbr001"><form name="f001">
<img alt="cha img" name="char001" src="im/mon_empty.jpg" height="100" width="100" /></form></div></td>
<td class="auto-style2" style="width: 160px"><div id="waza1001"></div></td>
<td class="auto-style2" style="width: 160px"><div id="waza2001"></div></td>
<td class="auto-style2" style="width: 160px"><div id="waza3001"></div></td>
</tr>
<td class="auto-style3" style="width: 120px"><div id="class001"></div></td>
<td class="auto-style3" style="width: 160px"><div id="hatudou1001" class="auto-style4"></div></td>
<td class="auto-style3" style="width: 160px"><div id="hatudou2001" class="auto-style4"></div></td>
<td class="auto-style3" style="width: 160px"><div id="hatudou3001" class="auto-style4"></div></td>
</tr>
<tr>
<td class="auto-style3" style="width: 120px"><div id="zokusei001"></div></td>
<td class="auto-style3" style="width: 160px"><div id="jyouken1001" class="auto-style4"></div></td>
<td class="auto-style3" style="width: 160px"><div id="jyouken2001" class="auto-style4"></div></td>
<td class="auto-style3" style="width: 160px"><div id="jyouken3001" class="auto-style4"></div></td>
</tr>
</table>
</div>

赤色の部分を001から341まで作成すると一覧表になる。
一つづつ直す方法もあるのだけれども時間がかかりすぎるので
Excelで001の数値を変数にしてドラック&ドロップで一気に作成する。

例)C35に001の数値が入っているとして

=+"<div id=""disp" &C35&""">"
=+"<table id=""ta"&C35&""" class=""auto-style1"" style=""width: 600px"">"
=+"<td class=""auto-style2"" style=""width: 120px""><div id=""name"&C35&"""></div></td>"


要素を作るのが面倒なので
{0,1,2,3,4,5,6,7,8,9,10}

Excelで作成する方法

あらかじめ要素を分け フィルターで選択する。

上記の場合、魔法コンボでフィルターをかける。
Z行に 魔攻コンボのキャラクター番号が表示される。
まず、それをコピーする。


この行に代入にペーストする。
行右の山の計算式は単純で
=+D5&","     :1行目
=+F5&D6&","   :2行目
=+F6&D7&","   :3行目

2行目以降はコピー&ペースト。
あまり長く続けるとエラーが出るので20区切りで作成。



最後にそれをまとめている部分の行をコピペすると
コピペだけで 配列要素が作成できる。

表を作成するときのjavascriptの変更部分。

ボタンを作成 → onclickでfunction呼び出し そのfanctionの変更部分


function jyunjyo2()
{
zenhyouji()
/////////////////////////////////  近接コンボ ///////////////////////////////////////
var number = new Array();
var number = [
0,102,108,123,128,145,212,220,299,247,260,238,284,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
];
jhyouji(number)
fwaza1(number)
fwaza2(number)
fwaza3(number)
kouka1(number)
irotuke(number)
// houji(この中最後の数<緑の最終行で確認+1)
hyouji(13)
motihave(number)
}

解説
赤の部分の要素 0 + 341 個  
1~341 この部分に数字を入れるとモンスターの図鑑ができる。
数字の番号の意味 図鑑順のモンスター

// houji(この中最後の数<緑の最終行で確認+1)
hyouji(13)

この数字以降の表を隠す。

////////////////////////////////////////////

赤色の部分を変更して呼び出すと新たな要素の図鑑が出来る。

・ヘッダー部分を固定
・分類別に項目をまとめる
・開発ツールでスマートホン状態を確認すると
 全然まとまりがなかった為、幅600にまとめる。
 図鑑の大きさも文字も小さくする。

・・・ ただし 広告の為多分大きさの制御ができない(;'∀')




1  2  3  4 

忍者ブログ [PR]