Создайте рефлекс-игру с помощью JavaScript

Опубликовано: 5 Января, 2022

Рефлекторная игра - это простая забавная игра, в которой измеряется скорость вашей реакции. Это довольно просто сделать и понять. Мы разработаем рефлекторную игру, которая рассчитает вашу скорость реакции. Правила просты: просто нажмите кнопку остановки, когда вы увидите изменение цвета фона, и время, которое вы потратили на это, будет вашей скоростью.
Игра предоставляет вам на выбор множество цветов. Более быстрый ответ покажет лучшую похвалу, чем более медленный.
Итак, давайте начнем с базовой HTML-разметки.
Макет HTML:
Макет HTML определяет, как будет выглядеть ваша страница. Эта часть полностью зависит от вашего творчества. Просто не забудьте создать пустой белый фон, чтобы изменения были видны.
Другие необходимые элементы:

Заголовок, содержащий название игры и некоторую другую информацию.
Элемент формы, который может включать в себя вариант выбора из нижеприведенного. Это необходимо для того, чтобы пользователь мог выбрать из множества вариантов тот конкретный цвет, который ему нужен.
Две кнопки: одна для запуска игры, а другая для нажатия кнопки остановки.

Код:

 < html >
 
< head >
    < title >Reflex Game</ title >
 </ head >
 
< body >
    < center >< strong >
      < h1 style = "color: black" >Reflex Game</ h1 >
      </ strong ></ center >
        < center >
            < h2 >Test your Response time!</ h2 >
        </ center >
        < center >
            < h3 >How To Play</ h3 >
            < p >Click on "Start" first, and wait until the
              background color changes. As soon as it
              changes, hit "stop!"
            </ p >
 
            < br >
            < form name = "response" >
                Change background color to:
                < select name = "bgColorChange" >
                    < option selected>deeppink
                        < option >aliceblue
                        < option >crimson
                        < option >darkkhaki
                        < option >cadetblue
                        < option >darkorchid
                        < option >coral
                        < option >chocolate
                        < option >mediumslateblue
                        < option >tomato
                        < option >darkslategray
                        < option >limegreen
                        < option >cornflowerblue
                        < option >darkolivegreen
                </ select >
                < br >
                < br >
 
                < input type = "button" class = "btn"
                       value = "Start" onClick = "startit()" >
                < input type = "button" class = "btn"
                       value = "Stop" onClick = "stopTest()" >
            </ form >
        </ center >
 </ body >
 
</ html > 

Примечание:
Это самый простой макет HTML. Вы можете добавить или удалить в него любые другие части.
Стиль CSS:
Вы можете добавить свой собственный CSS везде, где это возможно. Здесь я просто добавлю к кнопкам базовый CSS.
Код:

 < style >
  input[type=button]
 {
    background-color: #77797c;
    border: none;
    border-radius: 10%;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
 }
  </ style > 

Основная логика игры:
Основная логика игры определяется с помощью 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:
Следующая функция будет функцией замечание (). Эта функция будет включать примечания, которые игра покажет по завершении игры.

 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 " + "
" + 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());
    }
 }

Финальная демонстрация и полный код:

 <!DOCTYPE html>
 < html >
 < head >
    < meta name = "viewport"
          content = "width=device-width, initial-scale=1.0" >
    < meta charset = "utf-8" >
   
  < style >
  input[type=button]{
  background-color: #77797c;
    border: none;
    border-radius: 10%;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
 }
  </ style >
 
    < title >Reflex Game</ title >
 </ head >
 < body >< script language = "JavaScript" >
 
 
var startTime=new Date();
 var endTime=new Date();
 var startPressed=false;
 var bgChangeStarted=false;
 var maxWait=20;
 var timerID;
 
function startTest()
 {
    document.body.style.background=document.response.bgColorChange.options[
 document.response.bgColorChange.selectedIndex].text;
    bgChangeStarted=true;
    startTime=new Date();
 }
 
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;
 }
 
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 " + "
" + 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!");
        }
    }
 }
 
var randMULTIPLIER=0x015a4e35;
 var randINCREMENT=1;
 var today=new Date();
 var randSeed=today.getSeconds();
 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());
    }
 }
 // -->
    </ script >
        < center >< strong >< h1 style = "color: black" >Reflex Game</ h1 ></ center ></ strong >
        < center >
        < h2 >Test your Response time!</ h2 >
        </ center >
        < center >< h3 >How To Play</ h3 >
        < p >Click on "Start" first, and wait until the
 background color changes. As soon as it changes, hit "stop!"
        </ p >
 
        < br >
        < form name = "response" >
        Change background color to:
        < select name = "bgColorChange" >
        < option selected>deeppink
        < option >aliceblue
        < option >crimson
        < option >darkkhaki
        < option >cadetblue
        < option >darkorchid
        < option >coral
        < option >chocolate
        < option >mediumslateblue
        < option >tomato
        < option >darkslategray
        < option >limegreen
        < option >cornflowerblue
        < option >darkolivegreen
        </ select >< br >
        < br >
 
        < input type = "button" class = "btn" value = "Start" onClick = "startit()" >
        < input type = "button" class = "btn" value = "Stop" onClick = "stopTest()" >
        </ form >
        </ center >
 
 
    </ body >
 </ html > 

Выход:

JavaScript JavaScript-Misc

Создайте рефлекс-игру с помощью JavaScript

РЕКОМЕНДУЕМЫЕ СТАТЬИ