間違い探しを発想の転換し異なるカメラアングルで間違い探しします。普通の間違い探しは間違い箇所以外同じ絵という常識を覆します。説明よく似た2つの絵を見比べて間違い探しするクイズがありますが、このクイズは3D世界で異なる角度から見て間違いを探します。空間認識力を鍛える3D間違い探しゲームです。作り方Webページを作るには、HTML5+JavaScript+CSSでプログラミングします。絵は3DCGツールでモデリングしてレンダリングします。3DCGツールですがレンダリングした画像は2次元で3Dっぽく見えているだけです。HTML5のcanvasタグにJavaScriptで画像を表示します。各問題のプログラムであるJavaScriptファイルが共通していて、画像だけ別フォルダにすることで問題を変えています。_stage」にステージ番号を代入して、問題ごとに画像を切り替えています。クリック地点が次の当たり判定画像で赤ければ正解で、黒色は不正解です。「context.getImageData(左,上,幅,高さ)」メソッドで当たり判定画像の色データを取得します。モバイルは「touchstart」「touchend」でタッチ判定し、パソコンは「mousedown」「mouseup」でクリック判定します。canvasタグとは相性が良くないですが、JavaScriptライブラリ「jQuery」も使ってコードをすっきりさせています。モバイルではタッチした時だけサウンドをプリロードしたり、再生したり出来ます。勝手に再生してデータ通信しないためでしょう。スマホやタブレットやパソコンのブラウザの幅高さに合わせてcanvasをリサイズしています。メインのJavaScriptソースファイルのURLは「https://3d-quiz.com/js/main.js」です。MdNコーポレーションHOMEへ戻る。