主页 / 问题 / 1020693
Accepted
Trulimon
Asked:2020-09-05 22:41:12 +0000 UTC2020-09-05 22:41:12 +0000 UTC

如何使用键盘上的“箭头”使方块在平面上移动？

  • 772

页面上有一个方块，你需要编写一个JS脚本，让你每按一次键盘上的“箭头”左右上下，方块就向对应的方向移动5个像素。

'use strict'                
let box5Move = document.querySelector('.box5');
box5Move.style.top = 100;
box5Move.style.left = 100;
window.addEventListener('keydown', (e) => {            
    if (e.keyCode === '40') box5Move.style.top = parseInt(box5Move.style.top) + 5 + 'px';
    else if (e.keyCode === '38') box5Move.style.top = parseInt(box5Move.style.top) - 5 + 'px';            
    else if (e.keyCode === '37') box5Move.style.left = parseInt(box5Move.style.left) - 5 + 'px';
    else if(e.keyCode === '39') box5Move.style.left = parseInt(box5Move.style.left) + 5 + 'px';
})
.boxWide {
    position: relative;
    margin: 5px 10x;
}    
.box5 {
    top: 100px;
    left: 100px;                
    height: 30px;
    width: 30px;
    border-radius: 3px;  
    position: absolute;
    background: #d37116;
}
<div class="boxWide">                
    <div id="divBox5" class="box5"></div>
</div>
<!--    keyCode     key
        40          ArrowDown 
        39          ArrowRight
        37          ArrowLeft
        40          ArrowDown
        38          ArrowUp -->

javascript

2 个回答

  1. const box5Move = document.querySelector('.box5');

document.addEventListener('keydown', (e) => {
  // float вернет нормальное значение у 100px, например.
  let lastTopCoords = parseFloat(box5Move.style.top);
  let lastLeftCoords = parseFloat(box5Move.style.left);

  // У вас изначально координаты в стилях прописаны. Поэтому style ничего не вернет.
  // Либо использовать getComputedStyles, либо так :)
  if (isNaN(lastTopCoords)) lastTopCoords = 100;
  if (isNaN(lastLeftCoords)) lastLeftCoords = 100;

  // Со switch красивее.
  switch(e.keyCode) {
    // e.keyCode - число, а не строка.
    case 40: {
      box5Move.style.top = `${lastTopCoords + 5}px`;
      break;
    }
    case 38: {
      box5Move.style.top = `${lastTopCoords - 5}px`;
      break;
    }
    case 37: {
      box5Move.style.left = `${lastLeftCoords - 5}px`;
      break;
    }
    case 39: {
      box5Move.style.left = `${lastLeftCoords + 5}px`;
      break;
    }
    default: break;
  }
});
    .boxWide {
    position: relative;
    margin: 5px 10x;
}    
.box5 {
    top: 100px;
    left: 100px;                
    height: 30px;
    width: 30px;
    border-radius: 3px;  
    position: absolute;
    background: #d37116;
}
    <div class="boxWide">                
    <div id="divBox5" class="box5"></div>
</div>
<!--    keyCode     key
        40          ArrowDown 
        39          ArrowRight
        37          ArrowLeft
        40          ArrowDown
        38          ArrowUp -->

    • 2
  2. Best Answer

    变态，但很酷的变态））

    'use strict'
let box5Move = document.querySelector('.box5');
let pos = {top: 100, left: 100}
box5Move.style.top = pos.top + 'px';
box5Move.style.left = pos.left + 'px';

let obj = {
  '40': ['top', 5], 
  '38': ['top', -5], 
  '39': ['left', 5], 
  '37': ['left', -5],
}

addEventListener('keydown', function(e) {
  let key = obj[e.keyCode];
  if( key ){ // key[0] == 'top' или 'left'
    pos[ key[0] ] = pos[ key[0] ] + key[1];
    box5Move.style[ key[0] ] = pos[ key[0] ] + 'px';
  }
});
    .boxWide {
  position: relative;
  margin: 5px 10x;
}

.box5 {
  top: 100px;
  left: 100px;
  height: 30px;
  width: 30px;
  border-radius: 3px;
  position: absolute;
  background: #d37116;
}
    <div class="boxWide">
  <div id="divBox5" class="box5"></div>
</div>

    • 1

相关问题