测试反应速度js小游戏

稿源：互联网 2022-07-26 13:28:02 点击： 2865 撤稿纠错

一个网页小游戏，看你速度什么样了。

以下讨论的是和测试相关的测试反应速度js小游戏教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<TITLE>网页特效 网页小游戏 站长特效欢迎您。</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=JavaScript type=text/javascript>
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all  &&  !document.getElementById) ? true : false;
isIE5 = (document.all  &&  document.getElementById) ? true : false;
isNS6 = (!document.all  &&  document.getElementById) ? true : false;
var curX, curY, curX2, curY2, boxX, boxY, moving=0, touch=0;
var gametime=0, started=0, speed;
var starttime, endtime, finaltime=0; //pass finaltime to popup window to ask for initials
var enemyxdir = new Array(1,1,1,1);
var enemyydir = new Array(1,1,1,1);
if (isNS4 || isNS6){
document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEMOVE);
}
document.onmousedown = start;
document.onmousemove = checkLocation;
document.onmouseup = stop;
function startclock() {var today = new Date(); starttime = today.getTime();}
function endclock() {var today = new Date(); endtime = today.getTime();}
function calctime() {var time = (endtime - starttime - 0)/1000; return time;}
function giveposX(divname) {
if (isNS4) var posLeft = document.layers[divname].left;
else if (isIE4 || isIE5) var posLeft = document.all(divname).style.pixelLeft;
else if (isNS6) var posLeft = parseInt(document.getElementById(divname).style.left + "");
return posLeft;
}
function giveposY(divname) {
if (isNS4) var posTop = document.layers[divname].top;
else if (isIE4 || isIE5) var posTop = document.all(divname).style.pixelTop;
else if (isNS6) var posTop = parseInt(document.getElementById(divname).style.top + "");
return posTop;
}
function setposX(divname, xpos) {
if (isNS4) document.layers[divname].left = xpos;
else if (isIE4 || isIE5) document.all(divname).style.pixelLeft = xpos;
else if (isNS6) document.getElementById(divname).style.left = xpos;
}
function setposY(divname, ypos) {
if (isNS4) document.layers[divname].top = ypos;
else if (isIE4 || isIE5) document.all(divname).style.pixelTop = ypos;
else if (isNS6) document.getElementById(divname).style.top = ypos;
}
function givesize(divname, dimension) {
var divsize = 0;
if (dimension == 'y') {
if (isNS4) divsize = document.layers[divname].clip.height;
else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelHeight;
else if (isNS6) divsize = parseInt(document.getElementById(divname).style.height + "");
}
else if (dimension == 'x') {
if (isNS4) divsize = document.layers[divname].clip.width;
else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelWidth;
else if (isNS6) divsize = parseInt(document.getElementById(divname).style.width + "");
}
return divsize;
}
// check to see if 'box' is touching 'enemy1'
function checktouching(num) {
var enemy = "enemy" + num + ""
var difX = giveposX('box') - giveposX(enemy) - 0; // -0 converts to integer
var difY = giveposY('box') - giveposY(enemy) - 0;
// set touch = 1 if it is touching an enemy
if (difX > (-1 * givesize('box', 'x'))  &&  difX < givesize(enemy, 'x')  &&  difY > (-1 * givesize('box', 'y'))  &&  difY < givesize(enemy, 'y')) {
touch = 1;
}
else touch = 0;
}
function movenemy(num,step_x,step_y){
var enemy = "enemy" + num + ""
var enemyx = givesize(enemy, 'x');
var enemyy = givesize(enemy, 'y');
if (giveposX(enemy) >= (450 - enemyx) || giveposX(enemy) <= 0) {
enemyxdir[num] = -1 * enemyxdir[num];
}
if (giveposY(enemy) >= (450 - enemyy) || giveposY(enemy) <= 0) {
enemyydir[num] = -1 * enemyydir[num];
}
var newposx = giveposX(enemy) + (step_x*enemyxdir[num]) + 0;
var newposy = giveposY(enemy) + (step_y*enemyydir[num]) + 0;
setposX(enemy, newposx);
setposY(enemy, newposy);
checktouching(num + "");
if (touch == 1) {
stop(); reset();
}
}
function movenemies() {
gametime = gametime + 1
if (gametime >= 0  &&  gametime < 100) speed = 80;
else if (gametime >= 100  &&   gametime < 200) speed = 60;
else if (gametime >= 200  &&   gametime < 300) speed = 40;
else if (gametime >= 300  &&   gametime < 400) speed = 30;
else if (gametime >= 400  &&   gametime < 500) speed = 20;
else speed = 10;
// window.status = "speed:  " + speed + "   gametime: " + gametime;
movenemy(0,-10,12);
movenemy(1,-12,-20);
movenemy(2,15,-13);
movenemy(3,17,11);
setTimeout(movenemies,speed);
}
function start(e) {
if (started == 0) { movenemies();  startclock();  started = 1; }
curX = (isNS4 || isNS6) ? e.pageX : window.event.x ;
curY = (isNS4 || isNS6) ? e.pageY : window.event.y ;
curX2 = eval(curX - 40);
curY2 = eval(curY - 40);
boxX = eval(curX - 20);
boxY = eval(curY - 20);
var boxleft = giveposX('box');
var boxtop = giveposY('box');
if (curX > boxleft  &&  curX2 < boxleft  &&  curY > boxtop  &&  curY2 < boxtop) {
moving = 1;
setposX('box', boxX);
setposY('box', boxY);
if (isNS4 || isNS6){
document.captureEvents(Event.MOUSEMOVE);
}
}
}
function stop(e){
moving=0;
if (isNS4 || isNS6){
document.releaseEvents(Event.MOUSEMOVE);
}
}
function reset(e){
endclock();
moving=0;
if (isNS4 || isNS6){
document.releaseEvents(Event.MOUSEMOVE);
}
if (finaltime == 0) {
finaltime = calctime();
window.alert('你堅持了 ' + finaltime + ' 秒…');
//  var entername = window.confirm('Enter your name?');
//   if (entername) {
//   window.open("?" + finaltime,'winwin','width=300,height=500,left=40,top=40,status=1,resizable');
//   document.location.reload();
//   }
//   else document.location.reload();
document.location.reload();
}
}
function checkLocation(e){
curX = (isNS4 || isNS6) ? e.pageX : window.event.x ;
curY = (isNS4 || isNS6) ? e.pageY : window.event.y ;
boxX = eval(curX - 20);
boxY = eval(curY - 20);
checktouching('1');
if (moving == 1  &&  touch == 0){
setposX('box',boxX);
setposY('box',boxY);
if (curY > 69  &&  curX > 69  &&  curY < 381  &&  curX < 381) return false;
else stop(); reset();
}
else if (touch == 1){
stop(); reset();
}
}
</SCRIPT>
<META content="MSHTML 6.00.2900.5512" name=GENERATOR>
<style type="text/css">

