读了一篇<<如何实现游戏主循环(Game Loop)的详细解析>> 的文章, 用javascript实现一下,目前仍没有完全参透其中含义, 出来的效果不能另人满意
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>Javascript 游戏时钟小试</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<style type="text/css">
body{font-size: 14px;}
.wrap{border:solid 1px #f60; width:500px; height:300px; position:relative;}
.item{border:solid 1px #660; line-height:30px; height:30px;}
.red{color:red;}
.block{width:10px;height:10px;background-color:#aaa;position:absolute;z-index:10000;line-height:0;font-size:0;}
.ss{width:1px;height:14px;background-color:#eee;color:#ff0;line-height:0;font-size:10px;line-height: 14px;margin-top: 1px;}
#debug{position:fixed; border:solid 1px #f60; width:600px;height:100%;right:0;top: 0;overflow: scroll;}
</style>
</head>
<body>
<a href="javascript:start()">start</a> |
<a href="javascript:pause()">pause</a> |
addBlock<a href="javascript:addBlock()">[1]</a><a href="javascript:addBlock2()">[10]</a>(<span id="blocks">0</span>) |
Frame: <span id='Frame'>0</span> |
SkipedFrame: <span id='skipFrame'>0</span> |
<a href="javascript:big()">复杂计算</a> |
<a href="javascript:$('#debug')">ClearDebug</a>
<div class="wrap" id="msg">
<div id="block-x" class="block" style="top:20px;left:0;background-color:#f60;"></div>
</div>
<div class="wrap">
<div class='ss' id='s_0'></div>
<div class='ss' id='s_1'></div>
<div class='ss' id='s_2'></div>
<div class='ss' id='s_3'></div>
<div class='ss' id='s_4'></div>
<div class='ss' id='s_5'></div>
<div class='ss' id='s_6'></div>
<div class='ss' id='s_7'></div>
<div class='ss' id='s_8'></div>
<div class='ss' id='s_9'></div>
<div class='ss' id='s_10'></div>
<div class='ss' id='s_11'></div>
<div class='ss' id='s_12'></div>
<div class='ss' id='s_13'></div>
<div class='ss' id='s_14'></div>
<div class='ss' id='s_15'></div>
<div class='ss' id='s_16'></div>
<div class='ss' id='s_17'></div>
<div class='ss' id='s_18'></div>
<div class='ss' id='s_19'></div>
</div>
<div id="debug"></div>
<script type="text/javascript">
//模拟复杂计算
function big(){
//b = (new Date()).getTime();
var i=0;
while(i++ <500000){
(new Date()).getTime();
}
//alert((new Date()).getTime() - b);
}
function GetTickCount(){return (new Date()).getTime();}
var fps = 25;
var SKIP_TICKS = 1000 / fps;
var MAX_FRAMESKIP = 5;
var next_game_tick = GetTickCount();
var game_is_running = false;
var interpolation = 0, loop = 0;
var nowFrame = 0;
var skipFrame = 0;
var speed = 50;// px/s
var timer;
var time_interval = 10;
var x = 0;
var $bbbox=$('#block-x');
function start(){
if(game_is_running === true) return;
game_is_running = true;
next_game_tick = GetTickCount();
timer = setInterval(function(){
loops = 0;
while( GetTickCount() > next_game_tick && loops < MAX_FRAMESKIP) {
update_game();
next_game_tick += SKIP_TICKS;
loops++;
skipFrame += loops > 1 ? 1 : 0;
//debug(x)
//$bbbox.width(x + 10);
}
interpolation = ( GetTickCount() + SKIP_TICKS - next_game_tick ) / SKIP_TICKS;
display_game( interpolation );
},time_interval);
}
function pause(){
clearInterval(timer);
game_is_running = false;
}
function update_game(){
nowFrame++;
var i,l;
for(i=0,l=arr1.length;i<l;i++){
next(arr2[i]);
}
}
function debug(){
var x='';
for(var j=0,len=arguments.length;j<len;j++){
x+=' | ' + arguments[j];
}
$('#debug').prepend(x + '<br >')
x = null;
}
var arr_c = [];
function c(interpolation){
arr_c.push(interpolation);
while(arr_c.length>20) arr_c = arr_c.slice(1);
var i;
for(i=0,len=arr_c.length;i<len;i++){
$('#s_'+i).css({width : arr_c[i] * 100 + 50});//.html(arr_c[i])
}
}
//0,1,2,3,4,5
function next(arr){
arr[0] += arr[2] * arr[4] * SKIP_TICKS ;
if(arr[0]<0){
arr[0] = 0;
arr[2] *= -1;
}else if(arr[0]>=490){
arr[0] = 490;
arr[2] *= -1;
}
arr[1] += arr[3] * arr[5] * SKIP_TICKS;
if(arr[1]<0){
arr[1] = 0;
arr[3] *= -1;
}else if(arr[1]>290){
arr[1] = 290;
arr[3] *= -1;
}
}
var arr1 = [];
var arr2 = [];//[x,y,1,1,speed_x,speed_y]
function display_game(interpolation){
$('#Frame').html(nowFrame);
$('#skipFrame').html(skipFrame);
var i,l;
for(i=0,l=arr1.length;i<l;i++){
//debug(arr2[i][0], arr2[i][1]* interpolation)
$(arr1[i]).css({left : arr2[i][0] , top : arr2[i][1]});
}
c(interpolation);
//模拟很卡
//if(Math.random()>0.99) big();
}
function addBlock(){
var block = $('<div class="block" id="b'+ arr1.length +'"></div>');
$('#msg').append(block);
var a = Math.random() * speed / 1.1 + 2;
var b = Math.sqrt(speed * speed - a * a);
arr2.push([0,0,1,1,a/1000,b/1000]);
arr1.push(block);
block = null;
$('#blocks').html(arr1.length);
}
function addBlock2(){
var _i=0;
while(_i++ <10) addBlock();
}
</script>
</body>
</html>