Javascript: перемещение объекта с помощью клавиш со стрелками

Question

Im делает простую игру в тетрис. Пока у меня есть часть Tetris, которая вращается при нажатии пробела.

Следующим шагом для меня является перемещение объектов влево и вправо с помощью клавиш со стрелками. От взгляда к другому Stack Questions Я обнаружил, что это было возможно, изменив поля.

 var angle = 0; 
     var obj = document.getElementById('image') 

     document.onkeydown = checkKey; 

     function checkKey(e) { 

      e = e || window.event; 

      if (e.keyCode == '32') { 
       rotate(); 
      } 
      else if (e.keyCode == '37') { 
       moveLeft(); 
      } 
      else if (e.keyCode == '39') { 
       moveRight(); 
      } 

     } 
     function rotate() { 
      angle = angle + 90; 
      console.log(angle) 
      obj.className = "image" + angle; 
      console.log(obj.className) 
      if (angle == 360) { 
       angle = 0; 
      } 
     } 

     function moveLeft() { 
      obj.style.left = parseInt(obj.style.left) - 5 + 'px'; 
     } 

     function moveRight() { 
      obj.style.left = parseInt(obj.style.left) + 5 + 'px'; 
     } 

По какой-то причине это не работает для меня.

Я также заново создал свой код в JSFiddle с использованием банана вместо куска тетриса.

Answer 1

Проблема не в вашем Javascript, а в ваших стилях. Вам необходимо полностью позиционировать ваше изображение (банан в этом случае) и установить начальное «левое» значение. position: absolute; может быть установлен в HTML или CSS, но left: 0; должен быть установлен в атрибуте стиля HTML. Вот обновленные jsfiddle с изменениями.