Q&A
自作のタイピングゲームに特定のキーを押したらアイテムが発動するシステムを作っていますが、ソースコードの上側に置いたアイテムが動作しません。順番を入れ替えたりしてもダメでした。
html
1<!DOCTYPE html> 2 3<head> 4<meta charset="utf-8"> 5<pre class="lang:js decode:true"> 6<script type="text/javascript" src="textfile.js"></script> 7<link rel="stylesheet" href="style.css"> 8</head> 9 10 11<div id="mondai"> 12<h1><p id="subject"></p></h1> 13</div> 14<contents> 15 <form name="typing" onsubmit="return false;"> 16 17 <input name="input" style="width:30%;padding:10px;font-size:16px;" autocomplete="off" type="text"><input name="btn" type="submit" style="width:3%;padding:10px;font-size:16px;" value="解答" > 18 <input name="item1" type="button" style="width:10%;padding:10px;font-size:16px;" value="インシュランス" ><input name="item2" type="button" style="width:10%;padding:10px;font-size:16px;" value="ファイブアップ" > 19 <input name="start" type="button" style="width:10%;padding:10px;font-size:16px;" value="ゲームスタート"><input type="button" name="button" value="アリーヴェデルチ" style="width:10%;padding:10px;font-size:16px;" 20 onclick=closewindow()> 21 22 23<h3><p id="timer"></p></h3> 24<h3><p id="point">0</p></h3> 25<h3><p id="message"></p></h3> 26</contents> 27 28 29 30<script> 31//ここからJavaScript 32 33 34const subject = document.getElementById('subject'); 35const timer = document.getElementById('timer'); 36const point = document.getElementById("point"); 37const stock = document.getElementById("life"); 38const message = document.getElementById("message"); 39const start = document.getElementById("start"); 40const form = document.forms.typing; 41 42 43 44let rank; 45let TIME = 10; 46let count = 0; 47let state = false; 48let wrong = 0; 49let life = 1; 50let ins = 1; 51let fiveup = 1; 52let mondai; 53let gamestart = 0; 54let countdown; 55 56 57var useitem = new Audio("https://insertofficial.web.fc2.com/ko1.mp3"); 58var doitem = new Audio("https://insertofficial.web.fc2.com/cursor6.mp3"); 59var mainbgm = new Audio("https://insertofficial.web.fc2.com/8bit-act05_stage02.ogg"); 60var finishbgm = new Audio("https://insertofficial.web.fc2.com/zenmetu.ogg"); 61 62point.textContent = "ポイント：" + 0; 63timer.textContent = "ゲームスタートを押すとカウントダウンが始まりゲームがスタートします。ご自分のタイミングでクリックして下さい。"; 64subject.textContent = "ゲームスタートを押してね"; 65 66//制限時間 67function gametimer(){ 68 countdown = setInterval(function() { 69 if(gamestart == 1){ 70 71 timer.textContent = '制限時間：' + --TIME + '秒'; 72 if(TIME <= 0) { 73 life--; 74 if (life <= 0) finish() 75 else { 76 TIME = 10; 77 timer.textContent = "制限時間：" + 10 + "秒"; 78 doitem.play(); 79 message.textContent = "アイテムの効果が発動し、時間切れによる失格を防いだ！"; 80 form.input.value = ''; 81 }; 82 } 83 } 84}, 1000); 85} 86 87 88 89 90//正誤判定 91form.btn.addEventListener('click', function(e) { 92 if(!state) return; 93 94 if(form.input.value === subject.textContent) { 95 count++; 96 point.textContent = "ポイント：" + count; 97 98 99 timer.textContent = "制限時間：" + 10 + "秒"; 100 TIME = 10; 101 102 if(life == 2){ 103 life--; 104 } 105 106 init(); 107 108 } else { 109 life--; 110 111 if(life > 0){ 112 timer.textContent = "制限時間：" + 10 + "秒"; 113 TIME = 10; 114 message.textContent = "アイテムの効果が発動し、不正解による失格を防いだ！" 115 subject.textContent = mondai; 116 form.input.value = ''; 117 doitem.play(); 118 } 119 120 else { 121 wrong++; 122 finish(); 123 } 124 } 125}); 126 127 128//出題 129function init() { 130 131 132//レベルに応じた問題を出題（コードが割と冗長なため、できれば改造したい） 133 if(count > 60){ 134 const rnd = Math.floor(Math.random() * level8.length); 135 mondai = level8[rnd]; 136 }else if(count > 40){ 137 const rnd = Math.floor(Math.random() * level7.length); 138 mondai = level7[rnd]; 139 }else if(count > 30){ 140 const rnd = Math.floor(Math.random() * level6.length); 141 mondai = level6[rnd]; 142 }else if(count > 20){ 143 const rnd = Math.floor(Math.random() * level5.length); 144 mondai = level5[rnd]; 145 }else if(count > 14){ 146 const rnd = Math.floor(Math.random() * level4.length); 147 mondai = level4[rnd]; 148 } else if(count > 9){ 149 const rnd = Math.floor(Math.random() * level3.length); 150 mondai = level3[rnd]; 151 } else if(count > 4){ 152 const rnd = Math.floor(Math.random() * level2.length); 153 mondai = level2[rnd]; 154 } else { 155 const rnd = Math.floor(Math.random() * level1.length); 156 mondai = level1[rnd]; 157 } 158 159 subject.textContent = mondai; 160 form.input.value = ''; 161 form.input.focus(); 162} 163 164//ゲームオーバー時の処理 165function finish() { 166 clearInterval(countdown); 167 state = false; 168 if(wrong <= 0){ 169 mainbgm.pause(); 170 171 mainbgm.currentTime = 0; 172 finishbgm.play(); 173 timer.textContent = "プレイしてくれてありがとう！もう一度プレイしたい場合はゲームスタートを押してください。"; 174 message.textContent = ""; 175 subject.textContent = 'GAME OVER\n時間切れにつき終了！正解数は' + count + '個でした！'; 176 gamestart = 0; 177 state = false; 178 } else { 179 mainbgm.pause(); 180 mainbgm.currentTime = 0; 181 finishbgm.play(); 182 timer.textContent = "プレイしてくれてありがとう！もう一度プレイしたい場合はゲームスタートを押してください。"; 183 message.textContent = ""; 184 subject.textContent = 'GAME OVER\n時間切れにつき終了！正解数は' + count + '個でした！'; 185 gamestart = 0; 186 } 187} 188 189 190 191 192 193//スタートボタン 194form.start.addEventListener('click', function(e) { 195 196 if(gamestart == 0){ 197 state = true; 198 gamestart = 1; 199 init(); 200 mainbgm.play(); 201 count = 0; 202 life = 1; 203 ins = 1; 204 fiveup = 1; 205 point.textContent = "ポイント：" + count; 206 gametimer(); 207 }; 208 209 210}); 211 212 213function closewindow(){ 214 alert("こんなゲームをプレイしてくれてありがとう！\n完"); 215 window.close(); 216} 217 218 219 220 221 222 223//ここからアイテム発動に関するコード 224 225//インシュランス ※アイテムその１ 226document.onkeydown = 227 function keydown(e) { 228 if(e.keyCode == '39') { 229 if(!state) return; 230 231 if(ins < 1){ 232 message.textContent = "このアイテムは使用済みです。" 233 } else if(ins >= 1){ 234 ins = 0; 235 life++; 236 message.textContent = "アイテム「インシュランス」発動！この問題に保険がかかった！"; 237 useitem.play(); 238 } 239} 240} 241 242 243 244 //ファイブアップ ※アイテムその２ 245document.onkeydown = function keydown(e) { 246 if(e.keyCode == '40') { 247 if(!state) return; 248 249 250 if(fiveup < 1){ 251 message.textContent = "このアイテムは使用済みです。" 252 } else { 253 fiveup = 0; 254 TIME = TIME + 5; 255 message.textContent = "アイテム「ファイブアップ」発動！この問題の制限時間が５秒延長された！"; 256 useitem.play(); 257 } 258 259 260 } 261 } 262</script> 263</pre> 264 265</html> 266
keycodeを変更しても、必ず下側に書いたコードのアイテムしか発動されません。
ファイブアップを上に、インシュランスを下にすると、キーを押してもファイブアップが発動されず、、インシュランスを上にするとキーを押してもインシュランスが発動しなくなります。
回答2件
0
ベストアンサー
document.onkeydownに関数を代入しているんですから
javascript
1document.onkeydown = 関数1 2document.onkeydown = 関数2
とやれば
document.onkeydownは関数2しかもちません。
javascript
1var a = 1 2a = 2
とやってもaに1も2もあるなんてことにはなりません。
javascript
1document.onkeydown = function keydown(e) { 2 if(e.keyCode == '39') {} 3 if(e.keyCode == '40') {} 4}
と書いたりして一つにしてください。
投稿2020/06/25 07:27
総合スコア3830
0
addEventListenerを使った書き方にするか、内容を1つの関数にまとめてしまうようにしましょう。
js
1document.onkeydown = function keydown(e){}; 2document.onkeydown = function keydown(e){}; // 上の関数を上書きしてしまっています
【EventTarget.addEventListener() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
投稿2020/06/25 07:21
総合スコア69606
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/25 07:32