MainData

Урок № 2 Создание формы входа и I этап регистрации

Евгений — Sat, 11 Jan 2014 08:53:31 GMT

Итак приступаем ко второму уроку. Здесь я опишу как с помощью html создаються формы, и как с помощью php можно записать данные, введенные в эти формы, в БД.
Сначала создадим форму входа, она будет состоять с двух полей ввода для email игрока и пароля. Также на ней будет 2 кнопки, одна кнопка ведет на скрипт регистрации, другая инициализирует игрока и перемещает его в игру. Для начала перейдите в папку htdocs что находиться в каталоге xampp, у меня это C:\xampp\htdocs\ и удалите все что там есть.
Итак приступим к написанию скрипта, создайте с помощью PSPad новый документ и назовите его index.php, сохраните этот документ в папке htdocs, которая находиться в каталоге xampp. У меня это C:\xampp\htdocs\
После того как сохранили вставьте код приведенный ниже, а лучше перепишите, так вы лучше поймете и запомните.

Code

              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    xml:lang="ru">











  BTG – браузерная онлайн Flash игра

С формой входа справились, сохраняем ее, открываем браузер и переходим по такому адресу http://localhost/index.php и видим примерно следующее (картинка). Так сказать не очень впечатляет такое расположение элементов. Что б все красиво оформить создаем в PSPad документ CSS(Cascading Style Sheet) и называем его style.css. В этом документе мы будем хранить всю графическую информацию главной страницы сайта и I этапа регистрации. Приступаем к еаписанию кода.

Code

