スポンサーリンク

monacaでenchant.jsチュートリアルをやってみる(1)

下記の本を購入して読んだときに知ることになった、monacaとenchant.js

monaca : オンラインで、ブラウザのみでHTML+CSS+Javascriptでスマホアプリ作成

enchant.js :2次元ゲームを簡単に作るためのJavascriptライブラリ

クイズゲーム作りたい!
(1)問題文に絵を入れたい
(2)4択または記述式
(3)スコアを表示したい
(4)できれば、オンラインにランキングを表示したい

Unityで作るという方法もあるが、enchant.jsで気軽にちゃちゃっと作りたい。。。
(ちゃちゃっとは無理かな。。。)

enchant.jsなら、アプリをインストールしなくても、クイズを解いてもらいたい人に、ファイルごと渡せばよいだけ。

(環境)
Windows8.1
monaca
enchant.js v0.8.3
Chrome

(1)monacaにログイン(https://monaca.mobi/ja/dashboard

新規プロジェクトの作成 > No Framework の、「最小限のテンプレート」

> 08_fruits という名前で保存。 > 開く

 

www フォルダを右クリックして、新規フォルダー > js フォルダを作成

 

(2)enchant.js のダウンロード

http://enchantjs.com/ja/ からダウンロード
 

解凍して、build フォルダの中の、enchant.js と、
images の中の chara1.gif と、icon0.gif をデスクトップあたりにコピーしておく。

 

(3)code.9leap.net に新規登録してログイン

無料です。素晴らしい!

http://code.9leap.net/
 

はじめてのenchant.js > STEP 8:クマさんのフルーツ狩り へ行き、ソースコードをダウンロード

 

ダウンロードしたZIPファイルの中身をどこかへ保存して、index.htmlをブラウザで開き、ゲームができることが確認。

 

(4)monacaに、enchant.js と、イメージファイルをアップロード

js フォルダに、enchant.js をアップロード

同様に、www の下に、images フォルダを作成、imagesフォルダの中に、 chara1.gif と、icon0.gif をアップロード

index.html

js フォルダに、 main.js ファイルを作成し、(3)のmain.jsのコードをコピペ。

 

少しだけ訂正

 

おしまい。