スポンサーリンク

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 という名前で保存。 > 開く

image image

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

image image

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

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

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

image image

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

無料です。素晴らしい!

http://code.9leap.net/
image image

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

image image

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

image image

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

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

image

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

image

index.html

image

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

image image

少しだけ訂正

image image

image

おしまい。

image

スポンサーリンク