enchant.js: Step0 – enchant.js の雛形を準備しよう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

まずはenchant.js の雛形を準備しよう!を使う際の雛形を準備しましよう

SAMPLE

サンプルはこちらで見ることができます.

CODE

index.html

この形は決まりきった形なので今後変更しません. 主にやっていることは enchant.js の読み込みと モバイル対応です.

<!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">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <title>Step0 - enchant.js の雛形を準備しよう!</title>
        <script type="text/javascript" src="../enchant.js"></script>
        <script type="text/javascript" src="game.js"></script>
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        
    </body>
</html>
    

game.js

enchant.js を使う際の基本的な処理です.

// enchant 初期化(global 領域に enchant を追加)
enchant();

/**
 * ロード
 */
window.onload = function()
{
    // ゲームクラスを生成
    var game = new Game(320, 320);
    
    game.onload = function(){
        // TODO: ここにゲーム初期化処理をかきこんでいく
    }
    
    // 背景表示
    game.rootScene.backgroundColor = 'rgb(240, 255, 255)';
    game.start();
}
    

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT

  • TM Life より:

    […] Step0 – enchant.js の雛形を準備しよう! […]

  • yadok より:

    正月休み中に一通りやってみる

  • cherm より:

    大変申し訳ありませんが、ちょー素人です。
    enchantでプログラミングを学ぼうと思っているのですが、何をどうやったらいいか、全く不明です。
    どのソフト?を立ち上げて、するのかわかりません。
    メモ帳で作ってコンパイルソフトかなんかでコンパイルして動かすのか、それとも、WEB上のサイトで作成して動かすのかもよくわかっていません。
    また、言語は、基本形を真似るのでしょうか?
    よかったら、こんなレベルですが、何からどうやったらいいか教えてください

    • phi より:

      cherm さん
      質問ありがとうございます.

      enchant.js の場合 JavaScript という言語で開発するので
      コンパイルソフトなどは必要ありません.

      必要なのは
      – メモ帳もしくはテキストを編集できるツール
      – 実行確認するためのブラウザ(Google Chrome がオススメ)

      ですね.

      とりあえずメモ帳を開いて

      <script>
      document.write(“Hello, world!”);
      </script>

      と書いて, index.html という名前で保存してみてください.

      そのファイルをブラウザで開くと

      “Hello, world!”

      と表示されます.

      これがプログラミングの第一歩って感じですかね.

      引き続き質問などあれば @phi_jp
      質問していただけるとすぐに対応できます.

      よろしくです♪