鼠标点击游戏-反应速度测试

2024-09-05 12:22:19

字体：大中小

来源：转载

供稿：网友

一个测试反应速度的小游戏，鼠标点击游戏，开始游戏后，用鼠标点击方格上随机出现的小方块，时间非常快，可锻炼反应能力，用户界面写的挺不错，游戏代码简单，希望大家喜欢。

<HTML><HEAD><TITLE>鼠标点击游戏</TITLE><STYLE type=text/css>BODY {MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"}A {FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none}A:hover {FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline}A:active {FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033}.STYLE1 {	font-family: "微软雅黑";	font-size: 40px;	color: #990066;}.STYLE2 {	font-family: "华文行楷";	font-weight: bold;	font-size: 30px;	color: #99CC66;}</STYLE><META http-equiv=Content-Type content="text/html; charset=gb2312"></HEAD><BODY bgColor=#fef4d9 onload=javascript:animate();><CENTER>  <span class="STYLE1">鼠标点击游戏</span></CENTER><BR><CENTER><TABLE borderColor=#99CCFF border=5 borderlight="green">  <TBODY>  <TR>    <TD align=left><SCRIPT language=javascript>var index;var objBox;var box;var iTimesAnimate;var blnGameStarted;var wrongClicks;var TotalDisplay;index=10;blnGameStarted = false;wrongClicks=0;TotalDisplay = 0;function changeColorOn(abc){	abc.color="white";	abc.backgroundColor="black"}function changeColorOff(abc){	abc.color="black";	abc.backgroundColor="white"}function animate(){	document.buzzy.btnStart.disabled = true;	if(index < 102)	{		document.all[index-1].style.backgroundColor="white";		document.all[index].style.backgroundColor="yellowgreen";		setTimeout('animate()',75);		index = index + 1;	}	else	{		setTimeout('document.all[101].style.backgroundColor="white"',75);		initialize();	}}function checkClick(objBox1){	if(blnGameStarted)	{		objBox = objBox1;		if(objBox.backgroundColor == "yellowgreen")		{			document.buzzy.txtScore.value = eval(document.buzzy.txtScore.value) + 1;		}		else		{			wrongClicks = wrongClicks + 1;			objBox.backgroundColor = "red";			setTimeout('objBox.backgroundColor = "white"',200);		}	}}function getRandom(){	return (Math.round(Math.random()*(97-9)))+9;}function highlightBox(){	if(blnGameStarted)	{		box = getRandom();		document.all[box].style.backgroundColor = "yellowgreen";		TotalDisplay = TotalDisplay + 1;		setTimeout('document.all[box].style.backgroundColor = "white"',700);		setTimeout('highlightBox()',800);	}}function startTime(){	if(eval(document.buzzy.txtTime.value)  != 0)	{		document.buzzy.txtTime.value = eval(document.buzzy.txtTime.value) - 1;		setTimeout('startTime()',1000);	}else{		alert('Time Up!! You Scored ' + document.buzzy.txtScore.value + " out of " + TotalDisplay + "/n/n No. of drunkard%$# clicks: " + wrongClicks);		document.buzzy.btnStart.disabled = false;		blnGameStarted = false;	}}function initialize(){	blnGameStarted = confirm('游戏现在开始，你准备好了吗？？？')	if(blnGameStarted)	{		document.buzzy.txtTime.value = 60;		document.buzzy.txtScore.value = 0;		setTimeout('startTime()',10);		highlightBox();	}else		document.buzzy.btnStart.disabled = false;}</SCRIPT>      <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>        <TBODY>        <TR>          <TD vAlign=center align=middle>            <TABLE             style="BORDER-LEFT-COLOR: blue; BORDER-BOTTOM-COLOR: blue; BORDER-TOP-COLOR: blue; BORDER-RIGHT-COLOR: blue; boder-style: outset"             cellSpacing=0 cellPadding=8 width=400 border=4>              <TBODY>              <TR><INPUT type=hidden name=9></FONT>                 <TD onclick=javascript:checkClick(this.style);                   name="10">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="11">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="12">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="13">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="14">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="15">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="16">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="17">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="18">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="19">  </TD></TR>              <TR>                <TD onclick=javascript:checkClick(this.style);                   name="20">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="21">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="22">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="23">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="24">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="25">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="26">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="27">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="28">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="29">  </TD></TR>              <TR>                <TD onclick=javascript:checkClick(this.style);                   name="30">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="31">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="32">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="33">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="34">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="35">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="36">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="37">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="38">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="39">  </TD></TR>              <TR>                <TD onclick=javascript:checkClick(this.style);                   name="40">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="41">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="42">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="43">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="44">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="45">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="46">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="47">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="48">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="49">  </TD></TR>              <TR>                <TD onclick=javascript:checkClick(this.style);                   name="50">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="51">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="52">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="53">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="54">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="55">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="56">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="57">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="58">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="59">  </TD></TR>              <TR>                <TD onclick=javascript:checkClick(this.style);                   name="60">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="61">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="62">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="63">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="64">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="65">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="66">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="67">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="68">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="69">  </TD></TR>              <TR>                <TD onclick=javascript:checkClick(this.style);                   name="70">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="71">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="72">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="73">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="74">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="75">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="76">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="77">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="78">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="79">  </TD></TR>              <TR>                <TD onclick=javascript:checkClick(this.style);                   name="80">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="81">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="82">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="83">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="84">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="85">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="86">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="87">  </TD>                <TD onclick=javascript:checkClick(this.style);                   name="88">  </TD>                <TD onclick=javascript:checkClick(this.style);name="89">  </TD></TR></TBODY></TABLE></TD></TR>        <TR>          <TD align=middle>            <FORM name=buzzy>            <TABLE cellSpacing=0 cellPadding=8 width=400 border=0>              <TBODY>              <TR>                <TD>  </TD></TR>              <TR>                <TD align=left><B>Score:</B><INPUT                   style="FONT-WEIGHT: bold; WIDTH: 75px" readOnly value=0                   name=txtScore char="10"> </TD>                <TD align=middle><INPUT style="WIDTH: 75px" onClick="javascipt:document.buzzy.btnStart.disabled = true;initialize();" type=button value=Start name=btnStart></TD>  <TD align=right><B>Time:</B><INPUT style="FONT-WEIGHT: bold; WIDTH: 75px" readOnly value=60 name=txtTime char="10">  </TD></TR></TBODY></TABLE></FORM></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

上一篇：鼠标左右拖动图片，JS已限制不能垂直拖动

下一篇：JS实现跟随鼠标旋转的图片