Spot the bug - #137: Spaceship Transform Mover

programming web dev
1

Why is my disco spaceship stuck in place?

const ship = document.querySelector('#spaceship');
let posX = 0;

function fly() {
  posX += 4;
  ship.style.transform = `translateX(${posX})`;
  requestAnimationFrame(fly);
}

requestAnimationFrame(fly);

Reply with what is broken and how you would fix it.

2

The translateX needs a unit. You’re missing px in the template literal.

Look. Overwriting ship.style.transform like that means any other transforms, like a rotate or scale, would get wiped out. You’d have to manage all of them in one string.

I usually just use a wrapper element for movement if I know I’m going to have other transforms on the inner element. Or keep the translateX value in a separate variable and combine it with others.

3

Spot the Bug answer: The CSS transform property needs a unit, such as ‘px’, to correctly apply the translation.

The fix:

ship.style.transform = `translateX(${posX}px)`;

Why:
Without a unit, the browser does not know how to interpret the numerical value for the translation. Adding ‘px’ specifies that ‘posX’ should be treated as pixels, allowing the spaceship to move across the screen.

First-answer leaderboard

  1. @Apexcodes - 6 (firsts) :trophy:
  2. @kirupa - 6 (firsts) :trophy:
  3. @emmawalter5 - 3 (firsts)
  4. @adnanahmed - 2 (firsts)
4

The missing unit on translateX is a classic. I’ve seen similar issues where a line-height without a unit causes unexpected layout shifts.

5

Clean

6

The transform.position assignment inside Update() is the bug. Should be transform.Translate() or Rigidbody.MovePosition() for physics.

7

Look. Direct assignment to transform.position bypasses the physics engine entirely. That’s how you get things clipping through walls.