スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
--/--/--(--)
スポンサー広告

3-3.Monacaで開発(html+javascriptでタッチでイラストを変える)

さて、いよいよMonacaでコーディング的なことをします。
「素人が開発」がコンセプトなのでほぼコピペでできちゃう感じで進めます。

やりたいことは
イラスト画像を複数配置して、
┌───┐
│○×△│
└───┘
画像がタッチされたら、
タッチされた画像が、ランダムに別のイラスト画像に変わる、
┌───┐
│○○△│
└───┘

ということです。


Monacaにログインし、ダッシュボードページにをひらき、
新しく作ったプロジェクトのIDEを開きます。
index.htmlは最初から作られていたので、それに書き足す感じで行きますね。

monaca08.jpg

最低限のbodyとかheadのタグは最初から書いてありました。

まず、加工した画像素材をアップロードします。
こんな感じで左の右クリックでwindowのエクスプローラー機能のように
フォルダやファイルを追加できます。
monaca09.jpg

アップロードは追加したいフォルダを右クリックしてアップロードを選択し、
ドラッグ&ドロップでらくらくアップロードできました。

加工した画像素材のほか、効果音のファイルもアップロードしました。
それから、javascriptを記載するためのmain.jsというファイルも新規追加しました。
フォルダ構成はこのようになりました。

monaca091.jpg

index.htmlに追記します。
<body>~</body>タグの間にimgタグを書きます。

<img src="img/d01.jpg" />
<img src="img/d02.jpg" />

こんな感じで配置しました。
「これで最初のページに画像が並ぶ」状態が完了です。
ヘッダメニューの「プレビュー」ボタンを押すと、
アプリを起動したときの様子が簡易表示でプレビューできます。

monaca092.jpg

こんな感じでプレビューされました。
imgタグって何?って人はググってこういうページで勉強してみてください。
コピペでいけます。


次はタッチしたときの動き、htmlとjavascriptの基礎知識だけで進めてみますと
onClickでクリックしたときのイベントを拾います。
クリックしたときchange_imgというファンクションが呼ばれるようにします。
さっきのimgタグにこのように追加します。

<img src="img/d01.jpg" onClick="change_img('img1');" />
<img src="img/d02.jpg" onClick="change_img('img2');" />


そして呼ばれるchange_imgファンクションの処理をmain.jsに書きます。


function change_img(img) {
    var col = new Array("img/d01.jpg","img/d02.jpg","img/d03.jpg","img/d04.jpg");
    var rnd;
    rnd = Math.floor( Math.random() * 4 );
    document.getElementById(img).src = col[rnd];
}


Math.floor( Math.random() * 4 )で0から4までの乱数を発生させます。
ググって出てきたここのページからほぼコピペしました。

さて、ほぼコピペで画像が変わるとこまでできました。
プレビューで簡易的に実行もできます。
プレビューを押して、犬のイラストをマウスでクリックすると、
画像がランダムに変わります。

ここから並べる犬の数を増やしたり、表示する大きさを調整したりしました。


ここまでは順調ですね。
さてサクサク進めましょう。
スポンサーサイト

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
by: * 2014/07/04 18:04 * [ 編集] | TOP↑

-----------
Re: 漏れ?

> imgタグのところですが、id="img1"が必要ではありませんか?


必要です!ありがとうございます。
<img id="img1" src="img/d01.jpg" ontouchstart="change_img('img1');" />
<img id="img2" src="img/d02.jpg" ontouchstart="change_img('img2');" />
by: Riri (旧:しろうとママ) * 2014/07/04 22:12 * URL [ 編集] | TOP↑

-----------
















管理者にだけ表示を許可する


| ホーム |
Page Top↑
▲ Page Top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。