JavaScriptゲームを作っているので、メインメニューを追加したいのですが、正確な方法がわかりません。私はfilltext()をクリック可能にする方法を探していますが、役に立ちません。調べてみましたが、自分のニーズに合った答えは見つかりませんでした。ゲームのプロトタイプはここで見ることができます:sketchy.idreesinc.com。とにかくこれを実装することを誰かが知っていますか?私はjavacriptとHTML5のcanvas要素を使用していますが、javascriptを使用したいと思います。ありがとう!
1 に答える
HTMLとキャンバスについて最初に知っておくべきこと
DOM
HTML要素は、Webページのデータ構造であるDOM(ドキュメントオブジェクトモデル)の一部です。DOM要素はトリガーイベント(のようなclick
)を持つことができ、イベントリスナーはそれらのイベントに反応します。
ブラウザ
Webブラウザーは、DOM要素を画面上のピクセルに変換します。また、入力を処理し、ページをクリックした場合にトリガーされる要素のイベントを把握します。
キャンバス
このcanvas
要素を使用すると、ビットマップイメージをレンダリングできます。基本的に、きれいな写真を作成するために、いくつかのjavascript呼び出しを介してピクセルのグリッドに色を設定します。
それが何を意味するのか
HTML(<a>
タグ)でリンク要素を作成すると、ブラウザはテキストをレンダリングし、クリックリスナーを要素にアタッチして、リンクが実際に機能するようにします。
javascriptを使用してキャンバスにピクセルを描画すると、ブラウザによるDOMの理解はキャンバスで停止します。ブラウザはDOMを認識し、DOMはキャンバスを認識しますが、キャンバスに描画された個々のアイテムを追跡しません。
答え
キャンバス内のテキストに実際にイベントを添付することはできませんが、テキストをクリックするという望ましい動作を実現する方法はたくさんあります。何かが起こります。
1つの方法は、クリックイベントをにアタッチすることcanvas
ですが、このイベントリスナーを常に実行する単純なイベントリスナーの代わりに、クリックがテキストまたはキャンバス上の他の場所で発生したかどうかを確認する必要があります。
イベントリスナー関数はEvent
、イベントに関する情報を持つ引数を使用して呼び出されます。
グーグルするもの
これらについて簡単に読むと、作業メニューに取り掛かることができます。
- javascriptイベントリスナーの登録
- javascriptイベントのマウス座標