enchant.jsを使ってHTML5とJavaScriptによる簡単なゲームを作ってみました。
HTML5 + JavaScriptベースのゲームエンジンで、30KBのソースコードで、PC, Mac, iPhone, iPad, Android すべてで動作するスタンドアロンライブラリです。
ライブラリの容量も30Kらしいです。(2Dゲームがメインになるのかな)
Contents
ソース元: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による簡単なゲームデモページ
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告