Skip to content
Sign upLog in
← Back to Community

How do you make a player move?

Profile icon
MatthewX

How do you make a player move in html and javascript? I want the player to take small steps everytime u press wasd. Also how do i add an element like an image to a list in html and javascript? And how do you make a small window like canvas in html that pops up when you click a button?

Answered by SixBeeps [earned 5 cycles]
View Answer
Voters
Profile icon
RyleighRando
Profile icon
MatthewX
Comments
hotnewtop
Profile icon
SixBeeps

1.) You can take input in JS by using event listeners:

var movement = { left: 0, right: 0, up: 0, down: 0 } document.addEventListener('keydown', function(event) { if (document.activeElement === document.body) { switch (event.keyCode) { case 65: // A movement.left = 1; break; case 87: // W movement.up = 1; break; case 68: // D movement.right = 1; break; case 83: // S movement.down = 1; break; } } });

You can then use the new movement variable to determine where to move (depending on how you're rendering things, the code to do this will differ)

2.) Just put an img tag within an li:

<ul> <li> <img src="someimg.png"> </li> </ul>

3.) Remember the style.display thing I mentioned in your other post? Use that.

Profile icon
MatthewX

@SixBeeps
but how do i add an element to a list like an img?

Profile icon
MatthewX

@SixBeeps
Also, how would i make like another screen that is smaller show up?

Profile icon
SixBeeps

@MatthewX
I answered the list question in #2.
If you want to make an element smaller, can specify it's width and height in CSS:

#smallDisplay { width: 128px; height: 64px; /* These values are not concrete, play around with them. */ }
Profile icon
MatthewX

@SixBeeps
um i don't know css

Profile icon
MatthewX

@SixBeeps
Also, how would assign the movement code to like the player?

Profile icon
SixBeeps

@MatthewX
Learn CSS. You're missing an entire third of the web triad.

Profile icon
MatthewX

@SixBeeps
And for adding to the list, do you do the samething for

?

Profile icon
SixBeeps

@MatthewX
You can add whatever elements you want inside an li.

Profile icon
MatthewX

@SixBeeps
um so i can add a charmanders? (Look in my code)

Profile icon
MatthewX

@SixBeeps
also how do i assign the movement code to like an img?

Profile icon
SixBeeps

@MatthewX
You really shouldn't be using an img for that, but if you have no other choice, learn CSS and look into the position, top, and left properties.

Profile icon
MatthewX
Profile icon
MatthewX

@SixBeeps
Then how would i assign the movement to like a square or rectangle?