▲BACK
さぁ設置してみよう
とりあえずの実行環境は、InternetExplorer 6 と、Firefox 2.0 です。

　このゲームは、ごほうびイラストを見せる仕組みを作りたかったので、
タイムアタックやスコアランキングといった機能は備えていません。


《 まぁとりあえず ダウンロード 》

自動解凍版 ： abomb.exe ( 145KB 2007/5/1 )
ZIP版 ： abomb.zip ( 107KB 2007/5/1 )


　ダウンロードできたら適当なフォルダを作って、その中に解凍します。

bombs.html 　（ベースになるHTMLドキュメント）
bomb.js 　（ゲームを動かすスクリプト）
images/ 　（画像フォルダ）

　さっそくメモ帳などのテキストエディタで bombs.html を開いてみてください。
できれば行番号が表示できるエディタをオススメします。
下は ソースファイルの 先頭 〜 BODY タグまでの部分です。
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 | <HTML LANG="ja">
 3 | <HEAD><TITLE>????</TITLE>
 4 | <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
 5 | <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
 6 | <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
 7 | <META HTTP-EQUIV="Imagetoolbar" CONTENT="no">
 8 | <STYLE TYPE="text/css">
 9 | BODY {
10 |    background-color:#ffffff;
11 |    background-image:url(images/spacer.gif);
12 | }
13 |
14 | /* メイン下敷き */
15 | #MAINFRAME {
16 |    background-color:#404040;
17 |    color:#80f0ff;
18 | }
19 |
20 | /* タイマー部 */
21 | #TIMERBG {
22 |    background-color:#505050;
23 |    color:#80b0c0;
24 | }
25 | .NUMNUM {
26 |    font-size:36px;
27 |    font-weight:bold;
28 |    color:#ffffff;
29 |    text-align:right;
30 | }
31 | </STYLE>
32 | <SCRIPT TYPE="text/javascript" src="bomb.js"></SCRIPT>
33 | <SCRIPT TYPE="text/javascript"><!--
34 | document.onkeydown = getkey;
35 | document.onkeyup = setkey;
36 | //--></SCRIPT>
 37 | </HEAD>
38 | <BODY>

　このソースから必要な部分を抜き出してページに組み込むのは、動作が保障できないので、
今回の解説では、基本的にファイルをそのまま使うことにします。できるだけカスタマイズできるようにしてみたので、
デザインをある程度合わせることができると思います。
 1 行目 必須。消さないでください。
 3 行目 ???? はページのタイトル名です。書換えＯＫ
10 行目 #ffffff はページの背景色です。書換えＯＫ
11 行目 images/spacer.gif はページの壁紙です。書換えＯＫですが、ファイルのパスに気をつけてください。
　　（壁紙が無い場合はそのままにしておきます）

16 行目 #404040 はゲーム部分の背景色です。書換えＯＫ
17 行目 #80f0ff はゲーム部分の文字色です。書換えＯＫ
22 行目 #505050 はゲーム部分、タイマー部分の背景色です。書換えＯＫ
23 行目 #80b0c0 はゲーム部分、タイマー部分の文字色です。書換えＯＫ
28 行目 #ffffff はゲーム部分、タイマー部分の大きい方の文字色です。書換えＯＫ

　次に、BODYタグ内の部分です。 ・・・が、40 行目 から、70 行目 までは、一応改造禁止です。
38 | <BODY>
39 |
40 | <!------- ここから ------->
・
・
・
61 | <SPAN STYLE="color:#607080">
・
・
・
70 | <!------- ここまで ------->
 71 |
72 | <BR>
73 |
74 | </BODY>
75 | </HTML>

　40 行目から 70 行目の範囲以外 であれば、自由にコンテンツを追加してＯＫです。
唯一書換えＯＫな部分として、
61 行目 #607080 はタイマーが動き出すまでの色です。書換えＯＫ
　　（ 22 行目の背景色に合わせるといいでしょう ）

　見た目のカスタマイズに関するところは以上です。
次はゲームの難易度の設定です。再びテキストエディタで 今度は bomb.js を開いてみてください。
 1 | var maxbomb = 10;　　　//＊セット数
 2 | var timelimit = 300; 　//制限時間
・
・
・

 1 行目 10 は＊の数です。大きい数字にするほど難しくなります。書換えＯＫ
 2 行目 300 は制限時間（単位：秒）です。大きい数字にするほどじっくり考えることができます。書換えＯＫ
　３行目以下はゲームを動かしている部分なのでここも一応改造禁止です。
以上で説明は終わりです。あとはサーバーに転送して、リンクすれば設置完了。


　以下は images フォルダの中身です。
お好みで サイズ と 画像フォーマット（GIFまたはJPEG）に注意して差し替えてみてください。

ファイル名ファイルタイプ内 容サイズ
0.jpg JPEG 数字パネル：０ 56 x 56
1.jpg JPEG 数字パネル：１ 56 x 56
2.jpg JPEG 数字パネル：２ 56 x 56
3.jpg JPEG 数字パネル：３ 56 x 56
4.jpg JPEG 数字パネル：４ 56 x 56
5.jpg JPEG 数字パネル：５ 56 x 56
6.jpg JPEG 数字パネル：６ 56 x 56
7.jpg JPEG 数字パネル：７ 56 x 56
8.jpg JPEG 数字パネル：８ 56 x 56
9.jpg JPEG ＊ 56 x 56
10.jpg JPEG 未開封パネル：＊ 56 x 56
what.jpg JPEG 未開封パネル：？ 56 x 56
complete.jpgJPEG クリアイラスト 560 x 560
timeup.gif GIF タイムアップ用 560 x 560
gameover.gifGIF ゲームオーバー 560 x 560
spacer.gif GIF ※削除および変更不可1 x 1
※サイズを変えてしまうとレイアウトが崩れてしまう場合があります。
※画像フォーマットを変えるときは、あちこち書き換える必要があります。


　もっとこうしたい、こうだったらいいのに、とか要望や質問があれば、〈Formメール〉から受け付けています。


▲PAGE TOP | ▲HOME
・ ・ ・ ・ ・

COPYRIGHT FUKUSuKe-8-GOU