javascriptの左矢印キーが取得されない

javascriptでテトリスを作る一部始終プログラマーの赤ちゃんシリーズ
現在javascriptでゲームのテトリスを上記の教本を参考に写経しています。
正直、書き写し、内容を把握するといった感じなので、間違えたはずはないのですが、テトリスが上から落ちて来る際、右矢印キーで右にはいくのですが、左が反応しません。

流れとして、押されたキーが37番の時にkeys.left = trueという命令が実行するイメージです。
ミスタイプだといいのですが、エラーも出ておらず原因がわからない
状態です。
勉強中のためコメントアウトがたくさんありますがご了承ください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>テトリス</title>
8  <style>
9   table {
10  border-collapse: collapse;
11}
12table td {
13  width: 20px;
14  height: 20px;
15  border: 1px solid #222;
16}
17  </style>
18</head>
19<body>
20  <div id="view"></div>
21  <!-- /#view -->
22  <script src="js/script.js"></script>
23</body>
24</html>

javascript
1window.onload = function () {
2  var html = ['<table>']; //配列
3  var width = 10;
4  var height = 20;
5
6  for (var y=0; y<height; y++) { //縦
7    html.push('<tr>');
8    for (var x=0; x<width; x++)html.push('<td></td>'); //横 tdが10個配列に追加
9    html.push('</tr>');
10}
11
12  html.push('</table>');
13  document.getElementById('view').innerHTML = html.join(''); //join配列要素接続
14
15  var cells = document.getElementsByTagName('td');
16  var top = 0;
17  var top0 = top;
18  var left = 0;
19  var left0 = left;
20  var keys = {}; //キーボードのどのキーが押されたか
21  document.onkeydown = function (e) {
22    switch((e || event).keyCode) {
23      case 37: keys.left = true; break; //左←
24      case 39: keys.right = true; break; //右→
25    }
26  };
27
28  var move = function () { //関数の代入
29    left0 = left;
30    if(keys.left && left > 0) left--; //左←が押されているかつleftが0より大きい場合leftから1減算
31    if(keys.right && left + 4 < width) left++;
32    //top0がredを上書きしていくイメージ
33    cells[top0 * width + left0 + 0].style.backgroundColor = ''; //色消し処理
34    cells[top0 * width + left0 + 1].style.backgroundColor = ''; //色消し処理
35    cells[top0 * width + left0 + 2].style.backgroundColor = ''; //色消し処理
36    cells[top0 * width + left0 + 3].style.backgroundColor = ''; //色消し処理
37    cells[top * width + left + 0].style.backgroundColor = 'red'; //色つけ
38    cells[top * width + left + 1].style.backgroundColor = 'red'; //色つけ
39    cells[top * width + left + 2].style.backgroundColor = 'red'; //色つけ
40    cells[top * width + left + 3].style.backgroundColor = 'red'; //色つけ
41
42    top0 = top;
43    top++; //topに1をたす 0→1
44    //もしtopの値が,heightの値(20)未満の場合は、1病後にmove関数を実行する
45    if(top < height) setTimeout(move, 1000); //1秒に1マス下へ
46  };
47  move();
48};

長文で申し訳ありませんが、アドバイスいただけると幸いです。
よろしくおねがいします。

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

回答1件

ベストアンサー

右キーを押すと、keys.rightがtrueとなりますが、見る限りfalseに変更する処理がどこにもないので、キーを離してもtrueのままですのでどんどん右に流されていきます。
また、その後左キーを押すと、keys.leftがtrueとなりますが、keys.rightもtrueなので右に動く処理と左に動く処理が相殺されて、そのまま下に落ちていきます。
move関数のなかで、keysをリセットしないといけないのではないかと思います。