HTML

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

  /

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

Contents
  1. HTML5とJavaScriptによる簡単なゲームを作るCSSの記述
  2. enchant.jsを使ってHTML5とJavaScriptによる簡単なゲームを作るJavaScriptの記述
  3. HTML5とJavaScriptによる簡単なゲームを作るHTMLの記述
  4. enchant.jsで作ったHTML5とJavaScriptによる簡単なゲームデモページ
  5. ソース元：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タグがあればOKです。必要に応じて変更して下さい。

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

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

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

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

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

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

enchant.js ゲーム
RELATED POST