やりたい所までは結局できず、出来る技術で出来る所まで作製した。
やりたいこと
1. 皿が画面の色々な場所にランダムに出てくる。
2. その皿をタップして割る。
3. たまに皿以外の画像(オムライス等)が出てくるので、それはスワイプする。
4. 1〜4を繰り返し、何枚割れるかを競う。
画像が出てから数秒以内に皿を割らないとゲーム終了。
また、皿をスワイプ、もしくは皿以外をタップしたもゲーム終了。
そんな内容で、出来るだろうと思ったが、出来なかった。
自分の割り振りは、画像がランダムに変更される。
ex. 皿→皿→皿→オムライス→皿→皿→オムライス→皿→皿→皿→皿→・・・
みたいな感じで、これは配列を使って何とかできた。
スワイプとタップの違いによる処理も友達のアイデアで出来た。
出来なかったのが、「２の皿をタップしたら割れた皿が表示される」ところだ。
一見簡単そうだが、他のプログラミングと組み合わせると上手くいかなかった。
これは今後の課題で、いつか完成させる！
結局このゲームから、下記に変更した。
○皿とオムライスが出てきて、皿はタップ、オムライスはスワイプしたら数字が増え、100まで行くと皿が割れるというゲームに変更した。タップとスワイプを間違えたら、数字が0になる。
//クリック時の画像切り替え関数
function clickchangeIMG(){
console.log("changeIMG" + cnt);
if (cnt == 0) { //皿の画像1
count();
};
if (cnt == 1) { //皿の画像2
count()
};
if (cnt == 2) { オムライスの画像1
reset()
};
if (cnt == 3) { オムライスの画像2
reset()
};
i = Math.floor(Math.random() * 100);
cnt = 0; //0～69 70%
if (i > 70) cnt = 1; //70～79 10%
if (i > 80) cnt = 2; //80～89 10%
if (i > 85) cnt = 3; //89~99 10%
console.log(cnt);
document.getElementById("plate").src=imgs[cnt].src;
};
function count() {
num ++;
$("#messeage-count").text(num + "");
if (num == 100){
document.getElementById("plate").src=imgs[4].src; //割れた皿の画像
sound1();
callbacks;
}else{
}
}
上記のソース(一部のみを抜粋)を記載したが、その中でcallbacksを書いた。ほとんど意味分からず記載してみたら、上手くいった。
エラーはでるが、callbacksと書かないと100回目に画像が切り替わらないのだ。
これも今後の課題だ。
ひとまず上手く動いたということで、10月締め切りのtizenのprizeに申し込むため、友達がtizenに提出してくれた。
そこでも色々トラブルがあり、大変みたいだ。
何とか一緒に解決したのが、tizenから「Back Keyが動かない」と言うものだ。ずっと「戻るボタン」のことだと思っており、動くはずなのにと思っていたが、ネットで検索するとtizenにはハード自身に見えにくいがBack Keyが存在することが分かった。それを昨日させるコードを記載し、動作確認も昨日でき、無事提出完了。
後はtizenからの返事を待つだけだ。
