javascript - 转换被添加......无休止

Question

我正在 CSS 和 JS 中使用 Canvas 上的 DOM 创建一个类似小行星的简单游戏，用于……实验目的。

在这个例子中我的代码非常小，可以很容易地看到下面发生了什么。最终目标:让箭头键顺畅地旋转和平移窗口周围的宇宙飞船，而不会产生无限量的变换。 我认为我已经完成了 90%:

使用箭头键控制下面的代码段。

'use strict';

function defineDistances() {
  var distance = {};

  distance.up = -1;
  distance.right = 1;
  distance.down = 1;
  distance.left = -1;
      
  return distance;
}

function defineKeys() {
  var keys = {};

  keys.up = 38;
  keys.right = 39;
  keys.down = 40;
  keys.left = 37;
      
  return keys;
}

function checkKeys( e ) {
  var triBx = document.getElementById( 'v-wrp' ),
      keys = defineKeys(),
      distance = defineDistances();

  switch( e.keyCode ) {
    case keys.up:
      triBx.style.transform += 'translateY(' + distance.up + 'px)';
      break;
    case keys.right:
      triBx.style.transform += 'rotate(' + distance.right + 'deg)';
      break;
    case keys.down:
      triBx.style.transform += 'translateY(' + distance.down + 'px)';
      break;
    case keys.left:
      triBx.style.transform += 'rotate(' + distance.left + 'deg)';
      break;
  }
}

function detectMovement( e ) {
  setInterval ( 
    function() {
      checkKeys( e );
    },
    1000/24
  );  
}

function start() {
  window.addEventListener( 'keydown', detectMovement );
  preventBrowserWindowScroll()
}

start();

@import url( "https://fonts.googleapis.com/css?family=Nunito" );

html {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: "Nunito", sans-serif;
  font-size: 2rem;
}

.v {
  display: block;
  transform: rotate( 180deg );
}

<div id="v-wrp" class="v-wrp">
  <b class="v">V</b>
</div>

<script>
function preventBrowserWindowScroll() {
  window.addEventListener( 'keydown', function( e ) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf( e.keyCode ) > -1 ) {
      e.preventDefault();
    }
  }, false )
}
</script>

如果您在浏览器中检查 v-wrp 元素，您可以看到转换被无休止地添加。

我使用+= 添加转换的原因是为了避免这个问题:Reset CSS transform origin after translation / rotation

( transform-origin 在元素移动时不会随元素一起移动，除非在之前的转换之外添加所有转换，否则会导致不良影响...)

那么我该如何克服这些挑战呢？我怀疑由于添加了无穷无尽的转换，该代码段非常不稳定。我如何才能使它的工作方式与现在的方式类似，而不会出现所有内存丧失/断断续续/错误/无休止的转换？

编辑:另一个主要问题是，一旦按下按键，飞船将如何连续沿相同方向行驶，如果您按下正确的按键，甚至会以类似圆形的模式行驶。我希望它像在太空中一样漂移，但一旦松开 key 就不会转动。轨迹应该保持笔直，因为它“漂浮”我做错了什么？。

Answer 1

我做了一个快速的回答 - 可能有一些方面需要平滑，但你会明白的:(ES6代码)

'use strict'

class Ship {
    constructor (elem) {
        this.posX = 0;
        this.posY = 0;
        this.deg = 0;
        this.rad = 0;
        this.speed = 0;
    }

    update (event) {
      switch( event.key ) {
        case "ArrowUp":
          this.speed += 5;
          break;
        case "ArrowDown":
          this.speed -= 5;
          if (this.speed < 0) this.speed = 0;
          break;
        case "ArrowRight":
          this.deg += 3;
          break;
        case "ArrowLeft":
          this.deg -= 3;
          break;
      }
          this.rad = (this.deg + 90) * Math.PI / 180;
    }
    move () {
      this.posX += this.speed * Math.cos(this.rad);
      this.posY += this.speed * Math.sin(this.rad);
      if (this.speed > 0) {
          this.speed -= 0.1;
      }
      if (this.elem == undefined) {
        this.elem = document.getElementById('ship');
      }
      var translation = 'translate(' + this.posX +'px, ' + this.posY + 'px) ';
      var rotation = 'rotate(' + this.deg + 'deg)';
      this.elem.style.transform = translation + rotation;
                     
    }
}


var ship = new Ship

function update( e ) {
  ship.update(e);
  return false;
}

function start() {
  window.addEventListener( 'keydown', update );
  setInterval ( 
    function() {
      ship.move();
    },
    1000 / 24
  );  
}

start();

#ship {
  position: absolute;
  left: 50%;
  top: 50%;
}

<div id="ship">V</div>