Javascript 游戏时钟小试 -

sanshizi

浏览: 85720 次
性别:
来自: 南京

最近访客更多访客>>

p645213851

goylsf

q641529

henry2212

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Javascript 游戏时钟小试

博客分类：

Javascript

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(){
				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>

分享到：

[转]JavaScript 学习 - 提高篇 | IE6背景图片重绘

2012-06-25 19:35
浏览 696
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Javascript 游戏时钟小试

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Javascript 游戏时钟小试

评论

发表评论

相关推荐

javascript 各种编码转换, md5编码

微博分享

javascript 图标库

正则表达式简介, 正则表达式语法

通过ua检测浏览页面的设备是phone还是tablet

jQuery serializeArray() 方法无效, 不起作用, 得不到数组

根据userAgent值的特性判断客户端设备及浏览器类型

Node cannot be inserted at the specified point in the hierarchy

一个下拉菜单效果的实现

不同浏览器 选择Flash的方法

复制表单HTML内容, 且同时复制表单的最新值

打分效果学习

Astar 学习

[转] 魔兽技能冷却效果（绝佳思路）

Javascript 游戏时钟小试

[转]JavaScript 学习 - 提高篇

IE6背景图片重绘

Google地图API使用demo

坑爹的base标签啊

IE6中使用PNG, 透明

最近访客更多访客>>

不同浏览器选择Flash的方法