キーを押したときの処理がうまくいかない

自作のタイピングゲームに特定のキーを押したらアイテムが発動するシステムを作っていますが、ソースコードの上側に置いたアイテムが動作しません。順番を入れ替えたりしてもダメでした。

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件

ベストアンサー

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

sousuke

総合スコア3828

Matsuta174320

2020/06/25 07:32

確かに私のコードではdocument.onkeydown関数を上書きしていましたね。いつもありがとうございます。

行動規範の内容に同意します

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

kei344

総合スコア69400

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

キーを押したときの処理がうまくいかない

関連した質問