alexalexes

Выводить также как из любого другого источника данных.
1. Подготовьте источник данных.
- Разверните службу СУБД в операционной системе сервера.
- Выберите менеджер, чем вам будет удобно просматривать объекты СУБД.
- Установите менеджер СУБД.
- При помощи менеджера СУБД заведите пользователя базы данных, схему базы данных, структуру таблиц и связей, вставьте необходимые данные.
2. Изучите способы подключения к источнику данных и взаимодействия из PHP (как делать коннект к СУБД, как подготавливать запросы и параметры к ним, как фетчить результат выборки запроса).
3. Подключитесь к базе, выполните запрос, встройте выборку результата в ваш шаблон HTML (табы).

1. На десктопе рулят события мыши: mousedown - эквивалент touchstart, mousemove - эквивалент touchmove, mouseup - эквивалент touchend.
2. Вместо множества точек касаний (пальцы) у вас одна точка - курсор мыши, поэтому свойства changedTouches в объекте события не будет.
3. Тестировать, что окружение браузера имеет сенсорный экран, можно проверкой наличием доступного свойства любого события touch в window:

if("touchstart" in window)
{
  // работаем с сенсорными обработчиками
}
else
{
  // работаем с мышиными обработчиками
}

4. Событие завершения управления элементом (touchend, mouseup) лучше вешать не на сам элемент item, а на его контейнер, который будет занимать всю ширину экрана (идеально, если это будет body). Логика обработки может застрять на обработчике move, если во время движения точка воздействия на объект убежит за пределы объекта.
В определенных случаях могут выручить события mouseover/mouseout.

1. Сначала занулите свойство анимации. Потом вызовите setTimeout с нулевым временем, чтобы JS применил изменения анимации в DOM и внутри setTimeout добавьте свойство анимации. Тогда анимация перезапустится.

nickinput.style.animation = "none";
  setTimeout(function() {
    if (validmail === false) {
        mailinput.style.animation = "blinker 0.6s linear 3";
    }
    }, 0);

2. Задайте какой-нибудь color в ключевом кадре:

@keyframes blinker {
  50% {
    background-color: #b11515;
    color: #aaa;
  }
}

