|
|
读了一篇<<如何实现游戏主循环(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>start |pause |addBlock[1][10](<span id="blocks">0</span>) |Frame: <span id='Frame'>0</span> |SkipedFrame: <span id='skipFrame'>0</span> |复杂计算 |ClearDebug<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/svar 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,5function 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> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