読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

enchant.jsのサイト埋め込み時のイベントの扱いについて

なんだかよくわからないタイトル・・・。

説明に困りますが、ようはenchant.jsで作ったゲームと、他のコンテンツを同じ画面内に表示させる場合です。

よくある例だと、「ゲームをプレイ!」みたいなリンクがあって、ゲームページに遷移すると思います。
これをページ遷移ではなくて、同一ページでやらせたい場合です。

結論をはじめに書くと、PCだと何も問題ないです。
問題はタッチ端末で、画面のスクロールやリンクのクリック(=タッチ)ができなくなるみたいです。

enchant.jsで作ったゲームをページに埋め込むと

enchant.jsを読み込んでるページで、矢印キーやスペースキーを押してみてください。
普通のページならスクロールされたはずが、今回はされないはずです。

enchant.jsがそういう仕様で、全てゲームのイベントに持っていかれて、ページのスクロールはしないはずです。
ソースを追ってみると、クリックイベントは取ってないみたいで、PCでのリンククリックやスクロールは普通に効きます。

タッチ端末は要注意

これがiPhoneなどのタッチ端末だと、画面へのタッチは全てゲーム内へのイベントとして扱われてしまって、従来のページスクロールやリンクのクリックができなくなります。
つまりはリンク等ほかの要素と一緒に、ゲームは表示できないということに。

まぁそんなシチュエーションがどこにあるんだと言われればそれまでですが、これで個人的な構想がひとつお蔵入りに・・・!
もっと技術があればどうにかなりそうな気はするんですけどねー。
enchant.js自体のコードをいじって、ステージをタッチした時だけ発火とかにできれば解決できそうですけど、そこはいじりたくない!