for(let i = 0;i < rows;i++){ // вы собираетесь сначала создать строку, а по кол-ву строк идут игроки, значит нужно брать число rows, а не cols
        let tr = document.createElement('tr');
  
      for(let j = 0;j < cols;j++){ // а тут cols, но тут еще нужна другая переменная для счетчика, i уже используется для индекса rows
        let td = document.createElement('td'); 
        if(j == 1) // мы ведь хотим добавить контент на вторую колонку (по индексу 1)?
        {
         td.innerHTML = localStorage.getItem(i + ""); // добавляем значение, "" - нужен, чтобы получить ключ по j в виде строки
        }
        tr.appendChild(td);
      }

ЗЫ: Мне не нравится, что у вас некий массив очков вывален по индексам (которые 0-3) прямо в хранилище по ячейкам ключ-значение. Хорошо бы, чтобы этот массив лежал в одной ячейке хранилища под своим именем. Для этого этот массив нужно преобразовать в JSON и положить в отдельную именованную ячейку. И пользоваться значением этой ячейки нужно будет с кодированием и декорированием JSON строки.

Можно старым добрым процедурным методом ограничить.

function present () {
  if(visitinMagazine.length < 25)
    visitinMagazine.push(true);
  else
  {
   // что-то сделать при переполнении
  }
}
function absent() {
  if(visitinMagazine.length < 25)
    visitinMagazine.push(false);
   else
  {
   // что-то сделать при переполнении
  }
}

Или вам нужно чтобы сам тип данных "массив с ограничением" это делал?

Объясните простыми словами новичку в javascript, куда передаются данные через fetch

Данные передаются из браузера (он же клиент) передаются на сервер.

Постоянно вижу разные примеры кода и везде прописывают файл назначения разным

Это не файл, это url - адрес на сервере, от которого любым способом запустится какой-то скрипт, который сможет сформировать ответ для браузера (то есть для клиента).
Если в url указан путь к файлу на сервере, то сервер может отдать статичный файл - но для сервера не принципиально, что отдавать по какому url, можно настроить любые правила взаимодействия.

А ловят данные вообще через какой-то "php://input"

Сервер ловит обращение по url (он же запрос), выясняет по настройкам, что нужно сделать: запустить серверный скрипт, отдать статичный файл или ответить каким-нибудь статусом (например, 404). Если по url запрос попадает на запуск скрипта, то в этом скрипте вы можете обработать параметры запроса. Параметры запроса как правило вылавливают в $_GET или $_POST, либо парсят часть url, либо в дополнение смотрят вложения $_FILES.
Либо в вашем варианте смотрят сырцы запроса через php://input, если что-то нестандартное нужно обработать.

Тогда зачем вообще эти файлы, которые указывают в Fetch? Причем одни с абсолютным адресом, другие с относительным, где-то указывают расширение (html, json и т.д.), где-то вообще без него.

Сервер может отдать разные данные клиенту. Где-то их можно забрать из файла статично, где-то сгенерировать ответ серверным скриптом динамично. А можно на статичные пути генерить динамичные данные, по виду url это мало чего говорит.

Нужно создавать файл какой-то на сервере в который якобы будет передаваться эта информация из JS через POST запрос?

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

Я создаю, у меня не выходит ничего, значение, при чтении этого файла или php://input (file_get_contents("php://input")) после передачи POST пустое.

Указываете на клиенте метод POST - на сервере ловите параметры методом POST он будет в $_POST.
Отправляете параметры GET или вшиваете их в url - ловите параметры на сервере в $_GET.
Вкладываете файл на клиенте - получаете атрибуты файлов на сервере в $_FILES.
Все просто.
На клиенте:

fetch('/foranswer.php', { //указываете скрипт на сервере, который сформирует ответ для клиента
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'text/plain'
                                            },
                                            body: player.signature
                                        });

На сервере:
Скрипт foranswer.php

<?php
var_dump($_POST); // Посмотрите, а что вообще пришло в пост параметрах.
// Например, вам нужен параметр param1, забираем его значение из поста
$param1 = isset($_POST['param1']) ? $_POST['param1'] : null;
// Если param1 задан - что-то делаем
if(!is_null($param1))
{
  // Например, при наличии параметра param1 нужно прочитать некий ресурс на сервере
  $out = file_get_contents("/file.txt");
  // и отдать его содержимое клиенту
  echo $out;
}
else
{
  // Нет обязательного параметра, отдаем ответ клиенту, что что-то не так.
  echo "Нужен обязательный параметр param1";
}
?>

finalRes у вас типа целого числа в данной ситуации. У него не будет метода indexOf. Нужен финт ушами, чтобы принудительно преобразовать его в строку:
let finalRes = item.number + "";
PS: Ставите ; в строках JS, игнорирование их может сыграть злую шутку.

Зачем создавать отдельную переменную result и присваивать ей obj

Разработчик этой функции перестраховался, присвоив объект obj локальной переменной функции result, потому что знает, что из контекста функции можно изменять obj во внешнем контексте, если изменять свойства объекта внутри функции, и далее по тексту запланирована некая рекурсия. Однако, переприсваивание самого obj не повлияет на внешний контекст, в этом случае можно не создавать отдельную переменную result (если ничего не делать со свойствами объекта).

сразу в блоке условия let result = result[chain[i]]

Ну, мысленно или явно оттрасируйте этот момент:

// не объявили result, считай он такой
// result  = undefined
for (let i = 0; i < chain.length; i++) {
    if (result) { // undefined интерпретируется как false
     let result = result[chain[i]] // сюда вообще не попадаем
    } else {
      result = undefined // сюда попадаем при каждом i, причем result идет во внешний контекст
    }
  }