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

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする