source: pycodeshooter/trunk/index.html @ 109

Revision 109, 9.4 KB checked in by atzm, 13 years ago (diff)

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