🥸

モニター上の任意の場所におじさんを描画して「おじさんを探せゲーム」を作った

2023/12/01に公開

本記事は mediba Advent カレンダー2023 の1日目の記事になります。

HTMLとJavaScriptを使って、モニターのどこかに隠れているおじさんを探すゲームを作りました。

以下の遊び方に注意して、ぜひ下のリンクから遊んでいただけると嬉しいです。

概要

今回はおじさんを探せゲームの根幹になるおじさんをモニター上の任意の位置に配置する方法について解説します。

ウィンドウを基準とした位置ではなく、モニターを基準とした任意の場所におじさんを配置することによって、ページのスクロールではなくブラウザウィンドウ自体を移動させて遊ぶゲームなどを作ることができます。

まずは前提知識となる重要なプロパティを紹介します。

今回は、おじさんをモニター上の位置(200px, 100px)に配置することを想定します。理想のイメージは下の図です。

おじさんがウィンドウの位置に関わらず、モニターの上から100px、左から200pxの位置に配置されています。
これをjsxで表現すると以下のようになります。

<Ojisan style={{
  position: 'absolute'; 
  left: `${200 - window.screenLeft}px`; 
  top: `${100 - window.screenTop}px`}} />

leftはあくまでもウィンドウの左端からの距離です。
そのため、単純にleftを200とするとモニター左端からウィンドウまでの距離分おじさんが横にずれてしまうことになります。
leftを200、topを100にした場合のイメージ図は以下になります。

モニターの左端からウィンドウまでの距離分理想の位置からずれてしまっていることがわかると思います。