Рубрика // Сайтостроение 22.02.12

Создание приложения Вконтакте – подключение пользователя к столу

У нас должно получиться следующее: 

http://goldwebmaster.net/document/main.swf

Принцип подключения:
Любой пользователь всегда может создать стол для игры. В то же время всегда можно посмотреть созданные столы и подключиться к нужному.

Игроки по очереди делают ходы. В нашем случае — просто по очереди двигают квадратики, чтобы не загромождать код.

Для начала зарегистрируем домен. Для примера нам подойдет бесплатный домен с поддержкой php и mysql. (в дальнейшем же для того чтобы не было задержек в игре лучше перенести игру на платный хостинг). Бесплатный хостинг, который я выбрал ОООЧень глючный и не стабильный (зато бесплатный )))

Итак регистрируемся. Я выбрал 000a.biz

post-1897577-1310356588
После подтверждения емайла нам приходит ссылка в нашу панель управления. (иногда подтверждение приходит довольно долго).

Когда получили письмо переходим в панель управления и логинимся данными, которые пришли к нам по почте. 

post-1897577-1310356623
Далее переходим в Account Settings, спускаемся вниз и жмем на ссылку MySQL databases – View/Create 

post-1897577-1310356655

Вводим имя нашей базы данных (я назвал её “basezero”), жмем кнопку “Create DataBase”, затем , когда она у нас появится – начнем администрировать:Admin

post-1897577-1310356692

Создаем таблицу 
post-1897577-1310356738

Жмем ОК.
Нам предложат сразу же указать поля. Заполняем все как на картинке и читаем комментарии 
post-1897577-1310356817

Поля мы обозвали id, serverTime и busyrow
В первом поле у нас будет идентификатор стола, во втором время, когда к нему последний раз обращался пользователь (на проверку, вдруг пользователь отключился и стол просто пустует)
В третьем поле мы указываем – подключился ли туда второй игрок. Игра у нас на двоих, значит если один игрок стол создал, а второй подключился, то стол у нас будет занятым и не будет отображаться в списке.

Длинна значения – это длинна содержимого. Для id нам подойдет 10значное полу для времени 15значное, т.к. время будем брать nixовое ну и занятость – длинной в 1 символ (0 – свободно, 1 – занято)

У поля id ставим галочку AUTO_INCREMENT – как только поле будет создаваться – ему автоматически будет присваиваться идентификационный номер.

Жмем Сохранить.

Таким же методом создаем еще одну таблицу с полями:

Id – ставим AutoEncrement, 10 значное
Stol – 15 значное
WhoHod – длина в 1 символ
What Hod – дина в 1 символ.

Так же скидываем файл crossdomain.xml в корневой каталог сервера(хостинга). Этот файл нужен для того, чтобы флэшка беспрепятственно общалась из вконтакте с нашим сервером. (файл найдете во вложении)

Создаем php файл с именем Server.php

Теперь пишем php код:

<?php
//Это данные, которые мы получим от флэшки
$doing = $_POST[‘do’];
$TextG = $_POST[‘table’];
$WhoHod = $_POST[‘HdNeed’];
$WhatHod = $_POST[‘Whathd’];
//Подключаемся к базе данных
mysql_connect("Сервер", "логин", "пароль");
mysql_select_db("a000b_7716180_basezero");

//если от флэшки пришли данные pokaz то
if ($doing == "pokaz") {
//берем из базы все значения, в которых busyrow=0 (т.е. игра которая не занята)
$result=mysql_query("SELECT * FROM TableOfTables WHERE busyrow=0" );
// переносим все в xml формат
$xml = ‘<?xml version="1.0"?><response>’;
while ($row=mysql_fetch_array($result))
{
$xml.= ‘<post uid="’. $row[‘id’]. ‘">’;
$xml.= ‘</post>’;
}
$xml.= ‘<rstt otv="otvet"></rstt>’;
$xml.= ‘</response>’;
//и отправляем флешке
print "result=$xml";
}
// аналогично на создание базы. Если пришла команда создать
if ($doing == "create") {
в базе данных создаем стол
$result=mysql_query("INSERT INTO TableOfTables(serverTime, busyrow) VALUES (‘123′,’0’)" );
И номер созданого стола отправляем флешке
$xml = ‘<?xml version="1.0"?><response>’;
$xml.= ‘<post uid="’. mysql_insert_id(). ‘">’;
$xml.= ‘</post>’;
$xml.= ‘<rstt otv="youcreate"></rstt>’;
$xml.= ‘</response>’;
print "result=$xml";
}
//если второй пользователь сел за стол, то в поле busyrow записываем 1, значит стол занят
if ($doing == "iamsel") {
$result=mysql_query("UPDATE TableOfTables SET busyrow=’1′ WHERE id=’" . $TextG . "’" );
$xml = ‘<?xml version="1.0"?><response>’;
$xml.= ‘<post uid="okyousel">’;
$xml.= ‘</post>’;
$xml.= ‘<rstt otv="okyousel"></rstt>’;
$xml.= ‘</response>’;
print "result=$xml";
}

