JavaScriptでゲーム作成

締切済

質問者：cbmthk
質問日時：2013/01/31 10:42
回答数：1件

今JavaScriptを使ってゲームを作っています。

同じ色のブロックを３つ揃えると消えるという感じのゲームなのですが、
タイマーのつけ方がわかりません。

スタートボタンを押すとタイマーが減り、
０になると別画面に飛ばしたいのですがわかりません。

よろしくおねがいします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2013/02/01 12:02

ゲームだとアニメーションなども必要になるのではないでしょうか？

ご質問の状態だとななんだか、心もとないような…

雰囲気のサンプルです。
専用の関数にすればもう少し短くなりますし、余分な機能を省けば簡単になるかと。
ページ遷移などは、callbackで指定すような仕組みにしています。

サンプルなので解説なしです。（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">
var Timer = (function(){
　var timer = function(id){
　　this.timerId =　null,
　　this.callback = null,
　　this.baseTime = 0,
　　this.time = 0,
　　this.target = document.getElementById(id);
　}

　var disp = function(){
　　var msec = this.time>0? this.time: 0;
　　this.target.innerHTML = (msec/1000 + 0.5 | 0);
　}

timer.prototype = {
　start : function(time, func){
　　if(!this.callback){
　　　this.time = (time || 0) * 1000;
　　　this.callback = func || new Function();
　　}
　　this.baseTime = +(new Date()) + this.time;
　　disp.call(this);
　　var obj = this;
　　this.timerId = setInterval(function(){
　　　obj.time = obj.baseTime - new Date();
　　　disp.call(obj);
　　　if(obj.time<=0){
　　　　var f = obj.callback;
　　　　obj.reset();
　　　　if(typeof f === "function") f();
　　　}
　　}, 200);
　},

　stop : function(){
　　clearInterval(this.timerId);
　},

　reset : function(){
　　this.stop();
　　this.timerId = null;
　　this.callback = null;
　　this.time = 0;
　　disp.call(this);
　}
}

return function(id){ return new timer(id); }

})();
</script>
</head>

<body>
<div id="test" style="font-size:3em;">0</div>

<div>
<input type="button" value="start" onclick="test.start(20, function(){alert('TIME UP!');})">
<input type="button" value="pause" onclick="test.stop()">
<input type="button" value="reset" onclick="test.reset()">
</div>

<script>
var test = Timer("test");
</script>
</body>
</html>