[目次]
enchant.js の用意をしよう | Webプログラミング!
Enchant.js とは
JavaScriptライブラリ
Enchant.js の情報
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ディレクトリ直下にあるすべてのファイルとフォルダ
- よく知ってる人はわかると思うけど, 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
サンプル1intro1.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();
};
