enchant.jsをページ内に拡大させないで表示させる方法【2017年最新版】

つまりこのようなenchant.jsをWebページ内に貼る方法についてお話しします。
公式や他サイトの方法だといくつか問題があるため、作っちゃうおじさんのサイトで採用している方法を書きます。

 

公式で使われている方法は、以下のコードをタグ内に挿入すると、その位置にゲーム画面が出てくるというものです。

<div id="enchant-stage"></div>

 

ただこの方法だと、以下の問題が発生します。

(1)画面をスクロール可能にすると、スクロール位置によってはクリック位置がずれる時がある。

(2)複数の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>