source: pycodeshooter/trunk/index.html @ 112

Revision 112, 9.6 KB checked in by atzm, 13 years ago (diff)

scoring support
  • 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        // load enemies
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");
25        var ctx             = screen.getContext("2d");
26        var enemyList       = JSON.parse(req.responseText).result;
[81]27
[110]28        setMessage(msg, "<br />");
[81]29
[110]30        // title screen set
31        var logoimg  = document.getElementById("logoimg");
[108]32        var x        = (screen.width - logoimg.width) / 2;
33        var y        = -1 - logoimg.height;
34        var titlePos = screen.height / 2 - logoimg.height / 2;
35
[81]36        titleIntervalId = setInterval(function() {
37            drawScreen(ctx, "source-over", "rgba(8,8,8,0.5)", screen.width, screen.height);
38            updateBackground(ctx, screen.width, screen.height, 1, "#AAF", 10);
39            ctx.drawImage(logoimg, x, y);
40
41            if (++y > titlePos)
42                y = titlePos;
[110]43
44            drawString(
45                ctx, "source-over",
46                "Click screen to start game",
47                15, 20, "#ACF", "9pt monospace", "left"
48            );
[81]49        }, 20);
50
[110]51        // start game
52        screen.onclick = function() {
53            if (!titleIntervalId) {
54                return;
55            }
[81]56
[110]57            clearInterval(titleIntervalId);
58            titleIntervalId = 0;
59
60            var player = {
61                "name":         document.getElementById("name").value,
62                "image":        document.getElementById("p_img0"),
63                "size":         parseInt(document.getElementById("size").value),
64                "hitsize":      parseInt(document.getElementById("hitsize").value),
65                "speed":        parseInt(document.getElementById("speed").value),
66                "hitpoint":     parseInt(document.getElementById("hitpoint").value),
67                "shotsize":     parseInt(document.getElementById("shotsize").value),
68                "shotinterval": parseInt(document.getElementById("shotinterval").value),
69                "shotspeed":    parseInt(document.getElementById("shotspeed").value),
70                "shotlevel":    parseInt(document.getElementById("shotlevel").value),
71                "numbombs":     parseInt(document.getElementById("numbombs").value)
72            };
73
74            for (var n in player) {
75                if (n == "name")
76                    continue;
77                if (!player[n] || player[n] < 0) {
78                    setMessage(msg, "Invalid Input Data");
79                    return;
80                }
81            }
82
83            var imgs = document.getElementsByTagName("img");
84            for (var i = 0; i < imgs.length; i++) {
85                if (imgs[i].getAttribute("id").match(/^e_img/)) {
86                    addEnemyImage(imgs[i]);
87                }
88            }
89
90            document.onkeydown  = function (ev) { setKeyDown(ev.keyCode); };
91            document.onkeyup    = function (ev) { setKeyUp(ev.keyCode); };
92            document.onkeypress = function (ev) { setKeyPress(ev.charCode); };
93
94            initGame(document.getElementById("screen"), msg, player);
95
96            var enemyIntervalId = setInterval(function() {
97                if (numEnemies() < parseInt(document.getElementById("numenemies").value)) {
98                    var ids = Object.keys(enemyList);
99                    var id  = ids[Math.floor(Math.random() * ids.length)];
100                    addEnemy(enemyList[id]);
101                }
[111]102            }, 1000);
[110]103        };
[81]104    };
105    </script>
106  </head>
107
108  <body>
109    <h1 class="title">PyCodeShooter β</h1>
110
111    <div class="main">
112      <div style="margin-left: 5em; margin-right: 5em; font-style: italic;">
113        <p>Pythonista 達の挑戊に</p>
114        <p style="text-align: right;">君は耐えられるか...</p>
115      </div>
116
117      <div class="day">
118        <h2><span class="title">PyCodeShooter β</span></h2>
119        <div class="body">
120          <div class="section">
121            <form>
122              <h3><span class="sanchor">■</span> æŒ‘戊する!</h3>
123              <p>
124                名前: <input type="text" value="Player" size="8" id="name" />
[108]125                耐久性: <input type="text" value="5" size="3" id="hitpoint" />
[92]126                ボム数: <input type="text" value="2" size="3" id="numbombs" />
[81]127                <br />
128                <canvas id="screen" width="320" height="480"></canvas>
[109]129                <input type="hidden" value="20" id="size" />
[97]130                <input type="hidden" value="1"  id="hitsize" />
[81]131                <input type="hidden" value="5"  id="speed" />
132                <input type="hidden" value="7"  id="shotsize" />
133                <input type="hidden" value="5"  id="shotspeed" />
[106]134                <input type="hidden" value="5"  id="shotinterval" />
[81]135                <input type="hidden" value="3"  id="shotlevel" />
[110]136                <input type="hidden" value="3"  id="numenemies" />
[81]137                <input type="hidden" value="/etc/pycodebattler/?mode=json" id="api" />
[109]138                <img src="images/logo.png" style="visibility: hidden;" id="logoimg" />
139
140                <img src="images/ma1s.gif"  style="visibility: hidden;" id="p_img0"  />
141                <img src="images/ma2s.gif"  style="visibility: hidden;" id="p_img1"  />
142                <img src="images/ma5s.gif"  style="visibility: hidden;" id="e_img0"  />
143                <img src="images/ma6s.gif"  style="visibility: hidden;" id="e_img1"  />
144                <img src="images/ma7s.gif"  style="visibility: hidden;" id="e_img2"  />
145                <img src="images/man1s.gif" style="visibility: hidden;" id="e_img3"  />
146                <img src="images/man2s.gif" style="visibility: hidden;" id="e_img4"  />
147                <img src="images/man3s.gif" style="visibility: hidden;" id="e_img5"  />
148                <img src="images/man4s.gif" style="visibility: hidden;" id="e_img6"  />
149                <img src="images/man5s.gif" style="visibility: hidden;" id="e_img7"  />
150                <img src="images/man6s.gif" style="visibility: hidden;" id="e_img8"  />
151                <img src="images/man7s.gif" style="visibility: hidden;" id="e_img9"  />
152                <img src="images/man8s.gif" style="visibility: hidden;" id="e_img10" />
153                <img src="images/man9s.gif" style="visibility: hidden;" id="e_img11" />
154                <img src="images/pin9s.gif" style="visibility: hidden;" id="e_img12" />
155                <img src="images/so1s.gif"  style="visibility: hidden;" id="e_img13" />
156                <img src="images/so2s.gif"  style="visibility: hidden;" id="e_img14" />
157                <img src="images/so3s.gif"  style="visibility: hidden;" id="e_img15" />
158                <img src="images/so4s.gif"  style="visibility: hidden;" id="e_img16" />
159                <img src="images/so8s.gif"  style="visibility: hidden;" id="e_img17" />
160                <img src="images/so9s.gif"  style="visibility: hidden;" id="e_img18" />
[81]161              </p>
162            </form>
163          </div>
164        </div>
165      </div>
166    </div>
167
168    <div class="sidebar">
169      <div style="margin: 1em;">
170        <p>これは䜕?</p>
171        <ul style="font-size: small;">
172          <li><a href="/etc/pycodebattler/">PyCodeBattler</a> ã«ç™»éŒ²ã•ã‚ŒãŸ Python コヌドず戊いたす</li>
173        </ul>
174
175        <p>操䜜</p>
176        <dl style="font-size: small;">
177          <dt>■ ショット:</dt>
178          <dd>z</dd>
[92]179          <dt>■ ボム:</dt>
180          <dd>a</dd>
[81]181          <dt>■ 移動速床遅延:</dt>
182          <dd>x</dd>
183          <dt>■ 匟切替:</dt>
184          <dd>c</dd>
185          <dt>■ 巊移動:</dt>
186          <dd>← or h</dd>
187          <dt>■ 䞋移動:</dt>
188          <dd>↓ or j</dd>
189          <dt>■ 䞊移動:</dt>
190          <dd>↑ or k</dd>
191          <dt>■ 右移動:</dt>
192          <dd>→ or l</dd>
193        </dl>
194
195        <p>システムメッセヌゞ</p>
[110]196        <span id="message" style="font-size: small;">Now loading...</span>
[81]197
198        <p>泚意</p>
199        <ul style="font-size: small;">
200          <li>パラメヌタ等調敎䞭に぀きキャラの匷さや匟幕等が倉わったりする可胜性がありたす</li>
201          <li>Chrome 掚奚ですFirefox だず重くIE だず倚分動きたせん</li>
202        </ul>
203
204        <p>TODO</p>
205        <ul style="font-size: small;">
206          <li>動䜜パタヌンを増やす</li>
207          <li>匟幕パタヌンを増やす</li>
208          <li>パワヌアップアむテム</li>
[112]209          <li>動䜜を凝る</li>
210          <li>音を鳎らす</li>
[81]211        </ul>
212
213        <p>゜ヌスコヌド</p>
214        <ul style="font-size: small;">
215          <li><a href="http://trac.atzm.org/index.cgi/browser/pycodeshooter">pycodeshooter</a></li>
216        </ul>
[109]217
218        <p>利甚玠材等</p>
219        <ul style="font-size: small;">
220          <li><a href="http://www.civillink.net/">フリヌ玠材の来倢来人</a></li>
221        </ul>
[81]222      </div>
223    </div>
224  </body>
225</html>
Note: See TracBrowser for help on using the repository browser.