Skip to content
Sign UpLog In
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs
2

How do you make a player move?

MatthewX
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?

2 years ago

Voters

Comments

TopNew
1
SixBeeps
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.

2 years ago
1
MatthewX
MatthewX

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

2 years ago
1
MatthewX
MatthewX

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

2 years ago
1
SixBeeps
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. */ }
2 years ago
1
MatthewX
MatthewX

@SixBeeps
um i don't know css

2 years ago
1
MatthewX
MatthewX

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

2 years ago
1
SixBeeps
SixBeeps

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

2 years ago
1
MatthewX
MatthewX

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

?

2 years ago
1
SixBeeps
SixBeeps

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

2 years ago
1
MatthewX
MatthewX

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

2 years ago
1
MatthewX
MatthewX

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

2 years ago
1
SixBeeps
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.

2 years ago
1
MatthewX
MatthewX

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

2 years ago