|
Новые уроки по создание броузерной игры – 5
| |
| last2424 | Дата: Пятница, 15 Августа 2014, 21:27 | Сообщение # 1 |
30 мл. блоков
Сейчас нет на сайте
| Блин, я уже не знаю, сколько времени прошло с последнего урока по созданию браузерки.
Но, вы правы, это проклятый 5 урок, мною проклятый, потому что я проклял браузеро-разрабов.
<-- пред. урок
Что вы сегодня узнаете:
• Что такое аякс/эйджекс?
• Как работают наш клиент-сервер и запись кода?
• Минусы клиент сервера и почему я проклял браузеро-разрабов.
Давайте с начала узнаем какие технологий мы используем в нашем:
JavaScript
PHP
HTML
Почему я не указал аякс/эйджекс(это одно и тоже аякс – как называют русские, эйджекс – как говорится правильно)?
AJAX, Ajax (ˈeɪdʒæks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.
По-английски AJAX произносится как «э́йджэкс», по-русски довольно распространено «ая́кс».
AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:
• использование технологии динамического обращения к серверу«на лету», без перезагрузки всей страницы полностью, например:
• с использованием XMLHttpRequest (основной объект);
• через динамическое создание дочерних фреймов[1];
• через динамическое создание тега <script>[2].
• через динамическое создание тега <img>, как это реализовано в google analytics.
• использование DHTML для динамического изменения содержания страницы;
Действия с интерфейсом преобразуются в операции с элементами DOM (англ. Document Object Model), с помощью которых обрабатываются данные, доступные пользователю, в результате чего представление их изменяется. Здесь же производится обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей, или CSS (англ. Cascading Style Sheets), обеспечивают согласованный внешний вид элементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для асинхронного взаимодействия с сервером, обработки запросов пользователя и загрузки в процессе работы необходимых данных.
Три из этих четырёх технологий — CSS, DOM и JavaScript — составляют DHTML (англ. Dynamic HTML). По мнению некоторых специалистов,[каких?] средства DHTML, появившиеся в 1997 году, подавали большие надежды, но так и не оправдали их.
В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода, JSON или XML.
Спасибо википедий.
Собственно теперь как же это работает?
Я не буду долго писать, я просто скину картинку опять же из википердий.
Для тех кто работал с Construct Classic и плагином Network, давай те представим что через аякс мы отправляем те самые пакеты.
Теперь приступим к коду.
Клиент мы будем писать на html+js.
Сервер пишем на php.
Запросы с клиента отправляем и принимаем через AJAX.
Для создания клиент-сервер я использовал всего 3 файла:
game.php – вывод данных
condisk_server.js - Connect к серверу, наш первый клиентский скрипт.
server.php – сюда у нас будут приходить все запросы.
Теперь код:
Game.php:
Код <? header("Cache-Control: no-store, no-cache"); //отключаем кеширование, кеш - плохо set_time_limit(0); // скрипт работает бесконечно include 'conf.php'; // вставляем конфигурацию в игру if($server_work == 1 and $_SESSION['login_player'] != null){ //проверяем если сервер включён и пользователь авторизировался ?> <!DOCTYPE html> <html> <head> <title>THEBESTGAME</title> <script src="condisk_server.js"></script> <!--Подключаем condisk.php--> </head> <body> <div id="core"><h2></h2></div><!--Див в который будет выводится временная строчка с айди--> </body> </html> <? }else if($_SESSION['login_player'] == null){ //если пользователь не авторизирован echo 'Вы не авторизирвоались!'; // выводим строчку "Вы не авторизировались!" }else if($server_work != 1){ //если сервер не включён echo 'Сервер выключен.'; // выводим строчку "Сервер выключен." } ?>
Тут всё понятно, отключаем кеширование, даём бесконечность скрипту, подключаем конфиг, проверяем на авторизацию и проверяем включён ли сервер.
Condisk_server.js:
Код var sendreq = "onload=1"; //данные которые будем отправлять
var xmlhttp; //переменная через которую будут многие функций протекать
if (window.XMLHttpRequest) // если наш браузер использует XMLHttpRequest
{
xmlhttp=new XMLHttpRequest(); //в переменную записываем новый экземляр класса XMLHttpRequest
}
else if(window.ActiveXObject("Microsoft.XMLHTTP")) //иначе если у нас используется ActiveXObject("Microsoft.XMLHTTP")
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //записываем новый экземляр класса ActiveXObject("Microsoft.XMLHTTP")
}else{ //иначе
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); //записываем новый экземляр класса ActiveXObject("Msxml2.XMLHTTP")
}
window.onload = function(){ //если страницы загрузилась
xmlhttp.onreadystatechange=function() //через xmlhttp.onreadystatechange постоянно смотрим за состоянием xmlhttp
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) //если запрос удачно отправлен(или принят, я не помню уже) и статус равен 200, а не 404 или чему то другому
{
document.getElementById("core").innerHTML=xmlhttp.responseText; //записываем в наш див game.php весь текст который там выводится
}
}
xmlhttp.open("POST","server.php",true); //открываем асинхронное соединение с адресом server.php методом POST
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //отправляем заголовок, таким образом имитируя форму, POST запрос всегда требует форму
xmlhttp.send(sendreq); //отправляем запрос с данными которые записаны в sendreq
}
Создаём переменную senqreq в которой у нас находится данные которые отправляем,
подключаем аякс, для некоторых браузеров свои классы, потому что всё ещё есть те что сидят на старых браузерах.
Постоянно проверяем всё ли у нас хорошо с отправляемыми или отправляемыми(я не помню какие именно) данными. Если всё хорошо, выводим в div текст Ваш айди: “цифра”.
Открываем асинхронное соеденение с сервером, методом POST отправляем данные которые у нас в sendreq и последнее это отправляем заголовок, говоря что то что мы отправили – форма, POST будет работать только если будет отправлена форма.
Ну и остался последний файл server.php:
Код <?
header("Cache-Control: no-store, no-cache"); //кеш - зло
set_time_limit(0); // скрипт работает бесконечно
include 'conf.php'; //подключаем конфиг
$server_session = $users->findOne(array('s' => 1)); //ищем данные с колличеством игроков
$data_player = $users->findOne(array('login' => $_SESSION['login_player'])); //вытаскиваем данные пользователя
if(isset($_POST['onload'])){ //если пришёл POST onload
if($_SESSION['id'] == null){ //если айди пользователя пуст
$id = $server_session['id']+1; //прибавляем игрока
$_SESSION['id'] = $id; //присваиваем айди
$users->update(array('s' => 1), array('$set' => array("id" => $id))); //обновляем данные с колличеством игроков
$users->update(array('login' => $_SESSION['login_player']), array('$set' => array("id" => $_SESSION['id']))); //обновляем айди пользователя
}
}
if($data_player['id'] != $_SESSION['id']){ //если айди не равен айди кототый у пользователя в базе, не равен айди который находится в сессий
$users->update(array('login' => $_SESSION['login_player']), array('$set' => array("id" => $_SESSION['id']))); //обновляем айди
}
echo "Ваш айди ".$_SESSION['id']; //временно выводим айди
?>
Первые три строчки знакомы, отключаем кеш, бесконечим код, подключаем конфиг. 
Следующие 2 строчки устанавливают соединения с разными данными.
Первое соединение с данными о количестве игроков, второе о данных игрока.
Потом проверяем: если пришёл пост запрос, если у нас не присвоен айди, добавляем игрока, присваиваем айди, обновляем базу.
Следующая строчки проверяют если айди игрока в базе не равны с айди игрока в сессий, тогда обновляем базу.
И последняя строчка выводит.
Теперь что надо обновить:
Reg.php:
Код <?
include 'conf.php'; //подключаем конфиг
$select = $users->findOne(array('login' => $_POST['login']));
if(isSet($_POST['regestration']) && $_POST['password'] == $_POST['repassword'] && preg_match('/[0-9a-zA-Z]/', $_POST['password']) && preg_match('/[0-9a-zA-Z]/', $_POST['login']) && $_POST['login'] != $select['login']){ //если пароли одинаковы и в них вообще чего-нибудь написано
$users->insert( //запись в бд
array(
'login' => $_POST['login'], //логин пользователя
'password' => $_POST['password'], //пароль пользователя
'email' => $_POST['email'], //эмэйл пользователя
//основные характеристики персонажа
'charaster_class' => "",
'lvl' => 1,
'xp' => 0,
'hp' => 100,
'mn' => 100,
//второстепенные характеристики персонажа
'strength' => 0,
'speed' => 0,
'intelligence' => 0,
'faith' => 0,
'count_up' => 50,
//динамические данные
'x' => 0,
'y' => 0,
'session_id' => 0
));
$_SESSION['login_player'] = $_POST['login'];
echo '<script>
document.location.href = "http://25.120.133.229/charcreater.php";
</script>';//и переходим на страницу с с созданием персонажа
}
?>
<!DOCTYPE html>
<html>
<head>
<title>THE BEST GAME</title>
<link rel="stylesheet" type="text/css" href="stylereg.css">
</head>
<form action="reg.php" method="post">
<body>
<input type="text" placeholder="Login" name="login" class="textinputlogin"/>
<input type="email" placeholder="Email" name="email" class="textinputemail"/>
<input type="password" placeholder="Password" name="password" class="textinputpassword"/>
<input type="password" placeholder="Repeat password" name="repassword" class="textinputrepassword"/>
<input type="submit" value="Зарегистрироваться" name="regestration" class="button"/>
</form>
</body>
</html>
Тут можно увидеть что я добавил ещё 3 колонки: x, y и id игрока, оси x и y все должны знать что это такое, это все должны били проходить в школе на математики, айди это личный индификатор игрока, по нему будут ориентироваться другие игроки.
Conf.php:
Код <?session_start(); // запускаем сессию
ini_set('session.save_path', $_SERVER['DOCUMENT_ROOT'] .'../sessions/'); //меняем место положение наших сессий(возможно на бесплатных хостингах работать не будет закомементируйте, если что)
ini_set('session.gc_maxlifetime', 120960); //долгая жизнь сессий
$server_work = 1;
$dbhost = 'localhost'; //адрес хоста к mongodb
$dbname = 'thebestgame'; //имя базы данных
//подключение к mongodb
$m = new Mongo("mongodb://$dbhost");
$db = $m->$dbname;
//коллекций из которых делается выборка
$users = $db->users;
?>
Сюда я добавил переменную $server_work которая равна 1, это состояние сервера, если вы напишите 0 или любую другую цифру, сервер выключится, и игроки не смогут зайди что бы поиграть.
Хорошо, с кодом мы полностью закончили на этом уроке, теперь мы поговорим о минусах этого кода и почему я проклинаю браузеро-разрабов. 
Минус кода в том, что при выходе клиента, закрытий страницы у нас ничего не происходит, то есть айди не обнуляется, пока не решите или я не решу эту проблемку, делаем так: много айди собралось, отключаем сервер в базе количество пользователей ставим 0, и включаем обратно.
Браузеро-разрабов я проклиняю за то что они испоганили функцию onbeforeload, она должна работать только когда пользователей перешёл на чужую страницу или вышел с сервера, а она каким то боком работает ещё и при обновлений страницы и за то что не работает функция onunload или unload(как удобно), они говорят мол, если они оставят её, будут сайты с которых нельзя выйти, но мне кажется гуманнее было запретить запрещать выход со страницы, они этого не сделали и я зол на них.
Всё, на этом я заканчиваю, следующий урок будет, не скоро.
P.S. не забудьте добавить в базу в коллекций Users, следующее:
Предупреждение: всё что я написал в зачёркнутом виде является шуткой и никак не пытает обидеть того к кому обращаются.(нет)
Сообщение отредактировал last2424 - Суббота, 16 Августа 2014, 16:02 |
|
|
| |
| dima9595 | Дата: Пятница, 15 Августа 2014, 21:54 | Сообщение # 2 |
почти ветеран
Сейчас нет на сайте
| ИМХО: лучше бы для ajax использовать jQuery, он удобнее...
|
|
|
| |
| last2424 | Дата: Пятница, 15 Августа 2014, 21:55 | Сообщение # 3 |
|
30 мл. блоков
Сейчас нет на сайте
| dima9595, ой, jQuery для меня странная вещь, вроде бы подключен, а вроде бы нет.
Не, ну честно, начинаю использовать функцию и не понятно, работает она или не работает.
Ну а вообще я шучу, всё с ним нормально, просто мне его не удобно использовать.
Предупреждение: всё что я написал в зачёркнутом виде является шуткой и никак не пытает обидеть того к кому обращаются.(нет)
Сообщение отредактировал last2424 - Пятница, 15 Августа 2014, 22:18 |
|
|
| |
| Folleah | Дата: Пятница, 15 Августа 2014, 22:15 | Сообщение # 4 |
Архитектор
Сейчас нет на сайте
| Цитата last2424 (  ) dima9595, ой, jQuery для меня странная вещь, вроде бы подключен, а вроде бы нет.
Аххахахаххахаа.
Сообщение отредактировал Folleah - Пятница, 15 Августа 2014, 22:15 |
|
|
| |
| liker | Дата: Пятница, 15 Августа 2014, 22:15 | Сообщение # 5 |
почетный гость
Сейчас нет на сайте
| Цитата last2424 ( ) ой, jQuery для меня страшная вещь, я его даже подключить нормально не могу
ААА да как так, Всё, я взорвался от возмущения  
|
|
|
| |
| last2424 | Дата: Пятница, 15 Августа 2014, 22:26 | Сообщение # 6 |
|
30 мл. блоков
Сейчас нет на сайте
| liker, (да, да, пусть у всех бомбит )
Добавлено (15.08.2014, 22:26)
---------------------------------------------
last2424, если кто хочет, могу собрать группу в скайпе, будите сидеть и смотреть, как я кодю(учтём, что микрофон в настоящее время отвалился(вернее провод))
Предупреждение: всё что я написал в зачёркнутом виде является шуткой и никак не пытает обидеть того к кому обращаются.(нет)
Сообщение отредактировал last2424 - Пятница, 15 Августа 2014, 22:26 |
|
|
| |
| lvovand | Дата: Пятница, 15 Августа 2014, 22:47 | Сообщение # 7 |
|
старожил
Сейчас нет на сайте
| общее понимание аяксовых запросов конечно хорошо иметь, но при разработке уже говорили про готовые библиотеки, тот же jquery, и не надо тогда разработчиков браузеров проклинать, все уже готово, занимаешься просто логикой, иначе когда будет куча запросов и обработчиков, в коде тупо закопаться можно будет или писать и подключать свою библиотеку )
Разработка и продвижение сайтов. Дизайн
|
|
|
| |
| nikanator | Дата: Пятница, 15 Августа 2014, 23:01 | Сообщение # 8 |
был не раз
Сейчас нет на сайте
| Егоро молодец, 5 из 5 и пожелаем ему удачи на новой работе. 
|
|
|
| |
| last2424 | Дата: Пятница, 15 Августа 2014, 23:42 | Сообщение # 9 |
|
30 мл. блоков
Сейчас нет на сайте
| lvovand, у меня всё по разным файлам будет раскидано, останется только через html подключать их.
P.S. всё точно также как и в обычном яваскрипт, не работает unload.
Предупреждение: всё что я написал в зачёркнутом виде является шуткой и никак не пытает обидеть того к кому обращаются.(нет)
Сообщение отредактировал last2424 - Пятница, 15 Августа 2014, 23:56 |
|
|
| |
| lvovand | Дата: Суббота, 16 Августа 2014, 00:17 | Сообщение # 10 |
|
старожил
Сейчас нет на сайте
| Цитата nikanator ( ) не работает unload
проверяешь не было ли сбоя при загрузке страницы или закрытие страницы надо отловить?
Разработка и продвижение сайтов. Дизайн
|
|
|
| |
| last2424 | Дата: Суббота, 16 Августа 2014, 00:26 | Сообщение # 11 |
|
30 мл. блоков
Сейчас нет на сайте
| lvovand, второе.
Предупреждение: всё что я написал в зачёркнутом виде является шуткой и никак не пытает обидеть того к кому обращаются.(нет)
|
|
|
| |
| lvovand | Дата: Суббота, 16 Августа 2014, 00:35 | Сообщение # 12 |
|
старожил
Сейчас нет на сайте
| last2424, попробуй событие beforeunload, хочешь пользователя мучить, правда ли что он выйти хочет? )
Разработка и продвижение сайтов. Дизайн
|
|
|
| |
| last2424 | Дата: Суббота, 16 Августа 2014, 00:37 | Сообщение # 13 |
|
30 мл. блоков
Сейчас нет на сайте
| lvovand, нет, это для изменения колличества игроков, beforeunload работает при обновлений страницы тоже, я с оперы сижу.
Предупреждение: всё что я написал в зачёркнутом виде является шуткой и никак не пытает обидеть того к кому обращаются.(нет)
|
|
|
| |
| lvovand | Дата: Суббота, 16 Августа 2014, 00:44 | Сообщение # 14 |
|
старожил
Сейчас нет на сайте
| Цитата last2424 ( ) это для изменения колличества игроков
заведи поле онлайн-статуса в таблице игроков или временную метку, и при авторизации или каком-либо действии либо статус обновляется, либо метка времени, и потом смотришь либо статус, либо тех, у кого метка времени больше определенного значения.
на unload надеяться, ну если только для подстраховки
Разработка и продвижение сайтов. Дизайн
|
|
|
| |
| last2424 | Дата: Суббота, 16 Августа 2014, 00:58 | Сообщение # 15 |
|
30 мл. блоков
Сейчас нет на сайте
| lvovand, нееее, способ не годится что бы написать нормальный таймер надо кучу времени убить, и подумать, я так и не смог придумать его. Бал вариант проверять последний приход POST запроса между определённым временем, но я тоже не смог реализовать его, как то так, сейчас такие вещи не сделать, тут вариант только один, писать свой браузер, каким то образом кодировать код под сайты на этот браузер, что бы нельзя было использовать в опере например.
Предупреждение: всё что я написал в зачёркнутом виде является шуткой и никак не пытает обидеть того к кому обращаются.(нет)
Сообщение отредактировал last2424 - Суббота, 16 Августа 2014, 11:39 |
|
|
| |
| maker-rus | Дата: Вторник, 19 Августа 2014, 23:59 | Сообщение # 16 |
Гений
Сейчас нет на сайте
| Цитата last2424 ( ) last2424, если кто хочет, могу собрать группу в скайпе, будите сидеть и смотреть, как я кодю(учтём, что микрофон в настоящее время отвалился(вернее провод))
Хорошая идея, как реализуешь ее - сообщи
|
|
|
| |
|
