HTML

enchant.jsを使ってHTML5とJavaScriptによる簡単なゲームを作ってみた

  /

enchant.jsを使ってHTML5とJavaScriptによる簡単なゲームを作ってみました。
HTML5 + JavaScriptベースのゲームエンジンで、30KBのソースコードで、PC, Mac, iPhone, iPad, Android すべてで動作するスタンドアロンライブラリです。
ライブラリの容量も30Kらしいです。（2Dゲームがメインになるのかな）

Contents
  1. ソース元：wise9/enchant.js、ghelia/enchant.js-builds
  2. HTML5とJavaScriptによる簡単なゲームを作るCSSの記述
  3. enchant.jsを使ってHTML5とJavaScriptによる簡単なゲームを作るJavaScriptの記述
  4. HTML5とJavaScriptによる簡単なゲームを作るHTMLの記述
  5. jQuery.fontFlex.jsを使ってブラウザサイズに応じてフォントサイズを変更するデモページ

ソース元：wise9/enchant.js、ghelia/enchant.js-builds

以下がソース元です。
wise9/enchant.js
ghelia/enchant.js-builds

HTML5とJavaScriptによる簡単なゲームを作るCSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
    body {
        margin: 0;
        padding: 0;
    }
    h1{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 1.4em;
    }
-->
</style>

enchant.jsを使ってHTML5とJavaScriptによる簡単なゲームを作るJavaScriptの記述

※enchant.jsファイルを読み込みます。キャラクター（bear.gif）画像をキーボードの矢印（上下左右）操作で移動させます。

<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript">
enchant();

window.onload = function() {
    var game = new Game(320, 320);
    game.preload('bear.gif');
    game.onload = function() {
        var bear = new Sprite(20, 30);
        bear.image = game.assets['bear.gif'];
        bear.dir=1;
        bear.spd=3;

        bear.addEventListener('enterframe', function() {
            if(game.input.left) bear.x -= bear.spd;
            if(game.input.right) bear.x += bear.spd;
            if(game.input.up) bear.y -= bear.spd;
            if(game.input.down) bear.y += bear.spd;
        });
        game.rootScene.addChild(bear);
    }
    game.start();
}
</script>

HTML5とJavaScriptによる簡単なゲームを作るHTMLの記述

※bodyタグがあれば大丈夫です。必要に応じて変更して下さい。

<body>
    <h1>enchant.jsで簡単なゲームを作ってみました。<br>キーボードの矢印（上下左右）をクリックすると以下のキャラクターが移動します。</h1>
</body>

jQuery.fontFlex.jsを使ってブラウザサイズに応じてフォントサイズを変更するデモページ

enchant.jsで作ったHTML5とJavaScriptによる簡単なゲームデモページ

　

※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

enchant.js ゲーム
RELATED POST