Advice on using mouse pointer in game

Hi

I have completed the Tutorials on the MMORPG - these are really awesome. I have successfully replicated the code and this has been very satisfying. I do have some things that I would like to adapt, but not sure how to get this done. The main things I am looking for advice are:

- How to use the mouse pointer to click on an enemy to make a hit / collision.
- How to attach credits to each player - like a set amount of bullets to start with (one less bullet after clicking on enemy - get bullets when enemy is killed)

I have set up a GitHub project (@jlegange14522)that describes what I am trying to achieve - many of the elements of what I want to do are covered in the tutorial, but still my coding skills are just too poor to make progress from the tutorial code.

Any suggestions would be great!

Below is a summary of what I want to build:

This is a project to create a simple on-line multi player game

.

The object - simple Each player logs into the site and has his own player name and account. He can see how many other player are on-line (but can't see them on his screen). There is a central "enemy" that each player "shoots" by putting his mouse pointer on the image on the canvas and then scores a hit by clicking on the image of the enemy. Note the enemy is not a player that is logged in and all players are competing to beat the same enemy.

Initially this will be a simple red balloon on the screen that pops when clicked on - indicating a hit. Once the balloon is popped a set number of times (say 11) by all the on-line players it explodes with a prize to the player that executed the last click and produces a bonus win.

Example of two players A and B:

•A starts with 8 credits in his account
•B starts with 12 credits in his account

The "enemy" red balloon needs to be popped 11 times to give a prize of 10 credits. Player A and B can't see how many times the other has popped the balloon. Players will not know how many pops before the next prize, will only be able to see if there are other player on line or not.

A possible sequence of events could be:

Assume A= a pop by Player A and B = pop by player B then

A A B B A B B A B B A = The red balloon was popped 11 time in total by players A and B with Player A executing the eleventh pop - Player A wins 10 credits! player balances are now:
•Player A (8 -5 + 10) = 13 credits
•Player B (12-6) =6 credits

The balloon resets and now requires another 11 "pops" before it pays out a prize again.

In Summary:

The more players the fewer pops before and individual scores a prize win. The aim of the game is to build up a fund of credits with as few pops as possible.

You already have the X,Y position of the mouse.
You know the X,Y,width,height of the monster/balloon.

You can do a basic collision test between a point and a rectangle.

If you want more precise collision, you can represent the image as a circle or as multiple geometric form.

About the poping, the monster should have an attribute called .popList that contains the list of people that clicked it.
if(actor.popList.length > actor.maxPop) explode logic.

Awesome!

Many thanks for the quick reply. Any suggestions on how I can make all the players see the same enemy/balloon but not see each other. So everybody is fighting (or popping) the same balloon, but can't see who else is fighting the balloon or how many times they have popped it.

Just don't send information about other players. In the tutorials, Player.update() gathers the data about all the players. Instead of sending that, only send the updatePack of the player concerned.

Code:


Inside setInterval

for(var i in SOCKET_LIST){
   pack.player = Player.list[i].getUpdatePack();
   var socket = SOCKET_LIST[i];
   socket.emit('update',pack);
   ...


Thanks again RC - help so much appreciated!!

Unfortunately I am still struggling. I have tried to update the tutorial code to make the player move with the mouse. As you pointed out the code does get the x,y coordinates for the mouse, but I am struggling to get the client and server code to work together

I know this is basic stuff - but when I try to insert the code from the HTML5 game tutorial and amend to work with the Multiplayer tutorial code - I just seem to get stuck

It feels like it should be simple to set up a canvas with an enemy and a player where the players complete together to "pop" the enemy and are able to chat using the console...... with the main aim being to be the player that delivers the final "pop" that kills the enemy and getting extra credit ie more chances to pop the next enemy.....

in any event I shall keep on trying. Many thanks again for the amazing tutorials and help.

Haa - I am really pathetic at this!!

Tried to use your advice on changing the code setInterval function I have chagend the code to:

Code:

setInterval(function(){
    var pack = {
       player:Player.update(),
       bullet:Bullet.update(),
    }
    
    for(var i in SOCKET_LIST){       
        pack.player = player.list[i].getUpdatePack();    // added this line to try and send only the current player
                var socket = SOCKET_LIST[i];
       socket.emit('init',initPack);
       socket.emit('update',pack);
       socket.emit('remove',removePack);
    }
    initPack.player = [];
    initPack.bullet = [];
    removePack.player = [];
    removePack.bullet = [];


This just give me an error when I start the server:
TypeError: Cannot read property 'getUpdatePack' of undefined.

Am I missing some change in definition higher up?

The code from the single-player tutorial series and the code from the multiplayer series are not really compatible. They will need to be adapted to work together.

player.list[i].getUpdatePack(); should be Player.list[i].getUpdatePack();

There is no global variable called player.