`
sanshizi
  • 浏览: 86007 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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>
		[url=javascript:start()]start[/url] |
		[url=javascript:pause()]pause[/url] |
		addBlock[url=javascript:addBlock()][1][/url][url=javascript:addBlock2()][10][/url](<span id="blocks">0</span>) |
		Frame: <span id='Frame'>0</span> |
		SkipedFrame: <span id='skipFrame'>0</span> |
		[url=javascript:big()]复杂计算[/url] |
		[url=javascript:$('#debug')]ClearDebug[/url]
		<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>

0
0
分享到:
评论

相关推荐

    javascript实现动态时钟

    在JavaScript编程中,动态时钟是一种常见的练习,用于学习时间的获取、处理和显示。这个项目的核心在于利用JavaScript的Date对象来实时获取当前时间,并通过CSS3来展示一个具有动态效果的时钟界面。 首先,...

    javascript背景时钟实现方法.docx

    JavaScript 背景时钟实现方法是一种使用 JavaScript 实现时钟背景效果的方法,该方法主要介绍了 JavaScript 背景时钟实现方法,涉及 JavaScript 时间及页面元素样式的相关操作技巧。 时钟显示位置 在该方法中,...

    倒影时钟 javascript 倒影 时钟 源码 html IE

    "倒影时钟 javascript" 这个标题提到了两个主要概念:倒影时钟和JavaScript。倒影时钟是一种显示时间的视觉效果,它在设计上模拟了物体在水面或其他平面上产生的倒影,为网页增添了动态和美感。而JavaScript是一种...

    原生JavaScript数字时钟-内含29种样式

    在本文中,我们将深入探讨如何使用原生JavaScript创建一个数字时钟,并且涵盖29种不同的样式。这个项目不仅展示了JavaScript的基本概念,还涉及到CSS和HTML的交互,以及动态更新页面内容的技术。让我们一起深入了解...

    javascript时钟

    JavaScript 12小时制时钟是一种常见的编程任务,它用于在网页上显示当前时间,以12小时格式(AM/PM)表示。在JavaScript中,我们可以利用内置的Date对象和一些基本的字符串处理来实现这一功能。下面我们将深入探讨...

    基于JavaScript的数字时钟

    在这个场景中,我们讨论的是一个用JavaScript实现的数字时钟,它旨在实时显示当前时间,并且针对不同的浏览器(如Internet Explorer和Firefox)进行了兼容性优化。 首先,让我们深入了解一下JavaScript数字时钟的...

    javascript+html实现的时钟

    这里的`&lt;style&gt;`标签定义了时钟显示的样式,而`&lt;script&gt;`标签则链接了一个名为`script.js`的外部JavaScript文件,这个文件将包含实现时钟功能的代码。 接下来,我们讨论JavaScript部分。`script.js`文件会包含一个...

    基于javascript实现动态时钟效果

    本篇内容主要围绕如何使用JavaScript编程语言制作一个动态时钟效果,包括显示当前日期和时间,并且每秒更新一次,这种动态时钟在网页设计中能够提供实时的用户体验。 首先,需要了解JavaScript是一种高级的、解释型...

    javascript动态时钟

    JavaScript动态时钟是一种常见的网页交互元素,用于实时显示当前时间,增强用户界面的活力与互动性。本主题将深入探讨如何使用JavaScript实现一个动态更新的时钟,包括基础概念、核心代码以及相关知识点。 首先,...

    JavaScript开发一个时钟

    &lt;title&gt;JavaScript时钟 &lt;div id="clock"&gt;&lt;/div&gt; &lt;script src="clock.js"&gt;&lt;/script&gt; ``` 接下来,我们使用CSS(层叠样式表)来设计时钟的样式。在`clock.css`文件中,我们可以设置时钟的背景、边框、字体等...

    Javascript数字时钟代码

    ### JavaScript数字时钟代码解析与实现 #### 一、引言 在现代Web开发中,动态显示时间的应用非常广泛,从简单的网站时钟到复杂的实时数据更新,都离不开对当前时间的准确把握。本文将深入解析一个基于JavaScript的...

    javascript经典特效---纯JavaScript时钟.rar

    在本主题中,我们将深入探讨“纯JavaScript时钟”这一经典特效,它展示了JavaScript如何实时更新页面上的时间显示,无需依赖任何外部库,如jQuery。 在纯JavaScript时钟中,我们首先需要理解JavaScript的时间处理...

    JavaScript Canvas绘制时钟

    在这个场景中,我们将深入探讨如何使用JavaScript和Canvas API来创建一个实时更新的时钟。 首先,我们需要在HTML中创建一个`&lt;canvas&gt;`元素,它是JavaScript画布的基础: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;...

    用JavaScript创建超酷时钟背景特效

    ### 使用JavaScript创建动态时钟背景特效详解 #### 一、项目背景与意义 在现代网页设计中,添加一些动态元素可以极大地提升用户体验和网站的视觉吸引力。本文介绍了一个使用JavaScript实现的动态时钟背景特效,它...

    javascript动态时钟源代码.docx

    JavaScript动态时钟源代码概述 本资源提供了一个使用JavaScript编写的动态时钟源代码,用于实时显示当前时间和日期。该代码使用HTML、JavaScript和CSS技术实现动态时钟的功能。 JavaScript动态时钟源代码知识点 1...

    javascript实现炫酷的网页版时钟

    这款炫酷的网页时钟是通过JavaScript技术实现的,为网页增添了一抹时尚和创意的色彩。时钟界面设计简洁美观,融合了令人惊艳的动态效果,为用户提供了一种全新的时间感知体验。 通过巧妙运用JavaScript编写的时钟...

    javascript flip 时钟

    JavaScript Flip时钟是一种独特的时间显示方式,它模拟了传统翻页钟的工作原理,通过翻转数字卡片来展示当前时间。这种设计风格在网页和应用程序中常用于增添视觉吸引力和交互体验。下面将详细介绍JavaScript Flip...

    javascript 旋转时钟 使用rotate属性 transform 兼容版本

    在JavaScript和CSS3的世界里,实现一个旋转时钟是一个典型的动画效果应用。本文将深入探讨如何使用`rotate`属性和`transform`函数在JavaScript中创建一个兼容多种浏览器的旋转时钟。 首先,让我们理解`transform`这...

    一个javascript做的时钟

    在这个场景中,我们讨论的是一个用JavaScript实现的时钟。时钟是计算机编程中一个基础但实用的例子,它展示了如何利用JavaScript的Date对象以及DOM操作来实时更新页面上的时间显示。 首先,我们要理解JavaScript的...

    javascript时钟.zip

    在这个"javascript时钟.zip"压缩包中,我们很显然关注的是如何使用JavaScript来实现一个实时更新的时钟功能。这个功能对于网页开发者来说非常重要,因为它能够帮助用户了解当前时间,增强用户体验。 在JavaScript中...

Global site tag (gtag.js) - Google Analytics