source: pycodeshooter/trunk/index.html @ 130

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