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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/02/10 15:30:00
  • 終了:2012/02/10 22:13:46

ベストアンサー

id:oil999 No.1

oil999回答回数1728ベストアンサー獲得回数3202012/02/10 16:57:41

ポイント100pt

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

数字の画像は、配列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>
id:ypressjp

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

2012/02/10 17:36:05
id:ypressjp

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

2012/02/10 22:15:27

その他の回答(1件)

id:oil999 No.1

oil999回答回数1728ベストアンサー獲得回数3202012/02/10 16:57:41ここでベストアンサー

ポイント100pt

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

数字の画像は、配列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>
id:ypressjp

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

2012/02/10 17:36:05
id:ypressjp

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

2012/02/10 22:15:27
id:a-kuma3 No.2

a-kuma3回答回数4595ベストアンサー獲得回数19342012/02/10 18:29:33

ポイント100pt

こういうのは、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>
id:ypressjp

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

2012/02/10 22:17:59
  • id:Cherenkov
    スタートボタンのページと画像を表示するページは分かれてたほうがいいのですか?
  • id:ypressjp
    いえ、別れていなくても問題ないです〜。
  • id:ypressjp
    >Cherenkov
    ご覧頂いてありがとうございました。
    おかげさまでなんとかページが作成できそうです。本当にありがとうございます。 

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません