source: pycodeshooter/trunk/index.html @ 122

Revision 122, 12.2 KB checked in by atzm, 13 years ago (diff)

add stage bgm rotation
  • Property svn:keywords set to Id
RevLine 
[81]1<!-- $Id$ -->
2
3<!DOCTYPE html>
4<html lang="ja">
5  <head>
6    <meta charset="UTF-8"></meta>
7    <title>PyCodeShooter β</title>
8    <link rel="stylesheet" href="/tdiary.css" type="text/css" media="all" />
9    <script type="text/javascript" charset="UTF-8" src="shooter/bullet.js"></script>
10    <script type="text/javascript" charset="UTF-8" src="shooter/barrage.js"></script>
11    <script type="text/javascript" charset="UTF-8" src="shooter/action.js"></script>
12    <script type="text/javascript" charset="UTF-8" src="shooter/trooper.js"></script>
13    <script type="text/javascript" charset="UTF-8" src="shooter/system.js"></script>
14    <script type="text/javascript">
[110]15    window.onload = function () {
[122]16        // load enemies
[110]17        var req = new XMLHttpRequest();
18        req.open("GET", document.getElementById("api").value, false);
19        req.send(null);
[81]20
[110]21        // global variables
22        var titleIntervalId = 0;
23        var msg             = document.getElementById("message");
24        var screen          = document.getElementById("screen");
[119]25        var soundCheck      = document.getElementById("sound");
[110]26        var ctx             = screen.getContext("2d");
27        var enemyList       = JSON.parse(req.responseText).result;
[81]28
[122]29        // system message clear
30        setMessage(msg, "<br />");
31
32        // register sounds to system
[119]33        registerSound("bgm_title", document.getElementById("bgm_title"));
34        registerSound("bgm_stage1", document.getElementById("bgm_stage1"));
[122]35        registerSound("bgm_stage2", document.getElementById("bgm_stage2"));
36        registerSound("bgm_stage3", document.getElementById("bgm_stage3"));
37        registerSound("bgm_stage4", document.getElementById("bgm_stage4"));
38        registerSound("bgm_stage5", document.getElementById("bgm_stage5"));
[119]39        registerSound("se_start", document.getElementById("se_start"));
40        registerSound("se_encounter", document.getElementById("se_encounter"));
41        registerSound("se_damage_enemy", document.getElementById("se_damage_enemy"));
42        registerSound("se_damage_player", document.getElementById("se_damage_player"));
43        registerSound("se_bomb", document.getElementById("se_bomb"));
44        registerSound("se_destroy", document.getElementById("se_destroy"));
[81]45
[122]46        // sound on/off (default off)
[119]47        soundCheck.onclick = function() {
48            toggleSound(soundCheck.checked);
49        };
50        soundCheck.click();
[122]51        playSound("bgm_title");
[119]52
[110]53        // title screen set
54        var logoimg  = document.getElementById("logoimg");
[108]55        var x        = (screen.width - logoimg.width) / 2;
56        var y        = -1 - logoimg.height;
57        var titlePos = screen.height / 2 - logoimg.height / 2;
58
[81]59        titleIntervalId = setInterval(function() {
60            drawScreen(ctx, "source-over", "rgba(8,8,8,0.5)", screen.width, screen.height);
61            updateBackground(ctx, screen.width, screen.height, 1, "#AAF", 10);
62            ctx.drawImage(logoimg, x, y);
63
64            if (++y > titlePos)
65                y = titlePos;
[110]66
67            drawString(
68                ctx, "source-over",
69                "Click screen to start game",
70                15, 20, "#ACF", "9pt monospace", "left"
71            );
[81]72        }, 20);
73
[110]74        // start game
75        screen.onclick = function() {
76            if (!titleIntervalId) {
77                return;
78            }
[81]79
[122]80            clearInterval(titleIntervalId);
81            titleIntervalId = 0;
82
83            pauseSound("bgm_title", true)
[119]84            playSound("se_start");
[110]85
[119]86            setTimeout(function() {
87                var player = {
88                    "name":         document.getElementById("name").value,
89                    "image":        document.getElementById("p_img0"),
90                    "size":         parseInt(document.getElementById("size").value),
91                    "hitsize":      parseInt(document.getElementById("hitsize").value),
92                    "speed":        parseInt(document.getElementById("speed").value),
93                    "hitpoint":     parseInt(document.getElementById("hitpoint").value),
94                    "shotsize":     parseInt(document.getElementById("shotsize").value),
95                    "shotinterval": parseInt(document.getElementById("shotinterval").value),
96                    "shotspeed":    parseInt(document.getElementById("shotspeed").value),
97                    "shotlevel":    parseInt(document.getElementById("shotlevel").value),
98                    "numbombs":     parseInt(document.getElementById("numbombs").value)
99                };
100
101                for (var n in player) {
102                    if (n == "name")
103                        continue;
104                    if (!player[n] || player[n] < 0) {
105                        setMessage(msg, "Invalid Input Data");
106                        return;
107                    }
[110]108                }
109
[119]110                var imgs = document.getElementsByTagName("img");
111                for (var i = 0; i < imgs.length; i++) {
112                    if (imgs[i].getAttribute("id").match(/^e_img/)) {
113                        addEnemyImage(imgs[i]);
114                    }
[110]115                }
116
[119]117                initGame(document.getElementById("screen"), msg, player);
[110]118
[122]119                // auto enemy encounter
[119]120                var enemyIntervalId = setInterval(function() {
121                    if (numEnemies() < parseInt(document.getElementById("numenemies").value)) {
122                        var ids = Object.keys(enemyList);
123                        var id  = ids[Math.floor(Math.random() * ids.length)];
124                        playSound("se_encounter");
125                        addEnemy(enemyList[id]);
126                    }
127                }, 1500);
[122]128            }, 1500);
[110]129        };
[81]130    };
131    </script>
132  </head>
133
134  <body>
135    <h1 class="title">PyCodeShooter β</h1>
136
137    <div class="main">
138      <div style="margin-left: 5em; margin-right: 5em; font-style: italic;">
139        <p>Pythonista 達の挑戊に</p>
140        <p style="text-align: right;">君は耐えられるか...</p>
141      </div>
142
143      <div class="day">
144        <h2><span class="title">PyCodeShooter β</span></h2>
145        <div class="body">
146          <div class="section">
147            <form>
148              <h3><span class="sanchor">■</span> æŒ‘戊する!</h3>
149              <p>
150                名前: <input type="text" value="Player" size="8" id="name" />
[108]151                耐久性: <input type="text" value="5" size="3" id="hitpoint" />
[92]152                ボム数: <input type="text" value="2" size="3" id="numbombs" />
[119]153                音楜: <input type="checkbox" checked="checked" id="sound" />
[81]154                <br />
155                <canvas id="screen" width="320" height="480"></canvas>
[109]156                <input type="hidden" value="20" id="size" />
[97]157                <input type="hidden" value="1"  id="hitsize" />
[81]158                <input type="hidden" value="5"  id="speed" />
159                <input type="hidden" value="7"  id="shotsize" />
160                <input type="hidden" value="5"  id="shotspeed" />
[106]161                <input type="hidden" value="5"  id="shotinterval" />
[81]162                <input type="hidden" value="3"  id="shotlevel" />
[110]163                <input type="hidden" value="3"  id="numenemies" />
[81]164                <input type="hidden" value="/etc/pycodebattler/?mode=json" id="api" />
[109]165                <img src="images/logo.png" style="visibility: hidden;" id="logoimg" />
166
[119]167                <audio src="sounds/bgm_sht_a01.mp3", id="bgm_title" loop="true" preload="auto" />
168                <audio src="sounds/bgm_sht_a02.mp3", id="bgm_stage1" loop="true" preload="auto" />
[122]169                <audio src="sounds/bgm_sht_a03.mp3", id="bgm_stage2" loop="true" preload="auto" />
170                <audio src="sounds/bgm_sht_a04.mp3", id="bgm_stage3" loop="true" preload="auto" />
171                <audio src="sounds/bgm_sht_a05.mp3", id="bgm_stage4" loop="true" preload="auto" />
172                <audio src="sounds/bgm_sht_a06.mp3", id="bgm_stage5" loop="true" preload="auto" />
[119]173                <audio src="sounds/se_coinin_1.mp3", id="se_start" preload="auto" />
174                <audio src="sounds/se_denshion_1.mp3", id="se_encounter" preload="auto" />
175                <audio src="sounds/se_pyuun.mp3", id="se_damage_player" preload="auto" />
176                <audio src="sounds/se_click_2.mp3", id="se_damage_enemy" preload="auto" />
177                <audio src="sounds/se_zusyunzusyun.mp3", id="se_bomb" preload="auto" />
178                <audio src="sounds/se_zugan.mp3", id="se_destroy" preload="auto" />
179
[109]180                <img src="images/ma1s.gif"  style="visibility: hidden;" id="p_img0"  />
181                <img src="images/ma2s.gif"  style="visibility: hidden;" id="p_img1"  />
182                <img src="images/ma5s.gif"  style="visibility: hidden;" id="e_img0"  />
183                <img src="images/ma6s.gif"  style="visibility: hidden;" id="e_img1"  />
184                <img src="images/ma7s.gif"  style="visibility: hidden;" id="e_img2"  />
185                <img src="images/man1s.gif" style="visibility: hidden;" id="e_img3"  />
186                <img src="images/man2s.gif" style="visibility: hidden;" id="e_img4"  />
187                <img src="images/man3s.gif" style="visibility: hidden;" id="e_img5"  />
188                <img src="images/man4s.gif" style="visibility: hidden;" id="e_img6"  />
189                <img src="images/man5s.gif" style="visibility: hidden;" id="e_img7"  />
190                <img src="images/man6s.gif" style="visibility: hidden;" id="e_img8"  />
191                <img src="images/man7s.gif" style="visibility: hidden;" id="e_img9"  />
192                <img src="images/man8s.gif" style="visibility: hidden;" id="e_img10" />
193                <img src="images/man9s.gif" style="visibility: hidden;" id="e_img11" />
194                <img src="images/pin9s.gif" style="visibility: hidden;" id="e_img12" />
195                <img src="images/so1s.gif"  style="visibility: hidden;" id="e_img13" />
196                <img src="images/so2s.gif"  style="visibility: hidden;" id="e_img14" />
197                <img src="images/so3s.gif"  style="visibility: hidden;" id="e_img15" />
198                <img src="images/so4s.gif"  style="visibility: hidden;" id="e_img16" />
199                <img src="images/so8s.gif"  style="visibility: hidden;" id="e_img17" />
200                <img src="images/so9s.gif"  style="visibility: hidden;" id="e_img18" />
[81]201              </p>
202            </form>
203          </div>
204        </div>
205      </div>
206    </div>
207
208    <div class="sidebar">
209      <div style="margin: 1em;">
210        <p>これは䜕?</p>
211        <ul style="font-size: small;">
212          <li><a href="/etc/pycodebattler/">PyCodeBattler</a> ã«ç™»éŒ²ã•ã‚ŒãŸ Python コヌドず戊いたす</li>
213        </ul>
214
215        <p>操䜜</p>
216        <dl style="font-size: small;">
217          <dt>■ ショット:</dt>
218          <dd>z</dd>
[92]219          <dt>■ ボム:</dt>
220          <dd>a</dd>
[81]221          <dt>■ 移動速床遅延:</dt>
222          <dd>x</dd>
223          <dt>■ 匟切替:</dt>
224          <dd>c</dd>
225          <dt>■ 巊移動:</dt>
226          <dd>← or h</dd>
227          <dt>■ 䞋移動:</dt>
228          <dd>↓ or j</dd>
229          <dt>■ 䞊移動:</dt>
230          <dd>↑ or k</dd>
231          <dt>■ 右移動:</dt>
232          <dd>→ or l</dd>
233        </dl>
234
235        <p>システムメッセヌゞ</p>
[110]236        <span id="message" style="font-size: small;">Now loading...</span>
[81]237
238        <p>泚意</p>
239        <ul style="font-size: small;">
240          <li>パラメヌタ等調敎䞭に぀きキャラの匷さや匟幕等が倉わったりする可胜性がありたす</li>
241          <li>Chrome 掚奚ですFirefox だず重くIE だず倚分動きたせん</li>
242        </ul>
243
244        <p>TODO</p>
245        <ul style="font-size: small;">
246          <li>動䜜パタヌンを増やす</li>
247          <li>匟幕パタヌンを増やす</li>
248          <li>パワヌアップアむテム</li>
[112]249          <li>動䜜を凝る</li>
[81]250        </ul>
251
252        <p>゜ヌスコヌド</p>
253        <ul style="font-size: small;">
254          <li><a href="http://trac.atzm.org/index.cgi/browser/pycodeshooter">pycodeshooter</a></li>
255        </ul>
[109]256
257        <p>利甚玠材等</p>
258        <ul style="font-size: small;">
259          <li><a href="http://www.civillink.net/">フリヌ玠材の来倢来人</a></li>
[119]260          <li><a href="http://www.skipmore.com/sound/">ナりラボ8bitサりンド工房</a></li>
[109]261        </ul>
[81]262      </div>
263    </div>
264  </body>
265</html>
Note: See TracBrowser for help on using the repository browser.