HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのMouseEvent offsetXプロパティとは？マウス座標の取得方法を解説

MouseEvent offsetXプロパティとは

HTML DOMのMouseEvent offsetXプロパティは、マウスイベントが発生した際に、ターゲット要素を基準としたマウスポインタの水平方向（X軸）の座標を返します。垂直方向（Y軸）の座標を取得したい場合は、offsetYプロパティと組み合わせて使用します。

これらのプロパティを活用することで、要素内でのマウスの正確な位置を把握でき、ドラッグ＆ドロップ操作やゲーム、カスタムカーソル追従機能など、さまざまなインタラクティブなWebアプリケーションの実装に役立ちます。

構文（シンタックス）

offsetXプロパティの値を参照する基本的な構文は以下のとおりです。

MouseEventObject.offsetX

戻り値

  • マウスポインタのX座標（ピクセル単位の数値）を返します。
  • 座標の基準は、イベントが発生したターゲット要素の左上隅（padding領域を含む）です。

実装例：offsetXを使ったミニゲーム

ここでは、MouseEvent offsetXプロパティを使用した具体的な例を紹介します。緑色の安全エリア内でマウスを動かし、赤い危険エリアに触れずにゴールを目指す、シンプルなミニゲームです。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent offsetX</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    #outer {
        width:70%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        border:1px solid black;
        height: 105px;
        background-color: #28a745;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #upper {
        border-bottom: 1px solid black;
        height: 40px;
        margin: 0 0 15px 0;
        background-color: #DC3545;
    }
    #lower {
        border-top: 1px solid black;
        height: 40px;
        margin: 15px 0 0 0;
        background-color: #DC3545;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>MouseEvent-offsetX</legend>
            <div id="outer">
            <div id="upper"><h2>Danger</h2></div>
            <div id="lower"><h2>Danger</h2></div>
            </div>
            <input type="button" id="start" value="Start" onclick="gameStart()">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById('divDisplay');
    var gameDisplay = document.getElementById('outer');
    function playGame(event) {
        var x = event.offsetX;
        var y = event.offsetY;
            if(y > 45 && y < 60){
                divDisplay.textContent = 'Keep Going!';
                    if(x === 272){
                        divDisplay.textContent = 'Congrats! You Did it!';
                        gameDisplay.removeEventListener('mousemove', playGame);
                    }
            }
            else{
                divDisplay.textContent = 'You moved to DANGER area. You loose!';
                gameDisplay.removeEventListener('mousemove', playGame);
            }
    }
    function gameStart(){
        gameDisplay.addEventListener('mousemove',playGame);
    }
</script>
</body>
</html>

コードの解説

  • playGame()関数：mousemoveイベント発生時に呼び出され、event.offsetXとevent.offsetYでマウスの座標を取得します。
  • 安全エリアの判定：Y座標が45〜60の範囲内（緑色エリアの中央）であれば「Keep Going!」と表示され、ゲーム続行となります。
  • クリア条件：X座標が272に到達すると「Congrats! You Did it!」と表示され、イベントリスナーが削除されてゲーム終了です。
  • 失敗条件：Y座標が範囲外（赤い危険エリア）に入ると「You moved to DANGER area. You loose!」と表示され、ゲームオーバーとなります。

実行結果

① 「Start」ボタンをクリックし、カーソルが緑色（安全）エリア内にある場合

画面には「Keep Going!」というメッセージが表示され、ゲームが続行されます。

HTML DOMのMouseEvent offsetXプロパティとは？マウス座標の取得方法を解説

② カーソルが緑色（安全）エリアの終端に到達した場合

X座標が272に達すると「Congrats! You Did it!」と表示され、ゲームクリアとなります。

HTML DOMのMouseEvent offsetXプロパティとは？マウス座標の取得方法を解説

③ カーソルが赤色（危険）エリアに入った場合

「You moved to DANGER area. You loose!」と表示され、ゲームオーバーになります。

HTML DOMのMouseEvent offsetXプロパティとは？マウス座標の取得方法を解説

まとめ

offsetXプロパティは、ターゲット要素を基準としたマウスのX座標を簡単に取得できる便利なプロパティです。offsetYと併用することで、要素内の二次元座標を正確に把握できます。本記事のようなゲーム開発だけでなく、ツールチップの位置制御や画像ビューアなど、マウス位置に応じた動的なUIを実装する際にぜひ活用してみてください。

  1. HTML DOM MouseEventのoffsetYプロパティとは？使い方とサンプルコードを解説

    offsetYプロパティとは HTML DOM の MouseEvent offsetY プロパティは、マウスイベントが発生した際に、イベントのターゲット要素を基準としたマウスポインタの垂直方向（Y軸）の座標をピクセル単位で返します。 水平方向（X軸）の座標も同時に取得したい場合は、offsetX プロパティと組み合わせて使用します。 このプロパティは読み取り専用であり、ターゲット要素のパディング領域を含む左上隅を原点（0, 0）として座標が計算される点に注意してください。 構文 offsetY の値を参照するための基本的な構文は以下のとおりです。 MouseEventObject.offs

  2. HTML DOM MouseEvent clientYプロパティとは？マウスのY座標を取得する方法を解説

    MouseEvent の clientY プロパティは、マウスイベントが発生した際のマウスポインタの縦方向（Y）の座標値を返します。clientX プロパティと組み合わせることで、横方向（X）の座標も同時に取得できます。これらの座標は、ブラウザの表示領域（ビューポート）の左上隅を原点（0,0）とした相対位置で表されます。そのため、画面上でカーソルが現在どの位置にあるのかを正確に把握したい場面、例えばドラッグ＆ドロップの実装やミニゲームの作成などで活躍します。構文clientY の値を参照する基本的な構文は以下の通りです。MouseEventObject.clientY戻り値はピクセル単位の数値