人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Js? canvas? でカウントダウンのアニメーションをつけたい。

シンプルなゲームを考えており、(1)スタートボタンを押す(2)カウントダウンのアニメーション(3)画像を表示 という流れを考えています。

理想は下記の補足1のように、画像で作成された数字がカウントされて、0で画像表示という流れです。サンプルとなるサイト(補足2)も見つけたのですが、数字がテキストなのとどのように組み込んだらいいのかわからなかったため質問させて頂きました。
どなたかアドバイス頂けると幸いです。

■補足1
http://xmas.sinap.jp/11/
GAME START > 01 場所を決める > 02 星を届ける
カウントダウンがはじまります。*実機かiOSシュミレーターでないと見れません。

参考2
http://jsdo.it/megabu.yk/8ktr

●質問者: ypressjp
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● oil999
●100ポイント ベストアンサー

下記のスクリプトをお試しください。

数字の画像は、配列imageNumにURLまたは相対パス指定でセットしてください。
最後に表示する画像はimageZeroです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>笑ったら罰ゲーム</title>
<link rel="stylesheet" href="/css/reset.css" type="text/css">
<link rel="stylesheet" href="/css/layout.css" type="text/css">
<link rel="stylesheet" href="/css/general.css" type="text/css">
<script type="text/javascript">
<!--
TimerStart = 10; //タイマの開始値
Timer = TimerStart //カウントダウンタイマ
Wait = 1000; //待ち時間(ミリ秒)

//カウントゼロで表示する画像URL
imageZero = 'http://cdn.www.st-hatena.com/images/logo_portal_hatena.gif';
//数字画像のURL
imageNum = new Array(10);
imageNum[0] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-0L.jpg';
imageNum[1] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-1L.jpg';
imageNum[2] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-2L.jpg';
imageNum[3] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-3L.jpg';
imageNum[4] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-4L.jpg';
imageNum[5] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-5L.jpg';
imageNum[6] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-6L.jpg';
imageNum[7] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-7L.jpg';
imageNum[8] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-8L.jpg';
imageNum[9] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-9L.jpg';

//初期化
function hogeInit() {
 html = '<button type="button" class="punch" onClick="hogeStart()">スタート</button>';
 document.getElementById("disp").innerHTML = html;
}
//開始
function hogeStart() {
 Timer = TimerStart;
 setTimeout(hogeCountDown, Wait);
}
//カウントダウン
function hogeCountDown() {
 if (Timer <= 0) {
 html = '<p><img src="' + imageZero + '" alt="imageZero" /></p>';
 html += '<button type="button" class="punch" onClick="hogeStart()">セーフ</button>';
 document.getElementById("disp").innerHTML = html;
 clearTimeout();
 } else {
 Timer--;
 html = '<img src="' + imageNum[Timer] + '" alt="counter" />';
 document.getElementById("disp").innerHTML = html;
 setTimeout(hogeCountDown, Wait);
 }
}
-->
</script>
</head>
<body onLoad="hogeInit()">
<article id="container">
 <header id="gHeader">
 </header>
 <section id="conts">
 <h1>笑うと罰ゲーム</h1>
 </section>
 <div id="disp"></div>
 <footer id="gFooter">
 </footer>
</article></body>
</html>

ypressjpさんのコメント
ありがとうございますー>< 徹夜あけで頭が働いておりませんので、後ほど確認させて頂きますーー。

ypressjpさんのコメント
拝見いたしました。こちらの希望通りの仕様で本当に助かりました!ソースをみて勉強させて頂きます。ありがとうございました!

2 ● a-kuma3
●100ポイント

こういうのは、jQuery のプラグインを使うと、お手軽にカッコよくできると思うな。

これを使って試してみました。
http://www.htmldrive.net/items/show/924/Cool-countdown-with-jquery-

jsdo.it で試してみたのがこちら。
http://jsdo.it/a-kuma3/bcHr

ソースコードの抜粋。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-countdown.googlecode.com/svn/trunk/js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

<script>
 $('#btn').click(function(){
 $('#counter').countdown({
 image: 'http://jquery-countdown.googlecode.com/svn/trunk/img/digits.png',
 startTime: '10',
 timerEnd: function(){ alert('おわったよ!'); },
 format: 'ss'
 });
 });
</script>

<button id="btn">start</button><br>
<div id="counter"></div>

ypressjpさんのコメント
拝見致しました。想定外のカウンターを紹介して頂いてこちらも急遽、製作中のページで使用させて頂きました。ベストアンサーをしたかったのですが、どちらにもすることができず申し訳ありません>< とても助かりました。ありがとございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