【やりたいこと】
aframeというwebVRのフレームワークを用いてwebVRの簡単なゲームを開発しています
github: https://github.com/arisaito/Tshirts1
できたところ: https://arisaito.github.io/Tshirts1/
このゲームはカーソルにオブジェクトを合わせると消せて、10個全部のオブジェクトを消すと最後に「ゲームクリア」の画像とTwitterなどのリンクが出現します。
【できないこと】
10個オブジェクトを消すとゲームクリア画像などの新たなオブジェクトを出現させることまではできました。
しかしこの最後のゲームクリア画像などは何故かカーソルが当たりません。
最後に生成するオブジェクトは、何故かカーソルが後ろになってしまっています。
当たり判定がされない、最初から生成しているオブジェクトと違いカーソルがそもそも当たらないという状況です。
そのためTwitterなどのリンクが貼りたくても貼れなくて困っています。
【現状のコード】
index.html:
https://github.com/arisaito/Tshirts1/blob/master/index.html
sub.js(動的にオブジェクトを生成するスクリプト):
/* number of target */ var objnum = 10; function clickHandler(e) { var me = document.getElementById(e.target.id); me.parentNode.removeChild(me); objnum--; if (objnum <= 0) { /* クリア画面を動的に生成する */ var scene = document.querySelector('a-scene'); var img = document.createElement('a-image'); var twitter_img = document.createElement('a-image'); var again_img = document.createElement('a-image'); var shop_img = document.createElement('a-image'); img.setAttribute('src', '#end_img'); img.setAttribute('rotation', '0 0 0'); img.setAttribute('scale', '4 2.260 4'); img.setAttribute('position', '0 4 -3'); scene.appendChild(img); again_img.setAttribute('src', '#again_img'); again_img.setAttribute('rotation', '0 0 0'); again_img.setAttribute('scale', '1.939 0.498 1.101'); again_img.setAttribute('position', '0 2.806 -2.954'); scene.appendChild(again_img); twitter_img.setAttribute('src', '#twitter_img') twitter_img.setAttribute('rotation', '0 0 0'); twitter_img.setAttribute('scale', '1 0.523 1'); twitter_img.setAttribute('position', '-0.546 2.152 -2.983'); scene.appendChild(twitter_img); shop_img.setAttribute('src', '#shop_img') shop_img.setAttribute('rotation', '0 0 0'); shop_img.setAttribute('scale', '1 0.523 1'); shop_img.setAttribute('position', '0.549 2.152 -2.983'); scene.appendChild(shop_img); } } function init() { /* クリックイベントハンドラの登録 */ var c = document.getElementsByClassName('obj'); for (i = 0; i < c.length; i++) { document.getElementById('obj' + i).addEventListener('click', clickHandler, false); } document.getElementById('end_img').addEventListener('click', endImgClickHandler, false); } function endImgClickHandler() { /* クリックイベントハンドラの登録 */ console.log("エンドイメジ、クリックされたよ") }
【試したこと】
・endImgClickHandler関数を設定してクリックされるかをテスト
function endImgClickHandler() { /* クリックイベントハンドラの登録 */ console.log("エンドイメジ、クリックされたよ") }
しかし実行されず
・そもそもplane(平面オブジェクト)にリンクが貼れないのではないか?
-> 最初から配置しているオブジェクト(八面体)をクリアのタイミングで同じように出してみたが結局カーソルが当たらない
状況変わらず
【教えていただきたいこと】
そもそも別の書き方の、動的にオブジェクトを生成する方法があれば教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/15 15:15