つまりこのようなenchant.jsをWebページ内に貼る方法についてお話しします。
公式や他サイトの方法だといくつか問題があるため、作っちゃうおじさんのサイトで採用している方法を書きます。
公式で使われている方法は、以下のコードをタグ内に挿入すると、その位置にゲーム画面が出てくるというものです。
<div id="enchant-stage"></div>
ただこの方法だと、以下の問題が発生します。
（１）画面をスクロール可能にすると、スクロール位置によってはクリック位置がずれる時がある。
（２）複数のenchant.jsを一度に表示できない。
そこで、作っちゃうおじさんのサイトでは、enchant.jsを読み込んだhtmlファイル(game.html)をiframe内に表示させています。
この方法だとクリック位置がずれることがなく、動作させることができます。
game.html(enchant.jsのゲームを表示させる部分。ただenchant.jsのゲームを表示させるだけのコードです。）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta charset="utf-8"> <script src="library/enchant.min.js"></script> //enchant.jsライブラリ <script src="myjs/Script.js"></script> //プログラムコード <script> if(window==top.window) location.href="index.html"; //直接ここに飛んで来たらiframe元に飛ばす </script> </head> <body></body> </html>
index.html(ゲーム表示ページです。)
bodyタグ内の表示したい部分に以下のコードを貼ります。
<iframe name="ifr" src="game.html" width=" 400" height="500" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"onload="this.contentWindow.focus();"></iframe> <form> //キーボード操作時には、フォーカスがiframeから外れたときにために以下のボタンをつけるとよいです。 <input type="button" value="キーボード操作できない時に有効にするボタン" onclick="ifr.focus();"> </form>