/* Задаем значения для той области документа, которая находиться между тегами . background-color это фон нашего сайта, я установил на черный, все остальные значения обозначают что у нас отступы от краев браузера будут равны 0, тоесть их совсем не будет */
  body {background-color:#000000;margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}
  /* Задаем значения для той области которая находиться в теге

с именем entry(id=entry)
  Задаем цвет текста белый, и выравнивание по-центру */
  #entry {color:#ffffff;text-align:center;}
  /* Здесь описываються значения для наших кнопок. Размер шрифта, цвет текста, сам шрифт, цвет фона и цвет рамки вокруг кнопки  */
  .btn {font-size:7.5pt;color:#dfddd3;font-family:Verdana,Arial,Helvetica,sans-serif;background-color:#2b2b18;border:1px double #817A63;}
  /* Здесь описываються значения для наших полей ввода. Размер шрифта, цвет текста, сам шрифт, цвет фона и цвет рамки вокруг поля */
  .inup {text-align:center;font-size:8pt;color:#dfddd3;font-family:Verdana,Arial,Helvetica,sans-serif;background-color:#151616;border: 1px double #817a63;}

Сохраняем документ и снова переходим по адресу http://localhost/index.php и теперь видим более менее приличную картину (картинка). Вы конечно можете переделать цвет и фон по своему, это будет вам на пользу. Теперь если нажать на кнопку Вход то перейдем по адресу http://localhost/login.php , но нам выдаст ошибку так как такого файла нету, мы его еще не создали. И если нажать на кнопку Регистрация, тоже выдаст ошибку, так как тоже такого файла еще нету.
Файл login.php мы создадим в 3 уроке. Сейчас возьмемся за файл reg.php. Создаем в PSPad'e новый php файл, сохраняем его с именем reg.php в папку где находиться index.php и style.css. Итак, что же у нас будет в файле регистрации? Будет 3 поля, в одном нужно будет ввести email игрока, в другом пароль и в третьем подтверждение пароля. Также у нас будет check-box для согласия с правилами игры. Ну и конечно кнопка Далее. При создании этого файла мы впервые столкнемся с языком php, на котором напишем условие проверки заполнения полей, а также записи данных в БД. Но для начала нам нужно создать файл conf.php, в нем будет храниться информация о нашей БД. Все php скрипты пишуться в таких вот кавычках
Выглядеть это будет так:

Code

  $base_name="localhost"; //имя (стандартно у всех localhost)
  $base_user="root"; //юзер (стандартно у всех root)
  $base_pass="password"; //пароль (выставить можно зайдя во вкладку Привилегии в phpMyAdmin
  $db_name="testgame"; //имя БД
  ?>

Теперь мы можем приступить к написанию скрипта регистрации:

Code

  session_start(); //стартуем сесию

  include "conf.php"; //подключаем файл с параметрами БД

  /* Подключаемся к БД, если не получаеться, то выводим ошибку */
  $data = mysql_connect($base_name, $base_user, $base_pass);
  if(!mysql_select_db($db_name,$data)){
                echo "
";
                echo mysql_error();
                die();
  }
  //Прверяем на заполнение полей
  if ($_POST['next']){ //если нажата кнопка далее, то
  $error=0; // переменная равна 0
  //Проверка на мыло
  if (!$_POST['email']){ $errm = "Вы не ввели e-mail
"; $error=1;}
  if(!preg_match("/^[_\.0-9a-z-]{1,}@[_\.0-9a-z-]{1,}\.[_\.0-9a-z-]{2,}$/", $_POST ["email"])) {$errm .= "Неправильный e-mail"; $error =1;}
  $c_e = mysql_num_rows(mysql_query("SELECT id_user FROM users where email='".$_POST ["email"]."'")); {if ($c_e>0) {$errm .= "Данный e-mail уже зарегистрирован в игре"; $error=1;}}
  //Проверка на пароль
  if(!$_POST ["pass"]) {$errp = "Необходимо указать Ваш пароль
"; $error =1;}
  if(!preg_match("/^[А-Яа-яЁёa-zA-Z0-9]+$/",$_POST ["pass"])) {$errp .= "Пароль содержит запрещенный символ
"; $error =1;}
  if (strlen ($_POST ["pass"])<6 || strlen ($_POST ["pass"])>25){ $errp .="Длина пароля от 6 до 25 символов
"; $error =1;}
  if ($_POST ["pass"]!= $_POST ["pass2"]){ $errp .="Введёные вами пароли не совпадают!"; $error =1;}
  //проверка на согласие с правилами
  if (!$_POST['rules']) {$errr = "Вы не согласны с правилами?
"; $error=1;}
  // Нет ошибок, создаём перса
  if(!$error)
  {
  $ip = $_SERVER['REMOTE_ADDR'];//узнаем ip адрес юзера
  /* Записываем данные в БД */
  mysql_query ("INSERT INTO users (pass, ip, email) values('".md5($_POST ["pass"])."','".$ip."','".addslashes($_POST ["email"])."')") or die("Invalid query: " . mysql_error());
  $_SESSION['user'] = $_POST['email']; //записуем email в глобыльную переменную $_SESSION
  $_SESSION['ip'] = $ip;//записуем ip в глобыльную переменную $_SESSION
  ?>

    }
  }
  // Выводим ошибочки
  function err($text){
  return "$text";
  }
  ?>
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    xml:lang="ru">





  BTG – браузерная онлайн Flash игра

Теперь обьясняю. После нажатии кнопки Далее происходит проверка скрипта, если все поля введены, то переадресовываем на следующую страницу в которой будет создавать своего персонажа, но это в 3 уроке.
Если поля или какое то поле пустое, то выводиться ошибка.
Так же у нас появился новый параметр — ip. Мы его не обозначили в нашей БД. Так что заходим в phpMyAdmin, Переходим по нашей БД testgame, жмем на таблицу users и добавляем ip.

Теперь нам нужно подправить файл style.css, так как в нашем скрипте добавился еще один класс reg. Добавим следующий код:

Code

reg {color:#ffffff;text-align:center;}
  .error {FONT-SIZE:8pt;FONT-FAMILY:verdana;COLOR:red;}
  A:link {COLOR:#F9F7EA;TEXT-DECORATION:none;font-weight:normal;}
  A:visited {COLOR:#F9F7EA;TEXT-DECORATION:none;font-weight:normal;}
  A:active {COLOR:#77684D;TEXT-DECORATION:none;font-weight:normal;}
  A:hover {COLOR: #7E7765;TEXT-DECORATION:underline}

A:link, A:visited, A:active, A:hover — описывают состояние ссылки при наведении на нее мишки, при нажатии, при покидании области ссылки и в неактивном состоянии.

Вот и второй урок подошел к концу, если возникли вопросу, прошу задавайте, буду рад ответить.

[/code][code]

Урок по созданию браузерной игры № 1

Евгений — Sun, 02 Dec 2012 18:53:45 GMT

Урок № 1 Обсуждение игры. Создание БД

Появилась такая идея как создать курс по теме: «Создание браузерной флеш игры». В этом курсе будет описываться главные аспекты игры, также, надеюсь, под конец курса многие поймут как делаються такие игры. Может возьмут этот курс за основу для своей будущей игры. Все уроки которые будут здесь написаны, будут максимально прокоментированы, если что то не понятно, то задавайте вопросы сразу в той теме в которой написан урок.

web-coder

Сообщений: 1081
Сейчас нет на сайте Урок № 1 Обсуждение игры. Создание БД

Появилась такая идея как создать курс по теме: «Создание браузерной флеш игры». В этом курсе будет описываться главные аспекты игры, также, надеюсь, под конец курса многие поймут как делаються такие игры. Может возьмут этот курс за основу для своей будущей игры. Все уроки которые будут здесь написаны, будут максимально прокоментированы, если что то не понятно, то задавайте вопросы сразу в той теме в которой написан урок.

Что понадобиться:
PSPad – программа для написания php скриптов ( можно и другие, но я пользуюсь этой и привык к ней ).
http://www.pspad.com/ru/download.php
FlashDevelop – для написания флеш модулей ( далее буду писать его сокращенно FD)
http://gcup.ru/forum/48-1963-1
xampp — сборка веб-сервера ( будем тестировать наши скрипты )
http://www.apachefriends.org/en/xampp-windows.html
http://gcup.ru/load/konstruktory_igr/rpg_maker/2-1-0-36

Так как я не очень хорошо рисую, все картинки буду брать из конструктора RPG Maker.
Думаю с программами определились, перейдем к описанию уроков.

База данных

Итак начнем с сердца игры, ее Базы Данных (далее БД). Для чего она нужна? В ней будут храниться все данные, такие как: характеристики персонажа, сообщения в чате, какие предметы находяться в инвентаре и т.д. Мы будем пользоваться БД MySQL, так как она очень хорошо подходит для наших php скриптов. БД хранит в себе таблицы, в каждой таблице находяться столбцы, например таблица «users» имеет 3 столбца: “login”, “pass”, “email”. Думаю с этим разобрались.

У нас будет 7 таблиц:
users – хранит все характеристики игрока
avatar – хранит вид персонажа
chat – хранит сообщения чата
inventar – отображает какие вещи в инвентаре
quest – хранит данные о квесте
battle – хранит данные о боях
enemy – хранит данные о врагах

В дальнейшем БД может дополниться. Теперь рассмотрим каждую таблицу отдельно.
В таблице users будем хранить такие данные:
id_user – уникальный номер персонажа
email — email игрока, по нему будет осуществляться вход в игру
pass - пароль
name — имя игрока, будет отображаться в самой игре и в чате
life – жизни персонажа
atk — значение атаки
def - значение защиты
lov – значение ловкости
lvl – уровень игрока
exp – опыт игрока
В таблице avatar такие данные:
id_ava – уникальный номер аватарки
gander – какого пола персонаж
vid – какой вид у персонажа
path – путь к папке с картинками персонажа
В таблице chat такие данные:
id_msg – уникальный номер сообщения
msg – сообщение
time_msg – время когда было написано сообщение
wrt_user – кто написал
who – кому написали
В таблице inventar такие данные:
id_inv – уникальный номер вещи
name_object – название вещи
atk_up – сколько добавляет к атаке
def_up - сколько добавляет к защите
lov_up - сколько добавляет к ловкости
life_up - сколько добавляет к жизням
В таблице quest такие данные:
id_quest – уникальный номер квеста
cont_quest – завершен квест или нет?
kill_quest – сколько убито противников
В таблице battle такие данные:
id_btl – уникальный номер битвы
end_btl – исход битвы ( выиграли вы или проиграли )
В таблице enemy такие данные:
id_enm – уникальный номер врага
name_enm – имя врага
life_enm – жизни врага
atk_enm - атака
def_enm - защита
lov_enm - ловкость
exp_enm – сколько опыта даст если победить его
path_enm – путь к картинкам врага

Думаю все, если чего то не хватает, то по ходу написания доделаем. С установкой xampp я думаю разобрались. Теперь запустите его, в xampp Control Panel должно быть запущено Apache и MySQL, все остальное выключено. Напротив MySQL есть кнопка Admin, жмите на нее и попадете в утилиту phpMyAdmin, которая позволяет создавать БД. В открывшемся окне браузера находим вкладку SQL и жмем ее (картинка). Теперь пришло время создать нашу БД, а также ознакомиться со скриптовым языком SQL. Ниже приведен код и прокоментирован, если все таки возникнут вопросы, то задавайте.

Code

кодировкой  cp1251(для того что б поддерживался русский язык)*/
  USE testgame; /* используем данную БД */

  /* таблица персонажа */
  CREATE TABLE `users` (
                             id_user    bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
                             email    CHAR(64), /* текстовый тип (64 символа) */
                             pass  CHAR(32), /* текстовый тип (32 символа) */
                             name  CHAR(32), /* текстовый тип (32 символа) */
                             life  INT DEFAULT 50, /* числовой тип, по умолчанию равен 50 */
                             atk  INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */
                             def  INT DEFAULT 5, /* числовой тип, по умолчанию равен 5 */
                             lov  INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */
                             lvl  INT DEFAULT 1, /* числовой тип, по умолчанию равен 1 */
                             exp  INT DEFAULT 0, /* числовой тип, по умолчанию равен 0 */
                            PRIMARY KEY  (`id_user`)  /* Показываем что уникальным номером у нас являеться id_user */
  ) ENGINE=MyISAM DEFAULT CHARSET=cp1251; /* Обозначаем тип таблицы MyISAM. Таблицы типа MyISAM показывают хорошие результаты при выборках SELECT. Для .jktt подробного изучения читайте Самоучитель по MySQL 5 */

  /* таблица аватара */
  CREATE TABLE `avatar` (
  id_ava  bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
  gander  SMALLINT(1), /* Пол игрока, цыфровой тип(1 цыфра) */
  vid  SMALLINT(2), /* Вид игрока,  цыфровой тип(2 цыфры)*/
  path  CHAR(32), /* Путь к папке с рисунками персонажа, текстовый тип(32 символа) */
  PRIMARY KEY (`id_ava`) /* Показываем что уникальным номером у нас являеться id_ava */
  ) TYPE=MyISAM;

  /* таблица чата */
  CREATE TABLE `chat` (
  id_msg  bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
  msg  CHAR(255), /* текстовый тип(255 символов) */
  time_msg    CHAR(5), /* текстовый тип(5 символов) */
  wrt_user    CHAR(32), /* текстовый тип(32 символов) */
  who  CHAR(32), /* текстовый тип(32 символов) */
  PRIMARY KEY (`id_msg`) /* Показываем что уникальным номером у нас являеться id_msg */
  ) TYPE=MyISAM;

  /* таблица инвентаря */
  CREATE TABLE `inventar` (
  id_inv  bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
  name_object    CHAR(64),
  atk_up  INT(2),
  def_up  INT(2),
  lov_up  INT(2),
  life_up  INT(4),
  PRIMARY KEY (`id_inv`) /* Показываем что уникальным номером у нас являеться id_msg */
  ) TYPE=MyISAM;

  /* таблица квеста */
  CREATE TABLE `quest` (
  id_quest    bigint(20) unsigned NOT NULL auto_increment,
  cont_quest  CHAR(32),
  kill_quest  INT DEFAULT 0,
  PRIMARY KEY (`id_quest`)
  ) TYPE=MyISAM;

  /* таблица боя */
  CREATE TABLE `battle` (
  id_btl  bigint(20) unsigned NOT NULL auto_increment,
  end_btl    CHAR(32),
  PRIMARY KEY (`id_btl`)
  ) TYPE=MyISAM;

  /*  */
  CREATE TABLE `enemy` (
  id_enm    bigint(20) unsigned NOT NULL auto_increment,
  name_enm    CHAR(32),
  atk_enm    INT,
  life_enm    INT,
  def_enm    INT,
  lov_enm    INT,
  exp_enm    INT,
  path_enm    CH        AR(32),
  PRIMARY KEY (`id_enm`)
  ) TYPE=MyISAM;

  /* Добавляем в таблицу данные о враге */
  INSERT INTO enemy (name_enm,
  atk_enm,life_enm,def_enm,lov_enm,exp_enm,path_enm)
  VALUES('Призраки','7','40','6','4','10','path/enemy/');

С таблицей справились, проверяем, все нормально. SQL запрос прошел удачно. На этом урок заканчиваеться, ждите продожения

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

E-mail:
Пароль:
Повторите пароль: