ゲームだとアニメーションなども必要になるのではないでしょうか？
ご質問の状態だとななんだか、心もとないような…
雰囲気のサンプルです。
専用の関数にすればもう少し短くなりますし、余分な機能を省けば簡単になるかと。
ページ遷移などは、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>