// флэшка, которая создала стол отправляет команду на проверку сел ли второй игрок
if ($doing == "needGamer2") {
$result=mysql_query("SELECT * FROM TableOfTables WHERE id=’" .$TextG. "’" );
$xml = ‘<?xml version="1.0"?><response>’;
while ($row=mysql_fetch_array($result))
{
$xml.= ‘<post busy="’. $row[‘busyrow’]. ‘">’;
$xml.= ‘</post>’;
}
$xml.= ‘<rstt otv="busyst"></rstt>’;
$xml.= ‘</response>’;
print "result=$xml";
}

Если кто-то походил, то записываем наш ход в таблицу
if ($doing == "IamHod") {
$result=mysql_query("INSERT INTO TableOfHod(Stol, WhoHod, WhatHod) VALUES (‘" . $TextG . "’,’" . $WhoHod . "’, ‘" . $WhatHod . "’)" );
$xml = ‘<?xml version="1.0"?><response>’;
$xml.= ‘<post hod="Ok">’;
$xml.= ‘</post>’;
$xml.= ‘<rstt otv="ipohodil"></rstt>’;
$xml.= ‘</response>’;
print "result=$xml";
}

Проверяем кто походил и как
if ($doing == "WhoisHod") {
$result=mysql_query("SELECT * FROM (SELECT * FROM TableOfHod WHERE Stol=’" . $TextG . "’ ORDER BY id DESC LIMIT 1) alias ORDER BY id");
$xml = ‘<?xml version="1.0"?><response>’;
while ($row=mysql_fetch_array($result))
{
$xml.= ‘<post hodis="’. $row[‘WhoHod’]. ‘" kvis="’ . $row[‘WhatHod’] . ‘">’;
$xml.= ‘</post>’;
}
$xml.= ‘<rstt otv="provhod"></rstt>’;
$xml.= ‘</response>’;
print "result=$xml";
}

?>

Все, сохраняем наш пхп файл на сервер(хостинг) и переходим к написанию флэша.

Приступаем к созданию меню. Создаем обыкновенный fla файл с поддержкой AS.30.
Бросаем на сцену компонент List 
post-1897577-1310356943
Задаем ему Instance name — “listTable”.
И из common libraries бросаем какую-нибудь кнопку (лучше конечно кнопку нарисовать самому, но нам, для примера, и стандартная сойдет). Задаем кнопке instance name — “buttonCreate” 
post-1897577-1310357003
Собственно меню создания стола готово. Создаем новый слой, обзываем его «код» и жмем F9

ПРОДОЛЖЕНИЕ КОДА


import flash.net.URLVariables;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
stop();
// стоим в первом кадре
var schet:uint;
// наш счетчик
var MyTable:String;
// в этой переменной будет храниться номер нашего стола

var iAmcreater:int;
//храним номер игрока
closer.visible=false;
// закрывающий сцену клип, на случай медленной связи
Security.loadPolicyFile("http://cityowlet.000a.biz/crossdomain.xml");
// указываем путь к файлу кросдомена. Он нужен для того, чтобы флешка безпрепятственно общалась с сервером
schet=setInterval(gtTable,1000)
//запускаем счетчик с интервалом в 1 секунду (если перенесете все на платный хостинг – снизьте это значение до 300, или ниже)
var loaderN:URLLoader = new URLLoader();
// объявляем загрузчик
loaderN.dataFormat=URLLoaderDataFormat.VARIABLES;
loaderN.addEventListener(Event.COMPLETE, printResponse);
//если мы получаем какие-либо данные от пхп – вызываем функцию printResponse

function gtTable():void{
//функция запроса к пхп с целью спросить свободные столы
var variables:URLVariables = new URLVariables("do=pokaz" );
var request:URLRequest = new URLRequest();
request.url="http://cityowlet.000a.biz/Server.php";
//адрес нашего пхп файла
request.method=URLRequestMethod.POST;
request.data= variables;
loaderN.load(request);
}

