Javascript 游戏时钟控制小试[讨论]_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方技术论坛-国内领先的Weblogic、Tuxedo中间件技术论坛
联动北方-国内领先的云技术服务提供商
»  游客             当前位置：  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3320 | 回复: 0   主题： Javascript 游戏时钟控制小试[讨论]        下一篇 
jfl
注册用户
等级：少校
经验：1112
发帖：95
精华：0
注册：2012-8-10
状态：离线
发送短消息息给jfl 加好友    发送短消息息给jfl 发消息
发表于： IP：您无权察看 2012-8-24 9:28:38 | [全部帖] [楼主帖] 楼主
Html代码
北京联动北方科技有限公司北京联动北方科技有限公司北京联动北方科技有限公司

  2. <html> 
  3.  <head> 
  4.  <meta http-equiv=Content-Type content="text/html;charset=utf-8"> 
  5.  <title>Javascript 游戏时钟小试</title> 
  6.  <script type="text/javascript" src="jquery-1.6.4.js"></script> 
  7.  <style type="text/css"> 
  8.  body{font-size: 14px;} 
  9.  .wrap{border:solid 1px #f60; width:500px; height:300px; position:relative;} 
  10.  .item{border:solid 1px #660; line-height:30px; height:30px;} 
  11.  .red{color:red;} 
  12.  .block{width:10px;height:10px;background-color:#aaa;position:absolute;z-index:10000;line-height:0;font-size:0;} 
  13.  .ss{width:1px;height:14px;background-color:#eee;color:#ff0;line-height:0;font-size:10px;line-height: 14px;margin-top: 1px;} 
  14.  #debug{position:fixed; border:solid 1px #f60; width:600px;height:100%;right:0;top: 0;overflow: scroll;} 
  15.  </style> 
  16.  </head> 
  17.  <body> 
  18.  <a href="javascript:start()">start</a> | 
  19.  <a href="javascript:pause()">pause</a> | 
  20.  addBlock<a href="javascript:addBlock()">[1]</a><a href="javascript:addBlock2()">[10]</a>(<span id="blocks">0</span>) | 
  21.  Frame: <span id='Frame'>0</span> | 
  22.  SkipedFrame: <span id='skipFrame'>0</span> | 
  23.  <a href="javascript:big()">复杂计算</a> | 
  24.  <a href="javascript:$('#debug')">ClearDebug</a> 
  25.  <div class="wrap" id="msg"> 
  26.  <div id="block-x" class="block" style="top:20px;left:0;background-color:#f60;"></div> 
  27.  </div> 
  28.  <div class="wrap"> 
  29.  <div class='ss' id='s_0'></div> 
  30.  <div class='ss' id='s_1'></div> 
  31.  <div class='ss' id='s_2'></div> 
  32.  <div class='ss' id='s_3'></div> 
  33.  <div class='ss' id='s_4'></div> 
  34.  <div class='ss' id='s_5'></div> 
  35.  <div class='ss' id='s_6'></div> 
  36.  <div class='ss' id='s_7'></div> 
  37.  <div class='ss' id='s_8'></div> 
  38.  <div class='ss' id='s_9'></div> 
  39.  <div class='ss' id='s_10'></div> 
  40.  <div class='ss' id='s_11'></div> 
  41.  <div class='ss' id='s_12'></div> 
  42.  <div class='ss' id='s_13'></div> 
  43.  <div class='ss' id='s_14'></div> 
  44.  <div class='ss' id='s_15'></div> 
  45.  <div class='ss' id='s_16'></div> 
  46.  <div class='ss' id='s_17'></div> 
  47.  <div class='ss' id='s_18'></div> 
  48.  <div class='ss' id='s_19'></div> 
  49.  </div> 
  50.  <div id="debug"></div> 
  52.  <script type="text/javascript"> 
  53.  //模拟复杂计算 
  54.  function big(){ 
  55.        //b = (new Date()).getTime(); 
  56.        var i=0; 
  57.        while(i++ <500000){ 
  58.              (new Date()).getTime(); 
  59.        } 
  60.        //alert((new Date()).getTime() - b); 
  61.  } 
  62.  
  63.  function GetTickCount(){return (new Date()).getTime();} 
  64.  
  65.  var fps = 25; 
  66.  var SKIP_TICKS = 1000 / fps; 
  67.  var MAX_FRAMESKIP = 5; 
  68.  var next_game_tick = GetTickCount(); 
  69.  var game_is_running = false; 
  70.  var interpolation = 0, loop = 0; 
  71.  var nowFrame = 0; 
  72.  var skipFrame = 0; 
  73.  var speed = 50;// px/s 
  74.  var timer; 
  75.  var time_interval = 10; 
  76.  var x = 0; 
  77.  var $bbbox=$('#block-x'); 
  78.  
  79.  function start(){ 
  80.        if(game_is_running === true) return; 
  81.        game_is_running = true; 
  82.        next_game_tick = GetTickCount(); 
  83.        timer = setInterval(function(){ 
  84.              loops = 0; 
  85.              while( GetTickCount() > next_game_tick && loops < MAX_FRAMESKIP) { 
  86.                    update_game(); 
  87.                    next_game_tick += SKIP_TICKS; 
  88.                    loops++; 
  89.                    skipFrame += loops > 1 ? 1 : 0; 
  90.                    //debug(x) 
  91.                    //$bbbox.width(x + 10); 
  92.              } 
  93.              
  94.              interpolation = ( GetTickCount() + SKIP_TICKS - next_game_tick ) / SKIP_TICKS; 
  95.              display_game( interpolation ); 
  96.              
  97.        },time_interval); 
  98.  } 
  99.  
  100.  function pause(){ 
  101.        clearInterval(timer); 
  102.        game_is_running = false; 
  103.  } 
  104.  
  105.  function update_game(){ 
  106.        nowFrame++; 
  107.        var i,l; 
  108.        for(i=0,l=arr1.length;i<l;i++){ 
  109.              next(arr2[i]); 
  110.        } 
  111.  } 
  113.  function debug(){ 
  114.        var x=''; 
  115.        for(var j=0,len=arguments.length;j<len;j++){ 
  116.              x+=' | ' + arguments[j]; 
  117.        } 
  118.        $('#debug').prepend(x + '<br >') 
  119.        x = null; 
  120.  } 
  122.  var arr_c = []; 
  123.  function c(interpolation){ 
  124.        arr_c.push(interpolation); 
  125.        while(arr_c.length>20) arr_carr_c = arr_c.slice(1); 
  126.        var i; 
  127.        for(i=0,len=arr_c.length;i<len;i++){ 
  128.        $('#s_'+i).css({width : arr_c[i] * 100 + 50});//.html(arr_c[i]) 
  129.        } 
  130.  } 
  132.  //0,1,2,3,4,5 
  133.  function next(arr){ 
  134.        arr[0] += arr[2] * arr[4] * SKIP_TICKS ; 
  135.        if(arr[0]<0){ 
  136.              arr[0] = 0; 
  137.              arr[2] *= -1; 
  138.        }else if(arr[0]>=490){ 
  139.        arr[0] = 490; 
  140.        arr[2] *= -1; 
  141.  } 
  142.  
  143.  arr[1] += arr[3] * arr[5] * SKIP_TICKS; 
  144.  if(arr[1]<0){ 
  145.        arr[1] = 0; 
  146.        arr[3] *= -1; 
  147.  }else if(arr[1]>290){ 
  148.  arr[1] = 290; 
  149.  arr[3] *= -1; 
  150.  } 
  151.  } 
  152.  
  153.  var arr1 = []; 
  154.  var arr2 = [];//[x,y,1,1,speed_x,speed_y] 
  155.  function display_game(interpolation){ 
  156.        $('#Frame').html(nowFrame); 
  157.        $('#skipFrame').html(skipFrame); 
  158.        var i,l; 
  159.        for(i=0,l=arr1.length;i<l;i++){ 
  160.              //debug(arr2[i][0], arr2[i][1]* interpolation) 
  161.        $(arr1[i]).css({left : arr2[i][0] , top : arr2[i][1]}); 
  162.        } 
  163.       
  164.        c(interpolation); 
  165.        
  166.        //模拟很卡 
  167.        //if(Math.random()>0.99) big(); 
  168.  } 
  170.  
  171.  function addBlock(){ 
  172.        var block = $('<div class="block" id="b'+ arr1.length +'"></div>'); 
  173.        $('#msg').append(block); 
  174.        var a = Math.random() * speed / 1.1 + 2; 
  175.        var b = Math.sqrt(speed * speed - a * a); 
  176.        arr2.push([0,0,1,1,a/1000,b/1000]); 
  177.        arr1.push(block); 
  178.        block = null; 
  179.        $('#blocks').html(arr1.length); 
  180.  } 
  182.  function addBlock2(){ 
  183.        var _i=0; 
  184.        while(_i++ <10) addBlock(); 
  185.  } 
  186.  
  188.  </script> 
  191.  </body> 
  192. </html> 


赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码： 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论

Weblogic中间件技术论坛

 |

Tuxedo中间件技术论坛

 |

数据库论坛

 |

Java论坛

 |

Linux/unix论坛

 |

网站地图


Powered by LandingBJ     @ 2008-2018     联动北方   
京ICP证号090597    京ICP备案09017624号    京公网安备110112000093号    
400-810-2327     Email：service@landingbj.com   

Powered by landingbj @ 2008-2015 联动北方
京ICP证号090597 京ICP备案09017624号 京公网安备110112000093号
86-27-87056338 Email：service@landingbj.com