Введение:
В этом сообщении блога вы узнаете, как создать простую игру с отслеживанием мыши с помощью JavaScript. HTML и CSS. Я сосредоточусь на механике игры (функциях JS). Чтобы увидеть, как будет выглядеть конечный результат, вы можете перейти здесь. Полное репо находится здесь (вы также можете взять целевое изображение из репо)
Макет HTML и CSS:
Предположим, вы уже создали каталог и в нем есть файлы HTML, CSS и JS. Вот код для HTML:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8" /> <meta http-equiv=”X-UA-Compatible” content=”IE=edge” /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0" /> <title>Shooting Game</title> <link rel=”stylesheet” href=”./index.css” /> <script src=”./index.js” defer></script> </head> <body> <header> <div id=”title”>Welcome To Click The Target</div> </header> <section id=”displayBox”> <div class=”displayTabs”> <p>Time:</p> <div class=”display” id=”timer”>10</div> </div> <button id=”start”>Start</button> <div class=”displayTabs”> <p>Score:</p> <div class=”display” id=”score”>0</div> </div> </section> <main> <div id=”game”> <img id=”target” src=”./target.png” alt=”Shooting Target” style=”right: -30rem; bottom: -19rem; transition: 2s” /> </div> </main> </body> </html>
И CSS:
@import url(“https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
body {
width: 100%;
background-color: rgb(211, 197, 208);
}
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen,
Ubuntu, Cantarell, “Open Sans”, “Helvetica Neue”, sans-serif;
}
header {
display: flex;
justify-content: center;
padding: 0.5 rem;
width: 100%;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
#title {
padding: 0.5 rem;
margin-bottom: 0.5;
font-weight: bold;
}
#displayBox {
display: flex;
justify-content: space-evenly;
margin-bottom: 0.2rem;
padding-inline: 10rem;
}
.display {
border-style: solid;
padding: 0.5rem;
margin-inline: 0.2rem;
width: 2rem;
height: 2.5rem;
}
main {
display: flex;
justify-content: center;
}
#game {
width: 1000px;
height: 608px;
background-color: black;
position: fixed;
}
#target {
width: 50px;
height: 50px;
position: relative;
}
#game:hover {
cursor: crosshair;
}
button {
padding: 0.5rem;
font-style: italic;
}
.displayTabs {
display: flex;
justify-content: space-between;
width: 6rem;
align-items: center;
}
button {
padding: 0.5rem;
font-style: italic;
}
.displayTabs {
display: flex;
justify-content: space-between;
width: 6rem;
align-items: center;
}
Этот код приведет к:
Теперь, когда у нас есть базовый макет, нам нужно, чтобы функциональность работала, так что давайте сразу приступим.
Файл JS — перемещение цели, обратный отсчет времени, увеличение счета
Если вы снимали и играли в игру по ссылке, указанной выше, вы заметили несколько вещей в действии, которые нам нужно будет создать:
- У нас есть цель, и всякий раз, когда мы нажимаем на нее, она должна двигаться.
- Когда мы нажимаем на цель, счет увеличивается
- Когда мы нажимаем на цель, таймер сбрасывается
- У нас есть кнопка запуска, при нажатии на которую запускается игра.
- Когда игра запускается, таймер уменьшается
- Когда мы набираем определенный балл, сложность игры увеличивается.
- Диапазон таймера становится короче
- Цель движется быстрее
С чего начать?
Сначала у нас будет переменная isRunning, для которой будет установлено значение false, пока мы не нажмем «Пуск». Игра не запустится, пока isRuning не станет истинным:
let isRunning = false;
Далее давайте создадим несколько функций, чтобы заставить цель двигаться:
const targetLocationGenerator = (min, max) => {
let number = Math.random() * (min — max);
return number;
};
Эта функция сгенерирует нам случайное число между параметрами, которые мы предоставим.
const movingTarget = () => {
target.style.right = targetLocationGenerator(-59.4, -0) + “rem”;
target.style.bottom = targetLocationGenerator(-34.8, -0) + “rem”;
};
Эта функция вставит число, полученное из предыдущей функции (я проверил минимальные и максимальные числа, чтобы они соответствовали доске), и установит отображение цели (как по горизонтали, так и по вертикали) на это число. Это (плюс переход, который мы дали цели в html-документе) заставит цель двигаться.
Теперь мы можем добавить movingTarget в прослушиватель событий («щелчок») по цели, и цель будет перемещаться при каждом щелчке. Мы также должны добавить:
scoreDisplay.innerText++;
В прослушиватель событий, который будет увеличивать наш счет на 1 каждый клик.
Следующие несколько функций будут работать при запуске игры, нашем таймере и сложности игры.
Мы делаем эту функцию:
const runGame = () => {
if (!isRunning) {
startButtonActivation();
countDown();
}
};
Мы создаем прослушиватель событий для «нажатия» на кнопку «Пуск» и передаем функцию выше.
-Функция будет (пока игра не запущена, когда она нажата) запустит нашу функцию таймера (указанную ниже) и нашу функцию активации (указанную под функцией таймера).
const countDown = () => {
const countDownTimer = setInterval(() => {
if (timeDisplay.innerText > 0) {
timeDisplay.innerText — ;
} else if (timeDisplay.innerText === “0”) {
isRunning = false;
clearInterval(countDownTimer);
startGame.disabled = false;
}
}, 1000);
};
Эта функция countDown отвечает за уменьшение таймера на 1 каждую секунду до тех пор, пока таймер больше 0. Затем, когда таймер достигает нуля, мы заставляем нашу игру больше не запускаться, мы останавливаем таймер и отпускаем кнопку запуска. кнопку, чтобы снова можно было нажимать.
Наша кнопка Пуск несет важную ответственность, поэтому мы делаем эту функцию:
const startButtonActivation = () => {
if (!isRunning && startGame.innerText === “Start”) {
startGame.innerText = “Restart”;
isRunning = true;
startGame.disabled = true;
} else if (
!isRunning &&
startGame.innerText === “Restart” &&
timeDisplay.innerText === “0”
) {
timeDisplay.innerText = 10;
isRunning = true;
scoreDisplay.innerText = 0;
target.style.right = “-30rem”;
target.style.bottom = “-19rem”;
startGame.disabled = true;
}
};
Эта функция изменяет текст кнопки запуска и отключает ее при запуске игры. Наконец, он сбрасывает цель, счет и время.
Теперь мы хотим добавить условие, что только если наша игра запущена, мы можем щелкнуть цель, поэтому теперь наш целевой прослушиватель событий будет выглядеть так:
target.addEventListener(“click”, () => {
if (isRunning) {
movingTarget();
scoreDisplay.innerText++;
increaseDifficulty();
}
});
Последнее, что мы добавили, — это функция увеличения сложности. Эта функция будет выглядеть так:
const increaseDifficulty = () => {
if (scoreDisplay.innerText < 5) {
timeDisplay.innerText = 10;
target.style.transition = “2s”;
} else if (scoreDisplay.innerText < 10) {
timeDisplay.innerText = 8;
target.style.transition = “1.5s”;
} else if (scoreDisplay.innerText < 15) {
timeDisplay.innerText = 5;
target.style.transition = “1.3s”;
} else if (scoreDisplay.innerText < 20) {
timeDisplay.innerText = 3;
target.style.transition = “1s”;
} else if (scoreDisplay.innerText < 25) {
timeDisplay.innerText = 1;
target.style.transition = “0s”;
}
};
Эта функция отвечает за усложнение игры. Чем больше очков вы наберете, тем сложнее будет игра. После того, как мы наберем x очков, функция увеличивает скорость движения цели, сокращает обратный отсчет, который у нас есть, и сокращает время перехода для нашей цели, что затрудняет ее отслеживание.
Заключение
Если вы следовали и написали все правильно, у вас должна быть работающая дорожка целевой игры! Используя простой HTML, дизайн CSS и несколько функций JavaScript, мы делаем нашу собственную маленькую игру для отслеживания мыши. Не стесняйтесь клонировать репо и добавлять новые задачи. Например, вы можете разделить цель на две цели, по которым нужно щелкнуть. А пока поиграйте в эту игру — как вы думаете, сколько очков вы можете получить!? :)
