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