source: pycodeshooter/trunk/index.html @ 132

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