3Dクイズ.com

• タイトル

  3Dクイズ.com

• カテゴリ

  クイズ

• URL

  3d-quiz.com
  

• アイデアの発想法

  間違い探しを発想の転換し異なるカメラアングルで間違い探しします。
  普通の間違い探しは間違い箇所以外同じ絵という常識を覆します。

• 説明

  よく似た2つの絵を見比べて間違い探しするクイズがありますが、このクイズは3D世界で異なる角度から見て間違いを探します。
  空間認識力を鍛える3D間違い探しゲームです。

• 作り方

  Webページを作るには、HTML5＋JavaScript＋CSSでプログラミングします。
  絵は3DCGツールでモデリングしてレンダリングします。
  HTML5のcanvasタグにJavaScriptで画像を表示します。
  各問題のプログラムであるJavaScriptファイルが共通していて、画像だけ別フォルダにすることで問題を変えています。
  「question.php?stage=24」などとstageに0～48の値を「GET」して、GETした値を「var _stage」にステージ番号を代入して、問題ごとに画像を切り替えています。
  クリック地点が当たり判定画像で赤ければ正解で、黒色は不正解です。
  「context.getImageData(左,上,幅,高さ)」メソッドで当たり判定画像の色データを取得します。
  モバイルは「touchstart」「touchend」でタッチ判定し、パソコンは「mousedown」「mouseup」でクリック判定します。
  canvasタグとは相性が良くないですが、JavaScriptライブラリ「jQuery」も使ってコードをすっきりさせています。
  モバイルではタッチした時だけサウンドをプリロードしたり、再生したり出来ます。勝手に再生してデータ通信しないためでしょう。
  スマホやタブレットやパソコンのブラウザの幅高さに合わせてcanvasをリサイズしています。
  メインのJavaScriptソースファイルのURLは「https://3d-quiz.com/js/main.js」です。

• 受賞・掲載

  「2006アジアデジタルアート大賞」デジタルデザイン部門 優秀賞
  「しずおかデジタルコンテンツグランプリ2005」テーマ賞
  書籍「3D IQ間違い探し」主婦の友社
  「脳テレ～あたまの取扱説明書～」 2010年06月06日 フジテレビ
  TV☆Lab「30秒でヨロシク！はっとして☆ブレイン」 2010年01月10日 BSフジ
  「web creators」 2009年06月号 MdNコーポレーション