function printResponse (e:Event):void{
var response:XML=XML(e.target.data.result)
var postsList:XMLList = response.post;
var postsZapros:XMLList = response.rstt;
var postsNum:uint = postsList.length();
// смотрим данные которые пришли от пхп. Они у нас в формате XML
if (postsZapros[0].@otv=="otvet"){
//если пришел вышеуказанный ответ, то
listTable.removeAll()
for (var i:int =0; i<postsNum; i++) {
listTable.addItem( {label:"Стол №" + postsList[i].@uid, data:postsList[i].@uid} )
//обновляем лист со столами
}
}
if (postsZapros[0].@otv=="youcreate"){
если нам сказали, что мы успешно создали стол, то
MyTable=postsList[0].@uid;
// записываем в нашу переменную номер стола (он нам теперь нужен)
iAmcreater=1;
//говорим что мы создатель стола
kickAll()
// вызываем функцию убийства всех слушателей
}
if (postsZapros[0].@otv=="okyousel"){
clearInterval(schet);
kickAll()
}

}

listTable.addEventListener(MouseEvent.CLICK ,UserListClick);
// следим за кликами по листу
function UserListClick (event:MouseEvent):void{ //Клик по списку
closer.visible=true;
//закрываем сцену на случай медленной связи
var i:int;
for (i=0; i<this.listTable.length; i++){
if (listTable.isItemSelected(this.listTable.getItemAt(i))) {
MyTable=listTable.getItemAt(i).data;
iAmcreater=2;
clearInterval(schet);
closer.visible=true;
//перебираем значения листа и смотрим тот который выделен
var variables:URLVariables = new URLVariables("do=iamsel&table="+MyTable);
//отправляем данные для пхп, говорим что мы сели за стол.
var request:URLRequest = new URLRequest();
request.url="http://cityowlet.000a.biz/Server.php";
request.method=URLRequestMethod.POST;
request.data= variables;
loaderN.load(request);
}
}
}

buttonCreate.addEventListener(MouseEvent.CLICK ,createTable);
function createTable (event:MouseEvent):void{
// нажали на кнопку создания стола
closer.visible=true;
clearInterval(schet);
var variables:URLVariables = new URLVariables("do=create" );
//отправляем пхп что мы создаем стол
var request:URLRequest = new URLRequest();
request.url="http://cityowlet.000a.biz/Server.php";
request.method=URLRequestMethod.POST;
request.data= variables;
loaderN.load(request);
}

function kickAll():void{
//функция убийства всех слушателей
buttonCreate.removeEventListener(MouseEvent.CLICK ,createTable);
loaderN.removeEventListener(Event.COMPLETE, printResponse);
listTable.removeEventListener(MouseEvent.CLICK ,UserListClick);
gotoAndStop(2);
}

Создаем новый клип, с любой анимацией (у меня это квадрат, который ездит вниз.) 
post-1897577-1310357087
В первом и последнем кадре этого клипа код stop();

Теперь переходим обратно к сцене и размещаем четыре квадрата и текстовое поле. Задаем им имена как показано на рисунке коричневым(не знаю как так получилось ))) цветом. 

post-1897577-1310357125
Жмем F9 и пишем код:

 

stop();
loaderN.addEventListener(Event.COMPLETE, gameProcess);
//изменяем функцию получения ответа от пхп

if (iAmcreater==1){schet=setInterval(gtGamer2,1000)} else {schet=setInterval(gamePrc,1000)}
// если я создал стол, то запускаем счетчик, который слушает подключился ли второй пользователь. Если не я
function gtGamer2():void{
// отправляем запрос на проверку подключился ли второй пользователь
var variables:URLVariables = new URLVariables("do=needGamer2&table=" + MyTable );
var request:URLRequest = new URLRequest();
request.url="http://cityowlet.000a.biz/Server.php";
request.method=URLRequestMethod.POST;
request.data= variables;
loaderN.load(request);
}

function gamePrc():void{
//запрос: смотрим кто походил и каким квадратом ))))
var variables:URLVariables = new URLVariables("do=WhoisHod&table=" + MyTable);
var request:URLRequest = new URLRequest();
request.url="http://cityowlet.000a.biz/Server.php";
request.method=URLRequestMethod.POST;
request.data= variables;
loaderN.load(request);
}

