浏览 2411 次
锁定老帖子 主题:Javascript 游戏时钟控制小试
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2012-06-26
最后修改:2012-06-26
高手来评价一二 <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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |