0

I'm creating a game for an experiment where the user's mouse will be tracked as they drag objects on the screen. The thing is, the game will be played on a variety of different computers with different screen sizes and resolutions (people recruited via Amazon Mechanical Turk).

My priority is not creating a dynamic page that will change sizes etc based on the user, but more so getting something that works accurately and that can allow me to collect data asap. I'd just like a way to create track the user's mouse in a way that is constant across all people (i.e. moving an object from 0,0 to 100,0 means the same relative location across users in terms of the objects position).

I'm thinking the best way to go about this would be to define an absolute sized window for the game, e.g. 600x800, whatever the largest size is that will enable the most people to do it. That way all participants' movements will be on the same sized grid system. Is this actually a reasonable solution?

pomegranate
  • 755
  • 5
  • 19
  • 600x800 px? I guess that would exclude mobile (I assume browser resolutions). Perhaps you should consider using relative units like em or vw/vh ? – yezzz May 09 '16 at 22:32
  • You could create a div that has a [fixed aspect ratio](http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio) and calculate cursor positions relative to the `element.offsetHeight` and `element.offsetWidth`. – Steffen May 09 '16 at 22:34

1 Answers1

0

Create your game platform as a responsive stage, so it will work on all screen sizes, it shouldn't be difficult, set it to 100% width and use Javascript to calculate a height that maintains the aspect ratio.

E.g. If 100% width is 800px set a height of 600 and if width is 400px set a height of 300px

You can then use the mouse events to get the x/y coordinates and work out a relative scale, a percentage, which will work universally across all devices and platforms so it's comparable between them.

You'll need to use the elements offsetwidth and offsetheight, then use the mouse event clientX/Y and adjust that depending on where you element is in relation to the main body of the page.

The mouse co-ordinates will be relatove the entire window, you'll need to check they are over your "stage" and were they are in relation to the edges

Pete
  • 4,542
  • 9
  • 43
  • 76