異なる画面と解像度でマウスを追跡し、それらを関連させる

Question

私は、画面上のオブジェクトをドラッグするときにユーザーのマウスが追跡される実験用のゲームを作成しています。つまり、画面サイズと解像度（Amazon Mechanical Turkで募集された人）の異なるさまざまなコンピュータでゲームをプレイします。

私の優先事項は、ユーザーに基づいてサイズなどを変更する動的ページを作成するのではなく、正確に動作するものを取得して、データをできるだけ早く収集できるようにすることです。私は、すべての人で一定の方法でユーザーのマウスを追跡する方法（つまり、オブジェクトを0,0から100,0まで動かすことは、オブジェクトの位置に関してユーザー間で同じ相対的な位置を意味する）を作成する方法が欲しいと思います。

私は、これについては、ゲームのための絶対サイズのウィンドウを定義することになると考えています。ほとんどの人がそれをやり遂げることができるようにするには、最大サイズが何であれ、600x800。そのようにして、すべての参加者の動きは同じサイズのグリッドシステムになります。これは実際には合理的な解決策ですか？

Answer 1

ゲームプラットフォームをレスポンシブルステージとして作成すると、すべての画面サイズで動作します。難しくはありません.100％の幅に設定し、JavaScriptを使用してアスペクト比を維持する高さを計算します。

など。幅100％の場合は800px、高さの場合は600px、幅400pxの場合は300pxの高さに設定する

マウスイベントを使用してx/y座標を取得し、すべてのデバイスとプラットフォームで普遍的に機能するので、両者は同等です。

要素offsetwidthとoffsetheightを使用し、マウスイベントclientX/Yを使用して、要素がページの本体に対してどこにあるかによって調整する必要があります。

マウスの座標がウィンドウ全体relatoveだろう、あなたは彼らがあなたの「ステージ」を超えていると、彼らはエッジ