WASD controls in Javascript

JavaScript
#1

Hello everyone, I am trying to make a simple space invader type game in Javascript with React hooks.
At the moment I have something like this

const Moveleft = useKeyPress('a')
const MoveUp = useKeyPress('w')
const MoveDown = useKeyPress('s')
const MoveRight = useKeyPress('d')
  return (
    <div className="App">
      <header className="App-header">
        <div className="tank"></div>
        {Moveleft && 'Left'}
        {MoveUp && 'Up'}
        {MoveDown && 'Down'}
        {MoveRight && 'Right'}

When I hit each of the keys, the text of the direction appears as it should. I am stuck however on how I would change this from a string to actually moving the div with the className of “Tank” .
Such as, when you press A, the div will move to the left.
I want to do the rest of the project myself, I have just never manipulated the dom in this way.
Thank you for your assistance.
The full page is viewable here: https://github.com/Imstupidpleasehelp/SpaceInvaders/blob/master/src/App.js

#2

There are several ways to do that and I think best for learning is to experiment with couple of them. There are some pros/cons for each, but it absolutely does not matter for now. First get it working and then find out what works best for you.

I think simplest might be position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
CSS transforms are heavy-hitters that can do pretty much anything you need. You can start with translate: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

Here is a vanilla snippet using position. Maybe it can help you: https://codepen.io/Puukallistaja/pen/bGebLBv

1 Like
#3

Thanks for your reply!

#4