enchant.jsでキャラクタを動かそう! (2/5)
作成:2012-09-16 14:07
更新:2012-09-16 15:23
更新:2012-09-16 15:23
■HTML側の基本コードについて
では、enchant.jsを利用してみましょう。これはJavaScriptのライブラリですから、利用には複数のファイルが必要となります。整理しましょう。
・enchant.jsファイル
これは当然ですね。ライブラリファイルです。ここでは、enchant.min.jsを利用することにします。
・HTMLファイル
Webページとなるファイルですね。これは、ほとんどダミーのようなものです。<body>には、何もタグは用意しません。表示されるコンテンツはすべてスクリプトで生成されることになります。
・スクリプトファイル
ゲームのコードを記述するJavaScriptのスクリプトファイルを用意します。これをHTMLから読み込んで動かします。まぁ、HTMLの中にスクリプトを直接書いてしまってもいいのですが、スクリプトですべてを処理しますので、別ファイルに切り離したほうがコーディングは楽になります。
では、ゲームプログラミング以前の問題として、これらのファイルの基本的なコーディングについて頭に入れておきましょう。――まずは、HTMLファイルからです。下に基本コードの見本を挙げておきました。<script>タグの「src="スクリプトファイル"」というところには、それぞれで用意するスクリプトファイルの名前を指定して下さい。
見ればわかるように、<body>部分は空っぽです。ポイントはむしろ<head>にあります。２つの<meta>タグは、モバイルからのアクセスに関するおまじないと考えて下さい。また２つの<script>タグでは、最初にenchant.jsのライブラリを読み込み、続いてそれぞれが作成するスクリプトファイルを読み込みます。
これで準備は整いました。後は、スクリプトを書くだけです。
・enchant.jsファイル
これは当然ですね。ライブラリファイルです。ここでは、enchant.min.jsを利用することにします。
・HTMLファイル
Webページとなるファイルですね。これは、ほとんどダミーのようなものです。<body>には、何もタグは用意しません。表示されるコンテンツはすべてスクリプトで生成されることになります。
・スクリプトファイル
ゲームのコードを記述するJavaScriptのスクリプトファイルを用意します。これをHTMLから読み込んで動かします。まぁ、HTMLの中にスクリプトを直接書いてしまってもいいのですが、スクリプトですべてを処理しますので、別ファイルに切り離したほうがコーディングは楽になります。
では、ゲームプログラミング以前の問題として、これらのファイルの基本的なコーディングについて頭に入れておきましょう。――まずは、HTMLファイルからです。下に基本コードの見本を挙げておきました。<script>タグの「src="スクリプトファイル"」というところには、それぞれで用意するスクリプトファイルの名前を指定して下さい。
見ればわかるように、<body>部分は空っぽです。ポイントはむしろ<head>にあります。２つの<meta>タグは、モバイルからのアクセスに関するおまじないと考えて下さい。また２つの<script>タグでは、最初にenchant.jsのライブラリを読み込み、続いてそれぞれが作成するスクリプトファイルを読み込みます。
これで準備は整いました。後は、スクリプトを書くだけです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※HTMLの基本コード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript" src="enchant.min.js"></script>
<script type="text/javascript" src="スクリプトファイル"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
※関連コンテンツ
「初心者のためのenchant.jsゲームプログラミング入門」に戻る