enchant.js の用意をしよう | Webプログラミング!

Time-stamp: "2016-10-19 Wed 21:20 JST hig"

Enchant.js とは

JavaScriptライブラリ

Enchant.js の情報

本家:http://enchantjs.com/ja/

Enchant.js のダウンロードと配置

  • http://enchantjs.com/ja/download-ja/の`Download latest version of enchant.js'でenchant.jsの最新版 enchant.js-builds-x.y.z.zip をダウンロード. ここでは2016-10時点の最新版のv0.8.3-bを使ってます.
  • enchant.js-builds-0.8.3-b.zip を展開(解凍)
  • その中のローカルファイルのexamples/beginner/hellobear/index.html をブラウザで開いてみよう
  • swallow:~/public_html/local 以下にディレクトリ(例:en)を決めて, 次のものを WinSCP で転送する.
    • buildディレクトリ直下にあるファイルとフォルダ
    • imagesディレクトリ直下にあるすべてのファイルとフォルダ
    つまり, ディレクトリen内にサブディレクトリbuildやimagesは置かれない. その中のものが直接置かれる.
  • よく知ってる人はわかると思うけど, Z:\public_html\local\en にコピーしても同じこと
  • 次のintro1.htmlとintro1.jsを同じディレクトリenに転送し, (ローカルファイルでなく)Web上のページhttp://swallow.math.ryukoku.ac.jp/~t000000/local/en/intro1.html を開いてみよう. ファイル名は変えてもよいし, 2個のファイル名を同一にする必要もない. ただし, intro1.html の中にはintro1.js というファイル名が書かれているので注意.

サンプル1

サンプル1

intro1.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">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Test of Enchant.js</title>
    <style type="text/css">
      body { margin: 0px; }
    </style>

    <script type="text/javascript" src="enchant.js"></script>
    <script type="text/javascript" src="plugins/ui.enchant.js"></script>
    <script type="text/javascript" src="intro1.js"></script>
  </head>
  <body>
  </body>
</html>

intro1.js

enchant();

window.onload = function() {
    var game = new Game(320,320);
    game.fps = 16;
    game.preload('chara1.png');

    game.onload = function() {
	var bear = new Sprite(32,32);
	bear.image = game.assets['chara1.png'];
	game.rootScene.addChild(bear);
	bear.frame = 4;

	bear.x=30;
	bear.y=50;
	bear.rotation=0;
	bear.scaleX=2;
	bear.scaleY=1;
    };

    game.start();
};

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net