</style>
</HEAD>
<BODY text=#000000 bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0"marginwidth="0">
<DIV id=box style="LEFT: 205px; WIDTH: 40px; POSITION: absolute; TOP: 205px; HEIGHT: 40px; BACKGROUND-COLOR: #990000; layer-background-color: #990000">
<TABLE height=30 width=30>
<TBODY>
<TR>
<TD> </TD></TD></TR></TBODY></TABLE></DIV>
<DIV id=enemy0 style="LEFT: 270px; WIDTH: 60px; POSITION: absolute; TOP: 60px; HEIGHT: 50px; BACKGROUND-COLOR: #000099; layer-background-color: #000099">
<TABLE height=50 width=60>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></DIV>
<DIV id=enemy1 style="LEFT: 300px; WIDTH: 100px; POSITION: absolute; TOP: 330px; HEIGHT: 20px; BACKGROUND-COLOR: #000099; layer-background-color: #000099">
<TABLE height=20 width=100>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></DIV>
<DIV id=enemy2 style="LEFT: 70px; WIDTH: 30px; POSITION: absolute; TOP: 320px; HEIGHT: 60px; BACKGROUND-COLOR: #000099; layer-background-color: #000099">
<TABLE height=60 width=30>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></DIV>
<DIV id=enemy3 style="LEFT: 67px; WIDTH: 60px; POSITION: absolute; TOP: 67px; HEIGHT: 60px; BACKGROUND-COLOR: #000099; layer-background-color: #000099">
<TABLE height=60 width=60>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR bgcolor="#333333">
<TD width=50 height=50 bgColor=#333333>
<TABLE>
<TBODY>
<TR>
<TD class="style1"></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width=50 bgColor=#333333 height=50>
<TABLE>
<TBODY>
<TR>
<TD class="style1"></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50 bgColor=#333333>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width=50 bgColor=#333333 height=50>
<TABLE>
<TBODY>
<TR>
<TD class="style1"></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50 bgColor=#333333>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width=50 bgColor=#333333 height=50>
<TABLE>
<TBODY>
<TR>
<TD class="style1"></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50 bgColor=#333333>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width=50 bgColor=#333333 height=50>
<TABLE>
<TBODY>
<TR>
<TD class="style1"></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50 bgColor=#333333>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width=50 bgColor=#333333 height=50>
<TABLE>
<TBODY>
<TR>
<TD class="style1"></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50 bgColor=#333333>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width=50 bgColor=#333333 height=50>
<TABLE>
<TBODY>
<TR>
<TD class="style1"></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50 bgColor=#333333>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width=50 bgColor=#333333 height=50>
<TABLE>
<TBODY>
<TR>
<TD class="style1"></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50 bgColor=#333333>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR>
<TR bgcolor="#333333">
<TD width=50 height=50 bgColor=#333333>
<TABLE>
<TBODY>
<TR>
<TD class="style1"></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD height=50>      <table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table></TD>
</TR></TBODY></TABLE>
<DIV id=layer1 style="Z-INDEX: 1; LEFT: 489px; WIDTH: 285px; POSITION: absolute; TOP: 6px; HEIGHT: 279px">
<table width="284" border="0">
<tr>
<td><span class="style9 style5"><strong>反应速度测试之-红色方块</strong></span></td>
</tr>
<tr>
<td><hr size="1"></td>
</tr>
</table>
<p class="style9 style5"><strong>游戏说明：</strong></p>
<p>用鼠标点住红色的方块来移动它:<BR>
<BR>
移动红色的方块来躲避蓝色方块<BR>
<BR>
不能碰到黑色的墻壁<BR>
<BR>
如果你能坚持18秒以上，你就是天才！<BR>
<BR>
据说美国空军要求玩到2分钟。 <BR><BR>
站长特效欢迎您。 <BR>
</p>
</DIV>
<br>
<FONT face=verdana,arial,helvetica size=2><BR>
</FONT>
<DIV id=layer1
style="Z-INDEX: 1; LEFT: 489px; WIDTH: 100px; POSITION: absolute; TOP: 351px; HEIGHT: 60px">
<p class="style9 style5"><BR>
</p>
<p><BR>
</p>
</DIV>
<DIV style="DISPLAY: none">
</DIV>
</BODY>
</HTML>

关于测试反应速度js小游戏的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010083064309.shtml方便下次再访问哦。

·上一篇： 弹出层css代码
·下一篇： js+css设计经典滑动门特效

测试反应速度js小游戏

文章分类LIST >>返回首页

最新游戏

最新新闻