Делаем таблицу рекордов

Спрашивали - отвечаем. JavaScript - это очень хороший язык. Но его минус в том, что он исполняется в браузере. То есть если мы хотим сохранить какие-то данные и получить их потом, JS нам становится уже недостаточно. По этому умные люди придумали такую штуку как Ajax. Это такая штуковина, которая позволяет нам отправить данные на сервер и получить от сервера ответ.

Как это сделано в уроках у Сканера:

Код:


var sendData = function (params, func) {//params - параметры, которые мы передаем на сервер, func - функция обработки полученных данных
  var ajax = new XMLHttpRequest();
  ajax.open('GET', './records/records.php?' + params, true);//выполняем GET запрос
  ajax.onreadystatechange = function () {
    if (ajax.readyState == 4) {//запрос завершился, ответ получен
      if (ajax.status == 200) {//все Ок
        func(ajax.responseText);//обрабатываем полученные данные
      }
    }
  }
  ajax.send(null);
};


как это делаю я:

Код:


function sendRecordData(params, callback) {//params - параметры, которые мы передаем на сервер, callback - функция обработки полученных данных
  $.ajax({
    url    : './records/records.php?' + params,//передаем параметры серверу
    dataType: "json",//в формате json
    success : function (data) {//если 200, то
      callback(data);//обрабатываем полученные данные
    }
  });
}


собственно сто стороны Javascript'а - это все. дальше делаем с этими данными что хотим. например чтобы передать новый рекорд на сервер выполняем

Код:

var setData = function (score, name) {
  sendRecordData('score=' + score + '&name=' + encodeURI(name), function (name) {
  })
}

чтобы получить нашу табличку с данными выполняем

Код:


var getData = function (score) {
  if (!score) {
    score = 1;//почему тут единичка? да просто чтобы не было пустого значения
  }
  sendRecordData('score=' + score, function (jText) {
    for (var i = 0; i < 10; i++) {
      if (jText[i].name && jText[i].score) {
        recordText.lines[i] = jText[i].name + ' - ' + jText[i].score + ' Points';
      }
    }
    ;
  })
}


вуаля. конечно если у вас есть к чему обращаться на сервере. как-то так

ах да. чтобы использовать вот такую запись "$.ajax({", нужно подключить библиотеку Jquery

ну и собственно файл records.php, к которому мы обращаемся с помощью Ajax'a

Код:

<?php
ini_set('display_errors','Off');

$score = '';

if (isset($_GET['score']) && $_GET['score']) {
    $score = trim(urldecode($_GET['score']));
}

if (isset($_GET['name']) && $_GET['name']) {
    if (!$score) {
        $score = 0;
    }
    $name = urldecode($_GET['name']);
    writeToLog($score, $name);
} elseif ($score) {
    $log = getParsedLog();
    echo json_encode($log);
}

/**
 * @return array
 */
function getParsedLog()
{
    $parsed_log  = array();
    $data        = file_get_contents('log.txt');
    $data_strings = explode(PHP_EOL, $data);

    $i = 0;

    foreach ($data_strings as $string) {
        $fields                = explode('|', $string);
        $parsed_log[$i]['score']  = $fields[0];
        $formaated_text = trim($fields[1]);
        if($formaated_text != ''){
            $parsed_log[$i]['name'] = $formaated_text;
        }else{
            $parsed_log[$i]['name'] = 'Unnamed';
        }
        $i++;
    }

    return $parsed_log;
}

/**
 * @param $score  string
 * @param $name string
 *
 * @throws Exception
 */
function writeToLog($score, $name)
{
    $new_string = $score . '|' . $name . PHP_EOL;
    $got_it = false;
    $record_table = getParsedLog();
    for($i = 0; $i < 10; $i++){
      if($score >= $record_table[$i]['score'] && !$got_it){
        array_splice($record_table, $i, 0, $new_string);
        $got_it = true;
      }
      else{
        $record_table[$i] = $record_table[$i]['score']."|".$record_table[$i]['name'].PHP_EOL;
      }
    }

    if ($result = file_put_contents('log.txt', $record_table)) {
        echo('Saved');
    } else {
        throw new Exception('Error writing to file');
    }
}


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

https://www.youtube.com/watch?v=Li6vC082mWo&t=615s
https://www.youtube.com/watch?v=YvDeQnvRIxU&t=1845s
вот похожее, а то у pyro такой php лист, что мне лично смотреть страшно)А я тоже новичок в программировании.

мне лично смотреть страшно

мне тоже что-то стало страшно смотреть. перепишу-ка

Даже вот: мусор убрал сейчас - вот так выглядит records.js

Код:

function sendRecordData(params) {
  $.ajax({
    url    : './records/records.php?' + params,
    dataType: "json",
    complete : function () {
      getRecordData();
    }
  });
}

function getRecordData(){
  $.ajax({
    url    : './records/records.php?score=1',
    dataType: "json",
    success : function (data) {
      for (var i = 0; i < 10; i++) {
        if (data[i].name && data[i].score) {
          recordText.lines[i] = data[i].name + ' - ' + data[i].score + ' Points';
        }
      }
    }
  });
}

var setData = function (score, name) {
  sendRecordData('score=' + score + '&name=' + encodeURI(name));
}


Можно еще проще - можно переделать records.php, чтобы он сразу в респонсе выдавал табличку рекордов, чтобы 2 раза на сервер не обращаться.

если не лень будет, то позже переделаю

тихо сам с собою я веду беседу...

js файл и так отличный был, я про php говорил))а php ему нужен, чтоб никто в код не заглядывал)

ну спрашивайте - в какой строчке чего не понятно - объясню

Лично мне после повторения уроков сканера и дударя в общем-то всё понятно в твоём коде, достаточно будет просто посмотреть как он отработает. Я больше за нашего форумчанина переживаю, который попросил помощи в этом вопросе.

