どのように対応するイメージボタンを作成するためにマウスの座標を使用します.

私がFritiron学校に入学したソフトウェア工学コースのために私のフェーズ2プロジェクトを開始して、私は正直に少し不安で、1つの障害についてさえ怖がっていて、見つけて、マウス座標を使っていました.私のプロジェクトのパートナーを開始し、私は単純なポイントとクリッカーゲームを作るためのアイデアを思いついた.それから、私たちは、これをする良い方法が窓のセクションを選んで、我々が与えられた地域をボタンに変えることができた座標を使うことであると知らせました.私がこれに入る前に、私は私が学生であると言いたいです、そして、JSに関する私の知識は反応しません.第二に、マウスの座標を見つけるのは非常に簡単ですが、全く新しい、おそらく悪い説明を書く代わりに、ここでは私がJason Brownに従って説明しています.とにかくそれに入りましょう.
Mr . Brownのチュートリアルに従うと仮定すると、useMousePositionコンポーネントをすべて準備する必要があります.私はプロジェクトから作られたアートを例として使って、あなたを滑稽に紹介します.

上記のことができます参照してくださいslippyは眠っている、私はよく目を覚ますに戻るボタンをクリックすることができます.useMousePositionのおかげで、ボタンの座標、およびいくつかの条件のロジックは、私は先に行くことができますし、画像とフックの両方をインポートした後、useStateでこのイメージをslippyの置く.
我々が望む各角の座標をつかんで始めましょう.

あなたは4つの異なる数字、2つのx位置と2つのy位置のための2で終わるべきです.それらの数字を書き留めて、XとYが一緒に行くことによってそれらを切り離してください.
何よりも前に、あなたがそれを使用するコンポーネントにuseMousePositionをインポートし、後で使用する値として変数に保存する必要があります.閉じるこの動画はお気に入りから削除されています.

import React { useState } from "react";
import slippySleeping from "./images/slippySleeping.gif";
import { useMousePosition } from "./useMousePosition";

App function(){
  const [slippy, setSlippy] = usestate(slippySleeping)

  const position = useMousePosition();
  const x = position.x;
  const y = position.y;

  return (
   <img src={slippy} alt="Slippy Sleeping" />
  );
};

export default App;

これを設定したので、イメージタグをクリックして、その中の関数をリンクできます.関数wakeSlippyを呼びましょう.この関数は、条件付きのロジックを保持し、前の状態を新しい状態に変更します.あなたはこのようなことで終わるべきです.

import React { useState } from "react";
import slippySleeping from "./images/slippySleeping.gif";
import awakeSlippy from "./images/awakeSlippy.gif";
import { useMousePosition } from "./useMousePosition";

App function(){
  const [slippy, setSlippy] = usestate(slippySleeping)

  const position = useMousePosition();
  const x = position.x;
  const y = position.y;

  function wakeSlippy(){
    setSlippy(awakeSlippy);
  }

  return (
   <img src={slippy} onClick={wakeSlippy} alt="Slippy Sleeping" />
  );
};

export default App;

私たちが今持っているものは、画像をクリックしてもイメージを変更します.それらの座標を覚えていますか?まあ、それを使用する時間です.条件論理はこのように見えるはずです.

if(x < biggerNumX && y < biggerNumY && x > lesserNumX && y > lesserNumY) { 
  setSlippy(awakeSlippy;
}

我々がここでしたことは、ボタンの角を見つけて、作ることです
条件付き論理を持つ四角形.あなたがしなければならないすべては、wakeSleepy機能にそれを置いてください、そして、あなたはこれのような何かを持つべきです.

場合は、ベッドには、ベッドのための座標を取得し、いくつかのより条件のロジックを追加する必要がありますすべてのベッドに滑りやすいようにしたい、それはかなり簡単です!つの最後の単語は、すべての画面サイズのコードを更新しない限り、ボタンを作るこのメソッドはかなり信頼できないことができます.