使用 JavaScript 创建反射游戏
反射游戏是一个简单有趣的游戏，可以衡量你的反应速度。制作和理解非常简单。我们将设计一个反射游戏来计算你的反应速度。规则很简单，当你看到背景颜色的变化时按下停止按钮，你这样做的时间就是你的速度。
游戏提供多种颜色供您选择。与较慢的响应相比，较快的响应将显示出更好的赞美引用。
因此，让我们从基本的 HTML 布局开始。
HTML 布局：
HTML 布局定义了页面的外观。这部分完全取决于你的创造力。请记住创建一个空白的白色背景，以便更改可见。
其他需要的元素是：
- 包含游戏名称和一些其他信息的标题。
- 一个表单元素，可以包括从下面选择的选项。这是必需的，以便用户可以从许多选项中选择所需的特定颜色。
- 两个按钮：一个用于开始游戏，另一个用于按下停止按钮。
代码：
Reflex Game
Reflex Game
Test your Response time!
How To Play
Click on "Start" first, and wait until the
background color changes. As soon as it
changes, hit "stop!"
笔记：
这是最基本的 HTML 布局。您可以在其中添加或删除任何其他部分。
CSS样式：
您可以尽可能添加自己的自定义 CSS。在这里，我将只为按钮添加一些基本的 CSS。
代码：
游戏主要逻辑：
游戏的主要逻辑是使用 JavaScript 定义的。这里使用的 JavaScript 也很基础，只需一点 JavaScript 知识就可以理解这一点。
我们将为这款游戏的运行制作 5 个基本功能：
第1步：
开始游戏。此函数需要启动按钮。一旦用户按下开始按钮，该函数将被执行。
function startTest()
{
document.body.style.background=document.response.bgColorChange.options[
document.response.bgColorChange.selectedIndex].text;
bgChangeStarted=true;
startTime=new Date();
}
第2步：
下一个函数将是 remark()函数。此函数将包括游戏完成时显示的备注。
function remark(responseTime)
{
var responseString="";
if (responseTime < 0.20)
responseString="Well done!";
if (responseTime >= 0.30 && responseTime < 0.20)
responseString="Nice!";
if (responseTime >=0.40 && responseTime < 0.30)
responseString="Could be better...";
if (responseTime >=0.50 && responseTime < 0.60)
responseString="Keep practicing!";
if (responseTime >=0.60 && responseTime < 1)
responseString="Have you been drinking?";
if (responseTime >=1)
responseString="Did you fall asleep?";
return responseString;
}
第 3 步：
下一个 stopTest()函数将在按下停止按钮时执行。按下停止按钮可以执行 3 个选项：
一、成功完成，告诉响应时间。
其次，如果用户在按下开始按钮之前按下停止按钮。
第三，如果用户在改变颜色之前按下停止按钮。
function stopTest()
{
if(bgChangeStarted)
{
endTime=new Date();
var responseTime=(endTime.getTime()-startTime.getTime())/1000;
document.body.style.background="white";
alert("Your response time is: " + responseTime +
" seconds " + "\n" + remark(responseTime));
startPressed=false;
bgChangeStarted=false;
}
else
{
if (!startPressed)
{
alert("press start first to start test");
}
else
{
clearTimeout(timerID);
startPressed=false;
alert("cheater! you pressed too early!");
}
}
}
第4步 ：
第四个函数是获得背景变化的随机响应时间。
function randNumber()
{
randSeed = (randMULTIPLIER * randSeed + randINCREMENT) % (1 << 31);
return((randSeed >> 15) & 0x7fff) / 32767;
}
最后一步：
最后一个函数是确保启动按钮不被按下两次。
function startit()
{
if(startPressed)
{
alert("Already started. Press stop to stop");
return;
}
else
{
startPressed=true;
timerID=setTimeout('startTest()', 6000*randNumber());
}
}
最终演示和完整代码：
Reflex Game
Reflex Game
Test your Response time!
How To Play
Click on "Start" first, and wait until the
background color changes. As soon as it changes, hit "stop!"
输出：