- 浏览: 85611 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
cl1154781231:
怎么解决?
Node cannot be inserted at the specified point in the hierarchy -
sanshizi:
1927105 写道写文档的能力有待提高啊现在如何
一个下拉菜单效果的实现 -
sanshizi:
jacking124 写道看着不是很明白的加入了说明
一个下拉菜单效果的实现 -
sanshizi:
Chris_bing 写道有Jackson,Gson,json ...
将java类生成json -
Chris_bing:
有Jackson,Gson,json-smart那么多类库,干 ...
将java类生成json
读了一篇<<如何实现游戏主循环(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>
发表评论
-
javascript 各种编码转换, md5编码
2013-09-10 15:10 3793var hexcase=0;var b64pad=" ... -
微博分享
2013-09-10 09:58 1010/* * 微博分享 */ (function () ... -
javascript 图标库
2013-07-30 17:24 878[size=24px;]第1个: Highcharts[/si ... -
正则表达式简介, 正则表达式语法
2013-07-30 17:13 683正则表达式语法 一个正则表达式就是由普通字符(例如 ... -
通过ua检测浏览页面的设备是phone还是tablet
2013-06-02 15:03 2683通过ua检测浏览页面的设备是phone还是tablet ... -
jQuery serializeArray() 方法无效, 不起作用, 得不到数组
2013-05-10 14:59 1308jQuery.serializeArray() 方法无效, 不 ... -
根据userAgent值的特性判断客户端设备及浏览器类型
2013-01-11 09:55 4664文章写的太好了, 直接转了 原文链接:http://www. ... -
Node cannot be inserted at the specified point in the hierarchy
2012-12-24 18:35 3789今天搞代码firefox下发现一个报错: Timestamp ... -
一个下拉菜单效果的实现
2012-10-11 17:10 1742先前只是记录, 说的不够清楚,当然现在仍可能不够清晰. 阅读此 ... -
不同浏览器 选择Flash的方法
2012-07-13 11:07 1045选择Flash的方法 function getSWF( ... -
复制表单HTML内容, 且同时复制表单的最新值
2012-07-07 10:13 4176遇到一个小需求, 即得到一个页面某一块的html源码, 这段 ... -
打分效果学习
2012-07-02 23:34 1075<html> <head> ... -
Astar 学习
2012-07-02 18:56 745Astar寻路教程 http://www.cnblogs.c ... -
[转] 魔兽技能冷却效果(绝佳思路)
2012-06-28 16:03 1031非常非常的聪明的方法, 有创意, 五体投地 <!D ... -
[转]JavaScript 学习 - 提高篇
2012-06-26 16:32 742JavaScript 学习 - 提高篇 一. JavaSc ... -
Javascript 游戏时钟小试
2012-06-25 19:35 695读了一篇<<如何实现游戏主循环(Game Loop ... -
IE6背景图片重绘
2012-06-22 10:58 881今天用jquery做一个块滑动效果, 发现ie6每次动作都要 ... -
Google地图API使用demo
2012-06-13 09:33 7705<html xmlns="http:/ ... -
坑爹的base标签啊
2012-06-01 14:42 699直接看代码 <base href="ht ... -
IE6中使用PNG, 透明
2012-06-01 14:43 785使用方法: <!--[if IE 6]> & ...
相关推荐
JavaScript 背景时钟实现方法是一种使用 JavaScript 实现时钟背景效果的方法,该方法主要介绍了 JavaScript 背景时钟实现方法,涉及 JavaScript 时间及页面元素样式的相关操作技巧。 时钟显示位置 在该方法中,...
"倒影时钟 javascript" 这个标题提到了两个主要概念:倒影时钟和JavaScript。倒影时钟是一种显示时间的视觉效果,它在设计上模拟了物体在水面或其他平面上产生的倒影,为网页增添了动态和美感。而JavaScript是一种...
JavaScript 12小时制时钟是一种常见的编程任务,它用于在网页上显示当前时间,以12小时格式(AM/PM)表示。在JavaScript中,我们可以利用内置的Date对象和一些基本的字符串处理来实现这一功能。下面我们将深入探讨...
这里的`<style>`标签定义了时钟显示的样式,而`<script>`标签则链接了一个名为`script.js`的外部JavaScript文件,这个文件将包含实现时钟功能的代码。 接下来,我们讨论JavaScript部分。`script.js`文件会包含一个...
本篇内容主要围绕如何使用JavaScript编程语言制作一个动态时钟效果,包括显示当前日期和时间,并且每秒更新一次,这种动态时钟在网页设计中能够提供实时的用户体验。 首先,需要了解JavaScript是一种高级的、解释型...
JavaScript动态时钟是一种常见的网页交互元素,用于实时显示当前时间,增强用户界面的活力与互动性。本主题将深入探讨如何使用JavaScript实现一个动态更新的时钟,包括基础概念、核心代码以及相关知识点。 首先,...
<title>JavaScript时钟 <div id="clock"></div> <script src="clock.js"></script> ``` 接下来,我们使用CSS(层叠样式表)来设计时钟的样式。在`clock.css`文件中,我们可以设置时钟的背景、边框、字体等...
### JavaScript数字时钟代码解析与实现 #### 一、引言 在现代Web开发中,动态显示时间的应用非常广泛,从简单的网站时钟到复杂的实时数据更新,都离不开对当前时间的准确把握。本文将深入解析一个基于JavaScript的...
在本主题中,我们将深入探讨“纯JavaScript时钟”这一经典特效,它展示了JavaScript如何实时更新页面上的时间显示,无需依赖任何外部库,如jQuery。 在纯JavaScript时钟中,我们首先需要理解JavaScript的时间处理...
JavaScript 小游戏代码汇总 JavaScript 是一种广泛使用的脚本语言,常用于开发 web ...JavaScript 小游戏代码汇总展示了 JavaScript 语言在游戏开发中的应用,包括游戏逻辑、游戏对象、游戏事件和游戏状态等方面。
### 使用JavaScript创建动态时钟背景特效详解 #### 一、项目背景与意义 在现代网页设计中,添加一些动态元素可以极大地提升用户体验和网站的视觉吸引力。本文介绍了一个使用JavaScript实现的动态时钟背景特效,它...
JavaScript动态时钟源代码概述 本资源提供了一个使用JavaScript编写的动态时钟源代码,用于实时显示当前时间和日期。该代码使用HTML、JavaScript和CSS技术实现动态时钟的功能。 JavaScript动态时钟源代码知识点 1...
这款炫酷的网页时钟是通过JavaScript技术实现的,为网页增添了一抹时尚和创意的色彩。时钟界面设计简洁美观,融合了令人惊艳的动态效果,为用户提供了一种全新的时间感知体验。 通过巧妙运用JavaScript编写的时钟...
JavaScript Flip时钟是一种独特的时间显示方式,它模拟了传统翻页钟的工作原理,通过翻转数字卡片来展示当前时间。这种设计风格在网页和应用程序中常用于增添视觉吸引力和交互体验。下面将详细介绍JavaScript Flip...
在JavaScript和CSS3的世界里,实现一个旋转时钟是一个典型的动画效果应用。本文将深入探讨如何使用`rotate`属性和`transform`函数在JavaScript中创建一个兼容多种浏览器的旋转时钟。 首先,让我们理解`transform`这...
在这个场景中,我们讨论的是一个用JavaScript实现的时钟。时钟是计算机编程中一个基础但实用的例子,它展示了如何利用JavaScript的Date对象以及DOM操作来实时更新页面上的时间显示。 首先,我们要理解JavaScript的...
在这个"javascript时钟.zip"压缩包中,我们很显然关注的是如何使用JavaScript来实现一个实时更新的时钟功能。这个功能对于网页开发者来说非常重要,因为它能够帮助用户了解当前时间,增强用户体验。 在JavaScript中...
【JavaScript实现的时钟】 在Web开发中,JavaScript是一种不可或缺的脚本语言,它能够为网页增添交互性和实时性。本示例中的“JavaScript写出的时钟”就是一个很好的实例,展示了如何利用JavaScript、HTML和CSS这三...
本文件为语言实现通讯录的管理系统,采用三层架构,希望大家共同学习
js 特效 html 特效 纯JavaScript时钟 js 特效 html 特效 纯JavaScript时钟