Автор оригинала: Brandon Wallace.
Шахматные игры иногда могут продолжаться довольно некоторое время. Однажды я услышал историю шахматной игры между двумя известными шахматными гроссмейстами, которые продолжали более восьми часов, а толпа ждет их, чтобы сделать ход.
Через некоторое время один игрок сказал другому, «не собираюсь двигаться?» Его противник ответил: «Я думал, что это ваша очередь».
Вступление
Шахматные часы используются для ограничения шахматной игры в определенное время. Шахматные часы могут добавить много волнения в шахматы. Многие люди используют эти часы в турнирах и просто для развлечения.
С помощью шахматных часов цели состоит в том, чтобы контролировать своего противника, прежде чем ваш таймер закончится. Первый человек, который не хватает времени, не проверяя его противника, теряет игру.
Я покажу вам, как создать основные шахматные часы, используя JavaScript и Setinterval метод. Setinterval Позволяет неоднократно выполнять своевременное событие, указав время в миллисекундах. Setinterval Может быть установлен на ID и остановился, позвонив ClearInterval на Setinterval Я БЫ.
Вот простой пример того, как работает SetInterval:
let count = 1;
// Assign a timed event to variable timerId.
const timerId = setInterval(() => {
console.log(`Executing function for ${count} seconds.`);
// Increment the count variable by one.
count++;
if (count === 11) {
// Stop event by calling clearInterval on timerId.
clearInterval(timerId);
console.log(`Timing event cleared.`);
}
}, 1000); // Execute event every second (1000 milliseconds = 1 second).
Вот план на том, как приложение будет выглядеть на рабочем столе и мобильном телефоне.
Требования к программированию для этого проекта являются:
- Нам нужны две часы, которые обратный отсчет до нуля.
- Нам нужна кнопка запуска и кнопка сброса.
- И нам нужен способ переключаться между часами, поскольку время подсчитывается.
Давайте создадим проект
Создать каталоги CSS , JS и Аудио сохранить проект организован.
$ mkdir css js audio
Создайте файлы index.html , still.css и Script.js Отказ
$ touch index.html css/style.css js/script.js
Добавьте этот код в index.html файл.
chess clock
10:00
10:00
Это то, что у нас без каких-либо CSS.
Добавьте некоторые CSS для стиля проекта
Добавьте этот код CSS на still.css Файл для стиля проекта Mobile первым.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background-color: #14A7FF;
}
body {
font-size: 100%;
font-family: monospace, monospace;
}
main {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.player {
margin: 1em 0 5px 0;
display: flex;
flex-direction: column;
}
.player__tile {
width: 100%;
height: 300px;
display: flex;
margin: 0 auto;
color: #000000;
max-width: 400px;
border-radius: 8px;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
box-shadow: inset 3px 3px 0 #000,
inset -3px 3px 0 black,
inset -3px -3px 0 black,
inset 3px -3px 0 black;
}
.player-2 {
color: #FFFFFF;
margin-top: 5px;
background-color: #2D2C2C;
}
.player__digits {
font-size: 6rem;
font-weight: bold;
}
.timer__buttons {
margin-bottom: 1em;
}
.timer__start-bttn,
.timer__reset-bttn {
width: 100%;
display: block;
color: #020202;
min-height: 50px;
max-width: 400px;
font-size: 1.5rem;
font-weight: bold;
border-radius: 8px;
letter-spacing: 2px;
margin: 0 auto 5px auto;
border: 4px solid #000000;
}
.timer__start-bttn {
color: #FFFFFF;
background-color: #0071D5;
}
.timer__start-bttn:hover {
color: #000000;
background-color: #FFFFFF;
}
.timer__reset-bttn:hover {
color: #FFFFFF;
background-color: #0071D5;
}
footer p {
text-align: center;
}
/* Media queries for mobile first develoment. */
/* Media queries for landscape mode on mobile devices */
@media only screen and (orientation: landscape) and (max-width: 850px) {
.player {
max-width: 610px;
flex-direction: row;
margin: 5px auto 0 auto;
}
.player__tile {
max-width: 300px;
max-height: 250px;
margin: 0 3px 5px 3px;
}
.player__digits {
font-size: 5rem;
}
.timer__buttons {
display: flex;
margin: 0 auto;
max-width: 610px;
}
.timer__start-bttn,
.timer__reset-bttn {
display: block;
max-width: 300px;
margin: 0 3px 5px 3px;
}
}
/* Media queries for portrait mode */
@media only screen and (orientation: portrait) and (min-width: 400px) {
.player__tile {
height: 400px;
}
.player__digits {
font-size: 6rem;
}
}
/* Screen wider than 850px wide will use these settings. */
@media only screen and (min-width: 850px) {
.player {
margin: 1em auto 10px auto;
max-width: 810px;
flex-direction: row;
}
.player__tile {
height: 400px;
}
.player-2 {
margin-top: 0;
}
.player__digits {
font-size: 7rem;
}
.timer__buttons {
display: flex;
margin: 0 auto;
max-width: 810px;
}
.timer__start-bttn,
.timer__reset-bttn {
padding: .7em;
font-size: 1.8rem;
}
}
С добавленными CSS проект выглядит лучше.
Добавьте код JavaScript, чтобы заработать часы
Сначала добавлю функции, которые нам нужно сделать проектную работу.
Изменить Script.js файл:
$ vim js/script.js
И добавьте следующие функции стрелки ES6:
// Add a leading zero to numbers less than 10.
const padZero = () => {
// code
}
// Warn the player if time drops below thirty seconds.
const timeWarning = () => {
// code
}
// Create a class for the timer.
class Timer {
// code
}
// Swap player's timer after a move (player1 = 1, player2 = 2).
const swapPlayer = () => {
// code
}
// Start timer countdown to zero.
const startTimer = () => {
// code
let timerId = setInterval(function() {
// code
}, 1000)
}Теперь мы можем заполнить функции JavaScript с кодом, чтобы заставить часы работать.
Начнем с добавления некоторых переменных в проект. Если переменная играть это Правда, часы бегают.
CurrentPlayer хранит значение 1 для игрока одного или 2 для плеера двух. Мы можем добавить звуки (от freesound.org) Ибо когда часы переключаются от одного игрока к другому и тревогу, когда время закончится.
Падзеро Функция добавит ведущую ноль к номерам, которые ниже 10.
Изменить Script.js файл, как это:
$ vim js/script.js
let playing = false;
let currentPlayer = 1;
const panel = document.querySelector('.player');
const buttons = document.querySelectorAll('.bttn');
// Sound effects for project.
const timesUp = new Audio('audio/460133__eschwabe3__robot-affirmative.wav');
const click = new Audio('audio/561660__mattruthsound.wav');
// Add a leading zero to numbers less than 10.
const padZero = (number) => {
if (number < 10) {
return '0' + number;
}
return number;
}
Дайте каждому игроку визуальное уведомление о том, что время уходит, изменив числа к красному цвету.
// Warn player if time drops below one minute and thirty seconds.
const timeWarning = (player, min, sec) => {
// Change the numbers to red below 0 minutes and 30 seconds
if (min < 1 && sec <= 30) {
if (player === 1) {
document.querySelector('.player-1 .player__digits').style.color = '#CC0000';
} else {
document.querySelector('.player-2 .player__digits').style.color = '#CC0000';
}
}
}Мы создадим класс для настройки таймера для каждого игрока.
// Create a class for the timer.
class Timer {
constructor(player, minutes) {
this.player = player;
this.minutes = minutes;
}
getMinutes(timeId) {
return document.getElementById(timeId).textContent;
}
}
// Create an instance of the timer for each player.
let p1time = new Timer('min1', document.getElementById('min1').textContent);
let p2time = new Timer('min2', document.getElementById('min2').textContent);
Swapplayer Функция переключает таймер между игроком 1 и плеером 2 с использованием тройного оператора.
Если играть Переменная ложная, часы не работают, а функция выходит.
// Swap player's timer after a move (player1 = 1, player2 = 2).
const swapPlayer = () => {
if (!playing) return;
// Toggle the current player.
currentPlayer = currentPlayer === 1 ? 2 : 1;
// Play the click sound.
click.play();
}
Функция StartTimer использует Setinterval для отсчета каждого таймера.
играть Переменная установлена на true, чтобы получить работу часов.
Если утверждение IF проверяет, к какому плееру текущий проигрыватель, а затем он начинает подсчитывать таймер для этого проигрывателя.
Если секунды достигают 60, один номер вычитается с протокол. Элемент HTML обновляется со временем каждую секунду. Однажды секунды и минуты добираются до нуля, ClearInterval () называется, чтобы остановить таймер.
// Start timer countdown to zero.
const startTimer = () => {
playing = true;
let p1sec = 60;
let p2sec = 60;
let timerId = setInterval(function() {
// Player 1.
if (currentPlayer === 1) {
if (playing) {
buttons[0].disabled = true;
p1time.minutes = parseInt(p1time.getMinutes('min1'), 10);
if (p1sec === 60) {
p1time.minutes = p1time.minutes - 1;
}
p1sec = p1sec - 1;
document.getElementById('sec1').textContent = padZero(p1sec);
document.getElementById('min1').textContent = padZero(p1time.minutes);
if (p1sec === 0) {
// If minutes and seconds are zero stop timer with the clearInterval method.
if (p1sec === 0 && p1time.minutes === 0) {
// Play a sound effect.
timesUp.play();
// Stop timer.
clearInterval(timerId);
playing = false;
}
p1sec = 60;
}
}
} else {
// Player 2.
if (playing) {
p2time.minutes = parseInt(p2time.getMinutes('min2'), 10);
if (p2sec === 60) {
p2time.minutes = p2time.minutes - 1;
}
p2sec = p2sec - 1;
document.getElementById('sec2').textContent = padZero(p2sec);
document.getElementById('min2').textContent = padZero(p2time.minutes);
if (p2sec === 0) {
// If minutes and seconds are zero stop timer with the clearInterval method.
if (p2sec === 0 && p2time.minutes === 0) {
// Play a sound effect.
timesUp.play();
// Stop timer.
clearInterval(timerId);
playing = false;
}
p2sec = 60;
}
}
}
}, 1000);
}
Чтобы получить запуск таймера, добавим слушатель событий на кнопки HTML. Слушатель событий также будет слушать щелчок или нажмите на .player. DIV или если кто-то нажимает на пробел, чтобы переключаться между таймерами.
// Listen for a mouse click or tap on the screen to toggle between timers.
timerPanel.addEventListener('click', swapPlayer);
// Loop through the start and reset buttons.
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', () => {
if (buttons[i].textContent === 'START') {
// Turn the button a gray color to signify a disabled button.
buttons[i].style.color = '#EEEEEE';
buttons[i].style.backgroundColor = '#606060';
startTimer();
} else {
// Reset everything by reloading the page.
location.reload(true);
}
});
}
// Listen for the press of the spacebar on Windows, Linux, and Mac.
document.addEventListener('keypress', event => {
if (event.keyCode === 32 || event.which === 32) {
swapPlayer();
}
});Вот окончательный результат:
Вы можете увидеть это жить здесь , и вы можете проверить Репозиторий GitHub здесь Отказ
Заключение
Это один из способов создания основных шахматных часов. Если вы шахматы шахматы, это может быть забавный проект для создания и то, что вы можете использовать.
Этот проект показывает хороший способ использовать метод SetInterval, как использовать слушателей событий и мобильной первой разработки. Вы можете добавить другие функции в проект, такой как способ установить время, приостановить таймер, разные режимы таймера и многое другое.
Следуй за мной на Github | Dev.to
Оригинал: “https://www.freecodecamp.org/news/how-to-build-a-chess-clock-with-javascript-and-setinterval/”