function gameProcess (e:Event):void{
//смотрим ответы от пхп, они в формате иксмл
var response:XML=XML(e.target.data.result)
var postsList:XMLList = response.post;
var postsZapros:XMLList = response.rstt;
var postsNum:uint = postsList.length();

if (postsZapros[0].@otv=="busyst"){
//этот ответ говорит о том, что второй пользователь подключился
if (postsList[0].@busy=="1"){clearInterval(schet); adListener()}
}
if (postsZapros[0].@otv=="provhod"){
// а этот ответ о том кто походил и чем
trace("Ходит: " + postsList[0].@hodis + " " + postsList[0].@kvis)
if (postsList[0].@hodis!=iAmcreater){
if (postsList[0].@kvis=="1"){kvdr1.gotoAndPlay(2);adListener()}
if (postsList[0].@kvis=="2"){kvdr2.gotoAndPlay(2);adListener()}
if (postsList[0].@kvis=="3"){kvdr3.gotoAndPlay(2);adListener()}
if (postsList[0].@kvis=="4"){kvdr4.gotoAndPlay(2);adListener()}
adListener();
}
}
}

function adListener():void{
разблокировываем кнопки
textHod.text="Ваш ход"
clearInterval(schet);
kvdr1.addEventListener(MouseEvent.CLICK ,kvdr1Click);
kvdr2.addEventListener(MouseEvent.CLICK ,kvdr2Click);
kvdr3.addEventListener(MouseEvent.CLICK ,kvdr3Click);
kvdr4.addEventListener(MouseEvent.CLICK ,kvdr4Click);
}

function rmListener():void{
//блокируем кнопки
schet=setInterval(gamePrc,1000)
textHod.text="Ход соперника"
kvdr1.removeEventListener(MouseEvent.CLICK ,kvdr1Click);
kvdr2.removeEventListener(MouseEvent.CLICK ,kvdr2Click);
kvdr3.removeEventListener(MouseEvent.CLICK ,kvdr3Click);
kvdr4.removeEventListener(MouseEvent.CLICK ,kvdr4Click);
}

//тут обрабатываем нажатия на квадраты:
function kvdr1Click (event:MouseEvent):void{
kvdr1.gotoAndPlay(2);
//анимировали квадрат (ну или запустили анимацию квадрата)
rmListener()
//удаляем все слушатели
var variables:URLVariables = new URLVariables("do=IamHod&table=" + MyTable + "&HdNeed="+iAmcreater+"&Whathd="+1);
var request:URLRequest = new URLRequest();
request.url="http://cityowlet.000a.biz/Server.php";
request.method=URLRequestMethod.POST;
request.data= variables;
loaderN.load(request);
// отправляем пхп кто походил и какой фишкой
}

//то же самое, но с остальными тремя квадратами.
function kvdr2Click (event:MouseEvent):void{
kvdr2.gotoAndPlay(2);
rmListener()
var variables:URLVariables = new URLVariables("do=IamHod&table=" + MyTable + "&HdNeed="+iAmcreater+"&Whathd="+2);
var request:URLRequest = new URLRequest();
request.url="http://cityowlet.000a.biz/Server.php";
request.method=URLRequestMethod.POST;
request.data= variables;
loaderN.load(request);
}
function kvdr3Click (event:MouseEvent):void{
kvdr3.gotoAndPlay(2);
rmListener()
var variables:URLVariables = new URLVariables("do=IamHod&table=" + MyTable + "&HdNeed="+iAmcreater+"&Whathd="+3);
var request:URLRequest = new URLRequest();
request.url="http://cityowlet.000a.biz/Server.php";
request.method=URLRequestMethod.POST;
request.data= variables;
loaderN.load(request);
}
function kvdr4Click (event:MouseEvent):void{
kvdr4.gotoAndPlay(2);
rmListener()
var variables:URLVariables = new URLVariables("do=IamHod&table=" + MyTable + "&HdNeed="+iAmcreater+"&Whathd="+4);
var request:URLRequest = new URLRequest();
request.url="http://cityowlet.000a.biz/Server.php";
request.method=URLRequestMethod.POST;
request.data= variables;
loaderN.load(request);
}

Содержимое файла crossdomain.xml:

CODE
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy
SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>

Не забудьте на сервер скопировать файл crossdomain.xml, для того чтобы разрешить доступ флешке к другим адресам.
Из этих трех уроков вы можете запросто создать свое мультиплеерное приложение для контакта. Смело приступайте.
Код может быть немножко грязноват, он мне нужен был для других целей, но для понимания основы основ — очень даже понятен.

  • Facebook
  • Memori
  • Twitter

Написать комментарий

Copyright © 2010-2011 Как создать сайт и заработать.. Все права защищены.
интернет