Changeset 119 for pycodeshooter/trunk/index.html

Timestamp:

01/22/12 03:41:27 (13 years ago)

Author:

atzm

Message:

bgm/se support

File:

• pycodeshooter/trunk/index.html (modified) (8 diffs)

pycodeshooter/trunk/index.html

@@ -14 +14 @@
     <script type="text/javascript">
     window.onload = function () {
-        // load enemies
         var req = new XMLHttpRequest();
         req.open("GET", document.getElementById("api").value, false);
@@ -23 +22 @@
         var msg             = document.getElementById("message");
         var screen          = document.getElementById("screen");
+        var soundCheck      = document.getElementById("sound");
         var ctx             = screen.getContext("2d");
         var enemyList       = JSON.parse(req.responseText).result;
 
+        registerSound("bgm_title", document.getElementById("bgm_title"));
+        registerSound("bgm_stage1", document.getElementById("bgm_stage1"));
+        registerSound("se_start", document.getElementById("se_start"));
+        registerSound("se_encounter", document.getElementById("se_encounter"));
+        registerSound("se_damage_enemy", document.getElementById("se_damage_enemy"));
+        registerSound("se_damage_player", document.getElementById("se_damage_player"));
+        registerSound("se_bomb", document.getElementById("se_bomb"));
+        registerSound("se_destroy", document.getElementById("se_destroy"));
         setMessage(msg, "<br />");
 
+        // sound on/off
+        soundCheck.onclick = function() {
+            toggleSound(soundCheck.checked);
+        };
+        soundCheck.click();
+
         // title screen set
+        var titlebgm = document.getElementById("bgm_title");
         var logoimg  = document.getElementById("logoimg");
         var x        = (screen.width - logoimg.width) / 2;
@@ -49 +64 @@
         }, 20);
 
+        playSound("bgm_title");
+
         // start game
         screen.onclick = function() {
@@ -55 +72 @@
             }
 
-            clearInterval(titleIntervalId);
-            titleIntervalId = 0;
-
-            var player = {
-                "name":         document.getElementById("name").value,
-                "image":        document.getElementById("p_img0"),
-                "size":         parseInt(document.getElementById("size").value),
-                "hitsize":      parseInt(document.getElementById("hitsize").value),
-                "speed":        parseInt(document.getElementById("speed").value),
-                "hitpoint":     parseInt(document.getElementById("hitpoint").value),
-                "shotsize":     parseInt(document.getElementById("shotsize").value),
-                "shotinterval": parseInt(document.getElementById("shotinterval").value),
-                "shotspeed":    parseInt(document.getElementById("shotspeed").value),
-                "shotlevel":    parseInt(document.getElementById("shotlevel").value),
-                "numbombs":     parseInt(document.getElementById("numbombs").value)
-            };
-
-            for (var n in player) {
-                if (n == "name")
-                    continue;
-                if (!player[n] || player[n] < 0) {
-                    setMessage(msg, "Invalid Input Data");
-                    return;
+            titlebgm.pause();
+            playSound("se_start");
+
+            setTimeout(function() {
+                clearInterval(titleIntervalId);
+                titleIntervalId = 0;
+
+                var player = {
+                    "name":         document.getElementById("name").value,
+                    "image":        document.getElementById("p_img0"),
+                    "size":         parseInt(document.getElementById("size").value),
+                    "hitsize":      parseInt(document.getElementById("hitsize").value),
+                    "speed":        parseInt(document.getElementById("speed").value),
+                    "hitpoint":     parseInt(document.getElementById("hitpoint").value),
+                    "shotsize":     parseInt(document.getElementById("shotsize").value),
+                    "shotinterval": parseInt(document.getElementById("shotinterval").value),
+                    "shotspeed":    parseInt(document.getElementById("shotspeed").value),
+                    "shotlevel":    parseInt(document.getElementById("shotlevel").value),
+                    "numbombs":     parseInt(document.getElementById("numbombs").value)
+                };
+
+                for (var n in player) {
+                    if (n == "name")
+                        continue;
+                    if (!player[n] || player[n] < 0) {
+                        setMessage(msg, "Invalid Input Data");
+                        return;
+                    }
                 }
-            }
-
-            var imgs = document.getElementsByTagName("img");
-            for (var i = 0; i < imgs.length; i++) {
-                if (imgs[i].getAttribute("id").match(/^e_img/)) {
-                    addEnemyImage(imgs[i]);
+
+                var imgs = document.getElementsByTagName("img");
+                for (var i = 0; i < imgs.length; i++) {
+                    if (imgs[i].getAttribute("id").match(/^e_img/)) {
+                        addEnemyImage(imgs[i]);
+                    }
                 }
-            }
-
-            document.onkeydown  = function (ev) { setKeyDown(ev.keyCode); };
-            document.onkeyup    = function (ev) { setKeyUp(ev.keyCode); };
-            document.onkeypress = function (ev) { setKeyPress(ev.charCode); };
-
-            initGame(document.getElementById("screen"), msg, player);
-
-            var enemyIntervalId = setInterval(function() {
-                if (numEnemies() < parseInt(document.getElementById("numenemies").value)) {
-                    var ids = Object.keys(enemyList);
-                    var id  = ids[Math.floor(Math.random() * ids.length)];
-                    addEnemy(enemyList[id]);
-                }
-            }, 1500);
+
+                document.onkeydown  = function (ev) { setKeyDown(ev.keyCode); };
+                document.onkeyup    = function (ev) { setKeyUp(ev.keyCode); };
+                document.onkeypress = function (ev) { setKeyPress(ev.charCode); };
+
+                playSound("bgm_stage1");
+                initGame(document.getElementById("screen"), msg, player);
+
+                var enemyIntervalId = setInterval(function() {
+                    if (numEnemies() < parseInt(document.getElementById("numenemies").value)) {
+                        var ids = Object.keys(enemyList);
+                        var id  = ids[Math.floor(Math.random() * ids.length)];
+                        playSound("se_encounter");
+                        addEnemy(enemyList[id]);
+                    }
+                }, 1500);
+            }, 1400);
         };
     };
