Javascript 游戏钟表小试-JavaSript-爱易网页

Javascript 游戏钟表小试

日期：2014-05-16　浏览次数：20410 次

Javascript 游戏时钟小试
读了一篇<<如何实现游戏主循环(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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Javascript 游戏钟表小试

相关资料更多>

推荐阅读更多>