Ну как текущую игру доделаю, вернусь в air assault и попробую туда таблицу рекордов запилить. Пока сходу мало что понял, но думаю справлюсь. Если будут вопросы, буду тут задавать.

Если будут вопросы, буду тут задавать.

оке)

Сходу не получается)) Итак давайте по порядку.
Вот это я вставляю до игрового цикла в свой файл game1.js?

Код:

var sendData = function (params, func) {//params - параметры, которые мы передаем на сервер, func - функция обработки полученных данных
  var ajax = new XMLHttpRequest();
  ajax.open('GET', './records/records.php?' + params, true);//выполняем GET запрос
  ajax.onreadystatechange = function () {
    if (ajax.readyState == 4) {//запрос завершился, ответ получен
      if (ajax.status == 200) {//все Ок
        func(ajax.responseText);//обрабатываем полученные данные
      }
    }
  }
  ajax.send(null);
};
var setData = function (score, name) {
  sendData('score=' + score + '&name=' + encodeURI(name), function (name) {
  })
}


И дальше в игровом цикле я выполняю функцию с параметрами?, например setData(5, 'test')

Также создаю файл records.php кидаю его в папку records?
Надо ли создавать log.txt или он сам создастся?

Взял код сканера, так как пока не хочу jquery подцеплять, вроде как он с поинтом конфликтует

у сканера все видео рабочие на 100%, лог файл создастся сам

не хочу jquery подцеплять, вроде как он с поинтом конфликтует

у меня ничего не конфликтует

Вот это я вставляю до игрового цикла в свой файл game1.js?

до или после или вообще в отдельном файле можешь запилить

Также создаю файл records.php кидаю его в папку records?

да

Надо ли создавать log.txt или он сам создастся?

я не помню - писал ли я проверку на наличие файла. вроде нет. лучше создай пустой.

И дальше в игровом цикле я выполняю функцию с параметрами?, например setData(5, 'test')

да

ааа, понял проблему, код с локалки не будет работать, надо на хост залить.

код с локалки не будет работать

как минимум поставь себе денвер. самое простое. у меня например стоит виртуальная машина на vagrant и homestead, но ее ставить - те еще танцы с бубнами

Да, денвер конечно же стоит, я ж сайты иногда делаю)

ну вот через денвер и запускай - все должно заработать

Итак данные внес. В лог.тхт вот такая строчка прописалась: 5|test|Unnamed||||||||
Что за unnamed и как мне теперь ее вывести на экран.
Как я понимаю по нажатию кнопки выполняю функцию getData(score), а что за параметр score, зачем он здесь?
И когда функция сработает мне же надо как то вывести данные, то есть как я понимаю в браш запихнуть можно, но что запихивать?

score - это твое количество очков, которые ты отправляешь на сервер, чтобы php скрипт проверил - попадает ли это количество очков в десятку лучших, если да, то записал рекорд в файл и вывел таблицу рекордов, если нет, то просто вывел таблицу рекордов

как я понимаю в браш запихнуть можно, но что запихивать?

вот этот кусох кода запихивает полученные данные в браш

Код:


var getData = function (score) {
  if (!score) {
    score = 1;//почему тут единичка? да просто чтобы не было пустого значения
  }
  sendRecordData('score=' + score, function (jText) {
    for (var i = 0; i < 10; i++) {
      if (jText[i].name && jText[i].score) {
        recordText.lines[i] = jText[i].name + ' - ' + jText[i].score + ' Points';
      }
    }
    ;
  })
}

сам браш выглядит так

Код:

var recordText = {
  lines: [],
  x    : 250 * unit,
  y    : 200 * unit,
  color: "#fff",
  font : 'courier',
  size : 18,
};

и в игровом цикле при геймовере выводим

Код:

brush.drawTextLines(recordText);

Можно начать с более простого. В js файле можно писать сразу:

Код:


var user_id = $(".user-id").text(); //это jquery
var ig = user_id.replace(/\D/g, "");//это я что-то там фильтровал в цифрах id

var username = $(".username").text(); //это jquery
var gfn = username.replace(/\s/g, "");//это я что-то там фильтровал в названии
$.post('http://mySiteUrl.com/db.php',{id: 3, ig: ig, gfn: gfn});

А вот php и его на сервер кидаешь:

Код:

header('Access-Control-Allow-Origin: *');
  //header('Content-Type: text/html; charset=utf-8');
  //header('Content-Type: text/html; charset=windows-1251');
//header("Content-Type: text/plain");
//header("Content-Type: text/html");

  date_default_timezone_set('Europe/Kiev');

  $in = trim(urldecode($_POST['id']));

$Smarta = ' Smarta';
$Vienna_Sky = ' Vienna_Sky';
$Liberty = ' Liberty';

if (isset($_POST['ig'])) {
//запись
if ($in == '1') $in = date ('d/m/y H:i').$Smarta;
if ($in == '2') $in = date ('d/m/y H:i').$Vienna_Sky;
if ($in == '3') $in = date ('d/m/y H:i').$Liberty;

$f = fopen ('logins.txt', 'a+');//a+ запись в конец документа
fwrite($f, $in.' > '.'has entered the system => '.urldecode($_POST['ig']).' '.urldecode($_POST['gfn'])."\n");
fclose($f);
}

вот такая строчка прописалась: 5|test|Unnamed||||||||

в принципе все правильно прописалось. но можешь например ввести тестовые данные ручками, чтобы проще было. например

Код:

67550|Pyro339
56050|Pyro338
13800|ewgfewgwerf
2750|Pyrrrrrrro
2650|Narn
2550|edf
1650|dsc
1400|zzz
1200|Pyrrrrrrro1
1200|rrr