@@ -126 +150 @@
 性: <input type="text" value="5" size="3" id="hitpoint" />
                 ボム数: <input type="text" value="2" size="3" id="numbombs" />
+                音楜: <input type="checkbox" checked="checked" id="sound" />
                 <br />
                 <canvas id="screen" width="320" height="480"></canvas>
@@ -138 +163 @@
                 <input type="hidden" value="/etc/pycodebattler/?mode=json" id="api" />
                 <img src="images/logo.png" style="visibility: hidden;" id="logoimg" />
+
+                <audio src="sounds/bgm_sht_a01.mp3", id="bgm_title" loop="true" preload="auto" />
+                <audio src="sounds/bgm_sht_a02.mp3", id="bgm_stage1" loop="true" preload="auto" />
+                <audio src="sounds/se_coinin_1.mp3", id="se_start" preload="auto" />
+                <audio src="sounds/se_denshion_1.mp3", id="se_encounter" preload="auto" />
+                <audio src="sounds/se_pyuun.mp3", id="se_damage_player" preload="auto" />
+                <audio src="sounds/se_click_2.mp3", id="se_damage_enemy" preload="auto" />
+                <audio src="sounds/se_zusyunzusyun.mp3", id="se_bomb" preload="auto" />
+                <audio src="sounds/se_zugan.mp3", id="se_destroy" preload="auto" />
 
                 <img src="images/ma1s.gif"  style="visibility: hidden;" id="p_img0"  />
@@ -210 +244 @@
           <li>パワヌアップアむテム</li>
           <li>動䜜を凝る</li>
-          <li>音を鳎らす</li>
         </ul>
 
@@ -221 +254 @@
         <ul style="font-size: small;">
           <li><a href="http://www.civillink.net/">ãƒ•ãƒªãƒŒçŽ æã®æ¥å€¢æ¥äºº</a></li>
+          <li><a href="http://www.skipmore.com/sound/">ナりラボ8bitサりンド工房</a></li>
         </ul>
       </div>