Transforms are added…endlessly

Question

I\'m creating a simple asteroids-like game in CSS and JS using the DOM over canvas for...experimentation purposes.

My code is pretty small in this example to make i

Answer 1

I think the problem is the detectMovement is calling the checkKeys again and again in infinite loop with same event e.

I tried adding listeners for keyup, keydown, keyleft and keyright so that checkkeys is called only when these keys are pressed.

Please comment if I have understood wrongly

'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 ) {
e.preventDefault();
  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', checkKeys );
  window.addEventListener( 'keyup', checkKeys );
  window.addEventListener( 'keyright', checkKeys );
  window.addEventListener( 'keyleft', checkKeys );
}

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>

Answer 2

For more info and a demo of the answer below see https://stackoverflow.com/a/43744006/3877726

---

Using CSS transform : matrix function

If given a object position, scale and rotation the quickest way to set the transform is to do it as a single matrix element.style.transform = "matrix(a,b,c,d,e,f)";

The 6 values represent the direction and scale of the X axis (a,b), Y axis (c,d) , and the local origin (e,f)

As most of the time you don't want to skew and the scale is uniform (x and y scale the same) the function to create and set the transform is quick. All you do is pass the position, scale and rotation.

const setElementTransform = (function(){
    const matrix = [1,0,0,1,0,0]; // predefine the array (helps ease the GC load
    const m = matrix; // alias for code readability.
    return function(element, x, y, scale, rotation);
        m[3] = m[0] = Math.cos(rotation) * scale;     // set rotation and scale
        m[2] = -(m[1] = Math.sin(rotation) * scale);  // set rotation and scale
        m[4] = x;
        m[5] = y;
        element.style.transform = `matrix(${m.join(",")})`;
    }
}());

---

Don't use keyboardEvent.keyCode it has depreciated.

Rather than use the old (and obscure key values) keyCode property to read the keys you should use the code property that has a string representing which key is down or up.

const keys = {
    ArrowLeft : false,  // add only the named keys you want to listen to.
    ArrowRight: false,  
    ArrowUp   : false,  
    ArrowDown : false,  
    stopKeyListener : (function(){  // adds a listener and returns function to stop key listener if needed.
        function keyEvent(e){
            if(keys[e.code] !== undefined){ // is the key on the named list
                keys[e.code] = e.type === "keydown"; // set true if down else false
                e.preventDefault(); // prevent the default Browser action for this key.
        }
        addEventListener("keydown",keyEvent);
        addEventListener("keyup",keyEvent);
        return function(){
            removeEventListener("keydown",keyEvent);
            removeEventListener("keyup",keyEvent);
        }
    }()) //
}

Now at any time you can just check if a key is down with if(keys.ArrowLeft){

---

Updating the DOM regularly? use requestAnimationFrame

If you are making many changes to the DOM at regular intervals you should use requestAnimationFrame and it tells the browser your intention and will cause all DOM changes made from within the callback to sync with the display hardware and the DOM's own compositing and rendering.

requestAnimationFrame(mainLoop);  // will start the animation once code below has been parse and executed.
var player = {  // the player
    x : 0,
    y : 0,
    scale : 1,
    rotate : 0,
    speed : 0,
    element : document.getElementById("thePlayer")
}
function mainLoop(time){ // requestAnimationFrame adds the time as the first argument for the callback
     if(keys.ArrowLeft){ player.rotate -= 1 }
     if(keys.ArrowRight){ player.rotate += 1 }
     if(keys.ArrowUp){ player.speed  += 1 }
     if(keys.ArrowRight){ player.speed -= 1 }
     player.x += Math.cos(player.rotate) * player.speed;
     player.y += Math.sin(player.rotate) * player.speed;
     setElementTransform(
         player.element,
         player.x, player.y,
         player.scale,
         player.rotate
     );
     requestAnimationFrame(mainLoop);
}
      

For a demo https://stackoverflow.com/a/43744006/3877726 (same link as at top of answer)

Answer 3

I have done a rapid answer - probably there are some aspect to smooth, but you'll get the idea: (ES6 code)

'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>