HTML5 NodeJS / Move to Click Position on Canvas

programming web dev
1

I have connected up a NodeJS and HTML5 client/server architecture. Now what i am trying to do is make it so that the player can click anywhere on the canvas so that the player can move to that location. All information i have found so far states WASD movement no click to move movement. I looked at your tutorial with regards to “Move element to click position” and tried implementing. But no luck… Just wondering if i could get some assistance on this?, Quite a large project… Just need this click to move and i shall be away (Hopefully)

P.S I love this forum… Very smart

2

Hi Jason!
Have you looked at this: https://www.kirupa.com/html5/keyboard_events_in_javascript.htm That tutorial explains how to listen for keyboard events. From there, you can easily map it to what you saw in the Move to Click tutorial. Let me know if that helps :slight_smile:

Cheers,
Kirupa

3

It sort of worked… I’ve got it to work for a single player canvas now, But the problem is making it on the canvas that i already have…

4

Ah! Sorry - misread your post. Can you be a bit more specific where you are running into issues? Are you having difficulty detecting the mouse click position, or are you having difficulty animating the player to the click location?

:slight_smile:

5

Okay so i got the server and the client set up.
What im struggling with is what side to write what… If that makes sense?
I know you have to make the server listen for the event made via the client but just unsure…

6

Unless you are planning on storing each player’s state on the server, everything can be done client side. There is no need for the server to listen for the event if all you are doing is moving a player from one location to another location.

7

Well once the click to move has been implemented i will be working on a login so that it can save the players state to the server

8

Here is what the logic would look like:

  1. Page loads.
  2. Check if user is logged in.
  3. If they are logged in, get their current position from the server. If they are not logged in, just pick a default starting position.
  4. User clicks somewhere else on the page. This causes the player to move to the new position of the click.
  5. Store the new position on the server.

This may help you to see the distinction between what lives on the server and what doesn’t more easily :slight_smile:

Cheers,
Kirupa