こんにちは、ぎぐちゃんです。「画面は見えているのに、マスを押しても何も起きない」。無限地雷の制作中にも確認した不具合です。表示と操作は別々の仕組みなので、片方だけ壊れることがあります。

遊ぶ側で最初に試すこと

  1. ページを一度だけ再読み込みする。
  2. ボタンやマス以外の場所も含め、画面全体が固まっていないか確かめる。
  3. 別のブラウザで同じ症状になるか確認する。
  4. 広告ブロックなどの拡張機能を一時的に無効にして比べる。
  5. スマホなら、画面の拡大表示を戻してからタップする。

ここで直った場合も、原因を断定はできません。「再読み込みで直る」「特定のブラウザだけで起きる」のように条件を残すと、修正につながりやすくなります。

原因1：透明な要素が上に重なっている

見えない枠や演出用のレイヤーがボタンの上を覆うと、クリックは手前の要素へ届きます。CSSのpointer-eventsは、要素をポインター操作の対象にするかを決めるプロパティです。飾りだけのレイヤーならpointer-events: noneにする、操作部品なら重なり順を見直す、と役割を分けます。

原因2：入力を受け取る処理が登録されていない

ブラウザでは、addEventListener()などでクリックやタップの処理を登録します。対象を探す前にスクリプトが動いた、要素の名前を変更した、途中でJavaScriptエラーが起きた、といった場合は、画面だけ表示されて入力処理が付かないことがあります。

原因3：ゲームの状態が操作禁止のまま

開始演出中、相手の手番、結果表示中などに入力を止める設計は必要です。ただし、通信失敗や例外のあとも「入力禁止」の状態が解除されないと、見た目は通常でも操作できません。禁止する条件と解除する条件を対にして確認します。

原因4：マウスとタッチで座標がずれる

Canvasを使うゲームでは、画面上の位置をゲーム内の座標へ変換して当たり判定します。CSSで拡大縮小した大きさとCanvas内部の大きさが違うと、押した場所とは別の位置として計算されることがあります。Pointer Eventsを使うと、マウス・ペン・タッチを共通の考え方で扱いやすくなりますが、座標変換の確認は別に必要です。

画面の幅と、入力方法の判定は分ける

画面幅を調べる@media (max-width: 640px)は、狭い画面でレイアウトを組み替えるのに便利です。でも、画面が狭いことと、タッチで操作していることは同じではありません。小さなウィンドウのパソコンにはマウスがあり、広いタブレットは指で操作することがあります。操作説明の切り替えには、画面幅ではなくポインターの特性を使います。

.mouse-hint { display: inline; }
.touch-hint { display: none; }

/* 主に使う入力がタッチのような粗いポインター */
@media (pointer: coarse) {
  .touch-hint { display: inline; }
  .mouse-hint { display: none; }
}

/* タッチとマウスの両方がある端末は両方を案内 */
@media (any-pointer: coarse) and (any-pointer: fine) {
  .touch-hint, .mouse-hint { display: inline; }
}

pointerは主なポインターの精度を、any-pointerは利用できるポインターのうち該当するものがあるかを調べます。タッチとマウスの両方を使える端末では、どちらか一方に決めず両方の説明を出す方法があります。レイアウト調整には画面幅の条件、操作説明にはポインター条件、と目的を分けると誤案内を減らせます。

これは説明の表示を切り替える例です。タップや長押しの処理そのものが正しく動くかは別に確認が必要です。実際の端末でも、表示と操作をそれぞれ試しましょう。

直す側の確認順

  1. 開発者ツールのConsoleにエラーがないか見る。
  2. 押したときにイベントが発生しているかログで確認する。
  3. 最前面の要素とpointer-eventsを調べる。
  4. 入力禁止フラグと手番・演出状態を確認する。
  5. PCとスマホ、マウスとタッチで同じ操作を試す。

大事なのは、いきなり全部を書き直さないことです。「イベントが来ていない」のか「来ているがゲーム側が無視した」のかを先に分けると、原因の範囲が一気に狭くなります。

参考資料

初公開：2026年10月13日。最終更新：2026年10月23日。一般的なWeb仕様とGigu-labの実装を分けて記載しています。物理端末でのタッチ確認は別途必要です。