Search code examples
htmlgoogle-app-enginecanvaschannel-api

HTML5 Game, user movement concept

I just started learning HTML5 canvas and Google App Engine's Channel API.

I build a simple game demo based on a isometric map. Right now I want to implement character movement, but I am wondering how I should implement it.

current demo: http://cheukalex.appspot.com

This is how I think it would be implemented:

The client will handle the movement. Once the arrow keys are pressed, the client will do the movement, then sends the new coordination to the server which then will be broadcast to other users on the server to update the location of your character.

Problems I thought of:

  1. What if I want to implement "movement speed", as in how fast can the user walk five squares for example. The delay between each movement will be done on the client side. But will that be safe? since javascripts are easily edited.

  2. How do I deal with latency? If i built a simple chase-tag game, how would I sync up the users so situations where, one person looks like they "tag" another user, but the other user see him 1-2 squares behind, wont happen?

EDIT: @nycynik, you are right, the latency is around 200ms. I have tested it here.

Latency Test: http://cheukalex.appspot.com/latency

Thats is the smallest latency it will ever get. 200ms is pretty fast. Then it might be my code that is slow?

How i implemented the whole game is.

  1. Client enters website
  2. Server creates token, open channel, store client data ( channel id ) in DB
  3. .... some logic
  4. When Client press arrow keys, it notifies the server which client moved and what direction
  5. Server recieve movement, does logic, loops through database (only currently online clients), broadcast message to all clients the position of every client on the map in json. Client then "moves".

Something wrong with this?

Solution

  • This was supposed to be a comment to the first answer, but it won't fit.

    There might not be much you can do with the response time, because network latency will really be an issue for now. Perhaps you can just work on the user experience side. To make the delay "acceptable" to the user, why don't you add an animation?

    For example, when the user hits an arrow key, the horse can look like it's pulling back slowly and getting ready to jump (behind the scenes you're sending a request through the Channel API). When you get the response from the server, the horse can then complete the jump and land on another position.

    Though there will still be an issue of latency, your users might find it "acceptable" if the latency isn't that obvious.