8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
1/30
Crear un juego de tres en línea en red
para Android
Construir un juego de tres en línea de multijugador en red con PHP, XML y elkit de desarrollo de Android
Construya el fondo de un juego de tres en línea de multijugador y habilitado
para la red con una aplicación frontal de Android en este artículo.
3 Comentarios:
Jack D. Herrington, Senior Software Engineer, Leverage Software Inc.
09-04-2012
• Tabla de contenidos
Juego de tres en línea de multijugador en red
Acrónimos de uso frecuente
• API: Interfaz de programación de aplicaciones
• HTTP: Protocolo de Transferencia de Hipertexto
• IP: Protocolo Internet
• SD: it de desarrollo de soft!are
•
S"#: #eng$a%e de Cons$lta &str$ct$rado• I': Interfaz de 's$ario
• ()#: &xtensi*le )ark$p #ang$age
#os %$egos cas$ales son extremadamente pop$lares + m$+ l$crati,os- + es fcil sa*er por
/$0. 1o todas las personas de todos los gr$pos de edades estn interesadas en %$gar
online ,ideo%$egos de disparos en primera persona contra 2ordas de adolescentes con
refle%os tan rpidos como la ,elocidad de la l$z. Alg$nas ,eces- es ms interesante %$gar
,ideo%$egos donde tiene tiempo para pensar + realizar $na estrategia o donde la meta es
cooperar $nos con otros para ganar el %$ego.#o genial so*re los ,ideo%$egos cas$ales desde la perspecti,a de los desarrolladores es
/$e son m$c2o ms fciles de constr$ir /$e los ,ideo%$egos intensi,os en grficos de
disparos en primera persona o de deportes. As3 /$e es ms fcil para $n solo
desarrollador- o para $n gr$po de desarrolladores- prod$cir $na primera ,ersión de $n
n$e,o ,ideo%$ego original.
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#icommentshttps://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#authorN1001Chttps://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#authorN1001Chttps://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#authorN1001Chttps://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#icomments
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
2/30
&n este art3c$lo- pasamos a tra,0s de las *ases para crear $n %$ego de l3nea de tres
cas$al de m$lti%$gador en red. &l ser,idor del ,ideo%$ego es $na aplicación !e* *asada
en )+S"# + PHP con $na interfaz ()#. #a parte frontal es $na aplicación nati,a de
Android /$e f$nciona en tel0fonos de Android.
Volver arriba
Construyendo el fondo
&l fondo inicia con $na *ase de datos simple de )+S"# /$e tiene dos ta*las. &l #istado
4 m$estra el es/$ema para la *ase de datos.
Listado 1. db.sql
DROP TABLE IF EXISTS games;
CREATE TABLE games(
id INT NOT NULL AUTO_INCREMENT,
primar !e ( id " ";
DROP TABLE IF EXISTS m#$es;
CREATE TABLE m#$es(
id INT NOT NULL AUTO_INCREMENT,
game INT NOT NULL,
% INT NOT NULL,
INT NOT NULL,
'#r INT NOT NULL,
primar !e ( id " ";
#a primera de las dos ta*las es la ta*la de los %$egos- /$e sólo tiene el ID excl$si,o del
%$ego. &n $na aplicación de prod$cción- pro*a*lemente tenga $na ta*la de $s$arios- + la
ta*la de %$egos incl$+e los IDs de $s$ario de am*os %$gadores. Para 2acerlo simple- sin
em*argo- ren$nciar0 a este enfo/$e para concentrarme en las *ases de almacenar los
datos del %$ego- la com$nicación entre el cliente + el ser,idor + la constr$cción de la parte
frontal.
#a seg$nda ta*la es la ta*la de mo,imientos- /$e incl$+e los mo,imientos indi,id$ales
para el %$ego dado- as3 /$e tiene cinco col$mnas. #a primera col$mna es el ID excl$si,o
del mo,imiento. #a seg$nda col$mna es el ID del %$ego al /$e aplica este mo,imiento.
Desp$0s ,ienen las posiciones 5x5 + 5+5 del mo,imiento. &stos ,alores de*en estar entre 6 +
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#ibm-pconhttps://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#c1https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#c1https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#c1https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#ibm-pconhttps://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#c1https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#c1
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
3/30
7 para 5x5 + 5+5- +a /$e c$enta con $na red de tres por tres. &l 8ltimo campo es el 9color9 del
mo,imiento- /$e es $n entero /$e indica ( $ .
Para constr$ir la *ase de datos- primero $se m+s/ladmin para crearla + desp$0s $se el
comando m+s/l para e%ec$tar el script d*.s/l como se m$estra a/$3:
ms)'admi* ++ser-r##. ++pass/#rd-0## &rea.e ...
ms)' ++ser-r##. ++pass/#rd-0## ... 1 d23s)'
&sta etapa crea $na n$e,a *ase de datos llamada 9ttt9- /$e tiene el es/$ema del %$ego de
tres en l3nea.
a2ora /$e tiene el es/$ema- necesita crear $na forma de iniciar $n %$ego. Para esto-
$sted c$enta con $n script llamado start.p2p- como en el#istado 7.
Listado 2. start.php
14p5p
5eader( 6C#*.e*.+Tpe7.e%.8%m'6 ";
9dd - *e/ PDO(6ms)'75#s.-'#&a'5#s.;d2*ame-...6, 6r##.6, 66";
9s)' - 6INSERT INTO games :ALUES ( "6;
9s.5 - 9dd+
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
4/30
1game id-=>=8<
9
A2ora +a tiene s$ primer %$ego. Para ,er la lista de %$egos- $se el script games.p2p /$e
est en el #istado =.
Listado 3. games.php
14p5p
5eader( 6C#*.e*.+Tpe7.e%.8%m'6 ";
9d25 - *e/ PDO(6ms)'75#s.-'#&a'5#s.;d2*ame-...6, 6r##.6, 66";
9s)' - 6SELECT ? FROM games6;
9) - 9d25+ desde a23 crea $n
n$e,o doc$mento ()#- a
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
5/30
1games=8
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
6/30
'sted creó esta f$nción de a+$dante por/$e 2a+ dos scripts /$e la $san el primero es $n
script mo,es.p2p /$e retorna los mo,imientos act$ales para el %$ego especificado. &l
#istado m$estra este script.
Listado !. moves.php
14p5p
re)ire_#*&e( 6s5#/_m#$es3p5p6 ";
5eader( 6C#*.e*.+Tpe7.e%.8%m'6 ";
9d25 - *e/ PDO(6ms)'75#s.-'#&a'5#s.;d2*ame-...6, 6r##.6, 66";
s5#/_m#$es( 9d25, 9_REUEST6game6 ";
4<
&ste simple script incl$+e el código de la f$nción de a+$dante- se conecta a la *ase de
datos + desp$0s in,oca la f$nción s2o!mo,es con el ID del %$ego especificado. Para
pro*ar este código- $se el comando c$rl para in,ocar el script en el ser,idor desde la l3nea
de comandos:
9 &r' =5..p788'#&a'5#s.8...8m#$es3p5p4game->=
14%m' $ersi#*-=>3=4<
1m#$es8<
9
Desgraciadamente- a8n no 2a 2ec2o ning8n mo,imiento- as3 /$e no es $na salida
partic$larmente interesante. Para remediar eso necesita a
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
7/30
9s.5+
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
8/30
Primero- instale el SD de Android- as3 como alg$nas ,ersiones de la plataforma de
Android- + desp$0s finalmente &clipse + el pl$gFin de &clipse de Android. Para n$estra
s$erte- todo esto est *ien doc$mentado en el sitio de Android G,ea ;ec$rsos para
o*tener enlaces. 'na co*ert$ra a prof$ndidad so*re cómo config$rar s$ entorno de
desarrollo re/$erir3a todo este art3c$lo + ms.
Desp$0s de /$e config$re el entorno de desarrollo- lance &clipse e inicie $n n$e,o
pro+ecto de Android. De*e ,er algo similar a la ig$ra 4.
#igura 1. $reando la aplicación de Android en %clipse
#a ig$ra 4 m$estra el asistente de pro+ecto para aplicaciones de Android. Ingrese el
nom*re de $n pro+ecto- seleccione el *otón de selección$reate new pro&ect in
wor'space + especifi/$e la $*icación para el código con los elementos de 'I. &n la lista
de compro*ación $ild Target- seleccione $na plataforma de Android. Para este código-
+o $so Android 7.=.4. &l código es m$+ simple- as3 /$e p$ede $sar c$al/$ier ,ersión /$e
prefiera. Si no ,e ning$na plataforma listada- entonces necesita descargar e instalar las
plataformas como se indica en las instr$cciones de config$ración del SD de Android.
Tenga en c$enta /$e descargar todas estas plataformas re/$iere m$c2o- m$c2o tiempo.
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#resourceshttps://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig1https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig1https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#resourceshttps://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig1https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig1
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
9/30
&n la sección (roperties - llene el nom*re de la aplicación + el nom*re del pa/$ete. >o
$s0 9Tic Tac Toe9 + 9com.%2errington.tictactoe9 en los campos respecti,os. Desp$0s-
mar/$e el rec$adro de selección $reate Activit) e ingrese $n nom*re para la acti,idad.
>o $s0 9TicTacToeActi,it+9 como el nom*re de la acti,idad.
Haga clic en #inish para ,er $n n$e,o pro+ecto /$e se parece a la ig$ra 7.
#igura 2. Los archivos del pro)ecto *ic*ac*oe
#a ig$ra 7 m$estra los directorios de alto ni,el + los arc2i,os para $na aplicación de
Android Glos directorios son src- gen- Android 7.=.4 + res + los arc2i,os son assets-
Android)anifest.xml- defa$lt.properties + prog$ard.cfg. #os elementos importantes son:
• &l directorio res- /$e contiene rec$rsos
• &l directorio src- /$e tiene el origen de Ja,aK
• &l arc2i,o manifest- /$e contiene la información *iogrfica so*re la
aplicación
S$ primera edición es en el arc2i,o manifest. #a ma+or3a del arc2i,o +a est correcto-
pero necesita a
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
10/30
a*dr#id7$ersi#*C#de-=>=
a*dr#id7$ersi#*Name-=>3= pa&!age-=m3J5erri*g.#*3.i&.a&.#e=<
1ses+permissi#*
a*dr#id7*ame-=a*dr#id3permissi#*3INTERNET= 8<
1ses+sd! a*dr#id7mi*Sd!:ersi#*-=K= 8<
1app'i&a.i#* a*dr#id7i*-=dra/a2'e8i*=
a*dr#id7'a2e'-=s.ri*g8app_*ame=<
1a&.i$i. a*dr#id7*ame-=Ti&Ta&T#eA&.i$i.=
a*dr#id7'a2e'-=s.ri*g8app_*ame=<
1i*.e*.+'.er<
1a&.i#* a*dr#id7*ame-=a*dr#id3i*.e*.3a&.i#*3MAIN= 8<
1&a.eg#r a*dr#id7*ame-=a*dr#id3i*.e*.3&a.eg#r3LAUNCER= 8<
18i*.e*.+'.er<
18a&.i$i.<
18app'i&a.i#*<
18ma*i0es.<
&l 8nico cam*io f$e a3= e*di*g-=.0+=4<
1Li*earLa#. %m'*s7a*dr#id-=5..p788s&5emas3a*dr#id3m8ap!8res8a*dr#id=
a*dr#id7#rie*.a.i#*-=$er.i&a'=
a*dr#id7'a#._/id.5-=''_pare*.=
a*dr#id7'a#._5eig5.-=''_pare*.=
<
1Li*earLa#. a*dr#id7'a#._5eig5.-=/rap_*.e*.=
a*dr#id7'a#._/id.5-=ma.&5_pare*.=
a*dr#id7id-=id8'i*earLa#.>=
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
11/30
1B..#* a*dr#id7.e%.-=P'a X= a*dr#id7id-=id8p'a%=
a*dr#id7'a#._/id.5-=/rap_*.e*.=
a*dr#id7'a#._5eig5.-=/rap_*.e*.=
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
12/30
imp#r. a*dr#id3/idge.3B..#*;
imp#r. a*dr#id3/idge.3a''er;
imp#r. a*dr#id3/idge.3Li*earLa#.;
p2'i& &'ass Ti&Ta&T#eA&.i$i. e%.e*ds A&.i$i. imp'eme*.s O*C'i&!Lis.e*er @
O$erride
p2'i& $#id #*Crea.e(B*d'e sa$edI*s.a*&eS.a.e" @
sper3#*Crea.e(sa$edI*s.a*&eS.a.e";
se.C#*.e*.:ie/(R3'a#.3mai*";
B..#* p'a% - (B..#*".5is3*d:ie/BId(R3id3p'a%";
p'a%3se.O*C'i&!Lis.e*er( .5is ";
B..#* p'a# - (B..#*".5is3*d:ie/BId(R3id3p'a#";
p'a#3se.O*C'i&!Lis.e*er( .5is ";
Timer .imer - *e/ Timer(";
Upda.eTimer . - *e/ Upda.eTimer(";
.32#ard:ie/ - (B#ard:ie/".5is3*d:ie/BId(R3id32$ie/";
.imer3s&5ed'e( ., H, H ";
p2'i& $#id #*C'i&!(:ie/ $" @
B#ard:ie/ 2#ard - (B#ard:ie/".5is3*d:ie/BId(R3id32$ie/";
i0 ( $3ge.Id(" -- R3id3p'a% " @
2#ard3se.C#'#r( H ";
i0 ( $3ge.Id(" -- R3id3p'a# " @
2#ard3se.C#'#r( > ";
#a acti,idad tiene dos m0todos. &l primero es el m0todo onCreate- /$e constr$+e la
interfaz de $s$ario- conecta al mane%ador onClick a los *otones ( + e inicia el
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
13/30
temporizador de act$alización. &l temporizador de act$alización es $sado para reno,ar el
estado del %$ego cada 766 miliseg$ndos. &ste dispositi,o permite a am*os %$gadores ,er
c$ando el otro %$gador se m$e,e.
&l mane%ador onClick esta*lece el color act$al del ta*lero con *ase en si el $s$ario 2ace
clic en el *otón ( o en el *otón .
#a clase QameSer,ice- en el #istado 46- es $na clase singleton /$e representa el ser,idor
del %$ego + el estado act$al del %$ego dado.
Listado 10. ameervice.&ava
pa&!age m3J5erri*g.#*3.i&.a&.#e;
imp#r. Ja$a3.i'3ArraLis.;
imp#r. Ja$a3.i'3Lis.;
imp#r. Ja$a%3%m'3parsers3D#&me*.Bi'der;
imp#r. Ja$a%3%m'3parsers3D#&me*.Bi'derFa&.#r;
imp#r. #rg3apa&5e35..p3..pResp#*se;
imp#r. #rg3apa&5e35..p3Name:a'ePair;
imp#r. #rg3apa&5e35..p3&'ie*.3..pC'ie*.;
imp#r. #rg3apa&5e35..p3&'ie*.3e*.i.3Ur'E*dedF#rmE*.i.;
imp#r. #rg3apa&5e35..p3&'ie*.3me.5#ds3..pP#s.;
imp#r. #rg3apa&5e35..p3imp'3&'ie*.3De0a'...pC'ie*.;
imp#r. #rg3apa&5e35..p3message3Basi&Name:a'ePair;
imp#r. #rg3/&3d#m3D#&me*.;
imp#r. #rg3/&3d#m3E'eme*.;
imp#r. #rg3/&3d#m3N#deLis.;
imp#r. a*dr#id3.i'3L#g;
p2'i& &'ass ameSer$i&e @
pri$a.e s.a.i& ameSer$i&e _i*s.a*&e - *e/ ameSer$i&e(";
p2'i& i*. p#si.i#*s - *e/ i*. @
@ , , ,
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#c10https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#c10
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
14/30
@ , , ,
@ , ,
;
p2'i& s.a.i& ameSer$i&e ge.I*s.a*&e(" @
re.r* _i*s.a*&e;
pri$a.e $#id pda.eP#si.i#*s( D#&me*. d#& " @
0#r( i*. % - ; % 1 ; % " @
0#r( i*. - ; 1 ; " @
p#si.i#*s% - ;
d#&3ge.D#&me*.E'eme*.("3*#rma'iQe(";
N#deLis. i.ems - d#&3ge.E'eme*.sBTagName(=m#$e=";
0#r (i*. i-;i1i.ems3ge.Le*g.5(";i"@
E'eme*. me - (E'eme*."i.ems3i.em(i";
i*. % - I*.eger3parseI*.( me3ge.A..ri2.e(=%=" ";
i*. - I*.eger3parseI*.( me3ge.A..ri2.e(==" ";
i*. '#r - I*.eger3parseI*.( me3ge.A..ri2.e(='#r=" ";
p#si.i#*s% - '#r;
p2'i& $#id s.ar.ame( i*. game " @
..pC'ie*. 5..p&'ie*. - *e/ De0a'...pC'ie*.(";
..pP#s. 5..pp#s. - *e/ ..pP#s.(=5..p788>33H3H8...8m#$es3p5p=";
.r @
Lis.1Name:a'ePair< *ame:a'ePairs - *e/
ArraLis.1Name:a'ePair
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
15/30
5..pp#s.3se.E*.i.(*e/ Ur'E*dedF#rmE*.i.(*ame:a'ePairs"";
..pResp#*se resp#*se - 5..p&'ie*.3e%e&.e(5..pp#s.";
D#&me*.Bi'derFa&.#r d20 - D#&me*.Bi'derFa&.#r3*e/I*s.a*&e(";
D#&me*.Bi'der d2 - d203*e/D#&me*.Bi'der(";
pda.eP#si.i#*s( d23parse(resp#*se3ge.E*.i.("3ge.C#*.e*.("" ";
&a.&5 (E%&ep.i#* e" @
L#g3$(=i#e%&ep.i#*=, e3.#S.ri*g("";
p2'i& $#id se.P#si.i#*( i*. game, i*. %, i*. , i*. '#r " @
..pC'ie*. 5..p&'ie*. - *e/ De0a'...pC'ie*.(";
..pP#s. 5..pp#s. - *e/ ..pP#s.(=5..p788>33H3H8...8m#$e3p5p=";
p#si.i#*s% - '#r;
.r @
Lis.1Name:a'ePair< *ame:a'ePairs - *e/
ArraLis.1Name:a'ePair
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
16/30
&ste código es algo del código ms interesante en la aplicación. Primero- tiene el m0todo
$pdatePositions- /$e toma el ()# retornado del ser,idor + *$sca los elementos de
mo,imiento- desp$0s act$aliza la matriz de posiciones con el con%$nto de mo,imientos
act$al. #a matriz de posiciones tiene $n ,alor para cada posición en el ta*lero cero indica
$n espacio ,ac3o- 4 representa 99 + 7 es para 9(9.
#as otras dos f$nciones- startQame + setPosition- son la forma en /$e se com$nica con el
ser,idor. &l m0todo startQame solicita el con%$nto de mo,imientos act$al del ser,idor +
act$aliza la lista de posiciones. &l m0todo setPosition p$*lica el mo,imiento en el ser,idor
al crear $na solicit$d de p$*licación HTTP + config$rar los datos para la p$*licación
$sando $na matriz de pares de ,alores de nom*re- los c$ales son desp$0s soncodificados para transporte. Desp$0s analiza el ()# de resp$esta para act$alizar la lista
de posiciones.
Si o*ser,a detenidamente- el IP $sado para conectarse al ser,idor es realmente
interesante. 1o es 9local2ost9 o 947L.6.6.49 es 946.6.7.79- /$e es $n alias para la m/$ina
en la /$e se e%ec$ta el em$lador. >a /$e el tel0fono de Android es en s3 mismo $n sistema
de '1I(R - tiene s$s propios ser,icios en local2ost. ascinante- ,erdad 1o es
frec$ente /$e sea tan claro /$e el tel0fono no es en realidad $n tel0fono per se- sino $na
comp$tadora en toda regla /$e se a%$sta a la palma de s$ mano + s$cede /$e tiene $n
tel0fono integrado en 0l.
&ntonces- dónde estamos 'sted tiene la acti,idad- /$e es el componente principal para
la aplicación tiene la config$ración del dise
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
17/30
imp#r. a*dr#id3.i'3A..ri2.eSe.;
imp#r. a*dr#id3$ie/3M#.i#*E$e*.;
imp#r. a*dr#id3$ie/3:ie/;
p2'i& &'ass B#ard:ie/ e%.e*ds :ie/ @
pri$a.e i*. _'#r - >;
p2'i& $#id se.C#'#r( i*. & " @
_'#r - &;
p2'i& B#ard:ie/(C#*.e%. *.e%." @
sper(*.e%.";
ameSer$i&e3ge.I*s.a*&e("3s.ar.ame(";
p2'i& B#ard:ie/(C#*.e%. *.e%., A..ri2.eSe. a..rs" @
sper(*.e%.,a..rs";
ameSer$i&e3ge.I*s.a*&e("3s.ar.ame(";
p2'i& B#ard:ie/(C#*.e%. *.e%., A..ri2.eSe. a..rs, i*. de0S.'e" @
sper(*.e%.,a..rs,de0S.'e";
ameSer$i&e3ge.I*s.a*&e("3s.ar.ame(";
p2'i& 2##'ea* #*T#&5E$e*.( M#.i#*E$e*. e$e*. " @
i0 ( e$e*.3ge.A&.i#*(" - M#.i#*E$e*.3ACTION_UP "
re.r* .re;
i*. #se.X - ge.Ose.X(";
i*. #se. - ge.Ose.(";
i*. 'i*eSiQe - ge.Li*eSiQe(";
0#r( i*. % - ; % 1 ; % " @
0#r( i*. - ; 1 ; " @
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
18/30
Re&. r - *e/ Re&.( ( #se.X ( % ? 'i*eSiQe " ",
( #se. ( ? 'i*eSiQe " ",
( ( #se.X ( % ? 'i*eSiQe " " 'i*eSiQe ",
( ( #se. ( ? 'i*eSiQe " " 'i*eSiQe " ";
i0 ( r3*.ai*s( (i*."e$e*.3ge.X(", (i*."e$e*.3ge.(" " " @
ameSer$i&e3ge.I*s.a*&e("3se.P#si.i#*(, %, , _'#r";
i*$a'ida.e(";
re.r* .re;
re.r* .re;
pri$a.e i*. ge.SiQe(" @
re.r* (i*." ( (#a."
( ( ge.id.5(" 1 ge.eig5.(" " 4 ge.id.5(" 7 ge.eig5.(" " ? 3 ";
pri$a.e i*. ge.Ose.X(" @
re.r* ( ge.id.5(" 8 H " + ( ge.SiQe( " 8 H ";
pri$a.e i*. ge.Ose.(" @
re.r* ( ge.eig5.(" 8 H " + ( ge.SiQe(" 8 H ";
pri$a.e i*. ge.Li*eSiQe(" @
re.r* ( ge.SiQe(" 8 ";
pr#.e&.ed $#id #*Dra/(Ca*$as &a*$as" @
Pai*. pai*. - *e/ Pai*.(";
pai*.3se.A*.iA'ias(.re";
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
19/30
pai*.3se.C#'#r(C#'#r3BLACV";
&a*$as3dra/Re&.(,,&a*$as3ge.id.5(",&a*$as3ge.eig5.(", pai*.";
i*. siQe - ge.SiQe(";
i*. #se.X - ge.Ose.X(";
i*. #se. - ge.Ose.(";
i*. 'i*eSiQe - ge.Li*eSiQe(";
pai*.3se.C#'#r(C#'#r3DVRA";
pai*.3se.S.r#!eid.5( K ";
0#r( i*. ' - ; ' 1 H; ' " @
i*. &% - #se.X ( ( ' > " ? 'i*eSiQe ";
&a*$as3dra/Li*e(&%, #se., &%, #se. siQe, pai*.";
0#r( i*. r#/ - ; r#/ 1 H; r#/ " @
i*. & - #se. ( ( r#/ > " ? 'i*eSiQe ";
&a*$as3dra/Li*e(#se.X, &, #se.X siQe, &, pai*.";
i*. i*se. - (i*." ( (#a."'i*eSiQe ? 3> ";
pai*.3se.C#'#r(C#'#r3ITE";
pai*.3se.S.'e(Pai*.3S.'e3STROVE";
pai*.3se.S.r#!eid.5( > ";
0#r( i*. % - ; % 1 ; % " @
0#r( i*. - ; 1 ; " @
Re&. r - *e/ Re&.( ( #se.X ( % ? 'i*eSiQe " " i*se.,
( #se. ( ? 'i*eSiQe " " i*se.,
( ( #se.X ( % ? 'i*eSiQe " " 'i*eSiQe " + i*se.,
( ( #se. ( ? 'i*eSiQe " " 'i*eSiQe " + i*se. ";
i0 ( ameSer$i&e3ge.I*s.a*&e("3p#si.i#*s % -- > " @
&a*$as3dra/Cir&'e( ( r3rig5. r3'e0. " 8 H,
( r32#..#m r3.#p " 8 H,
( r3rig5. + r3'e0. " 8 H, pai*.";
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
20/30
i0 ( ameSer$i&e3ge.I*s.a*&e("3p#si.i#*s % -- H " @
&a*$as3dra/Li*e( r3'e0., r3.#p, r3rig5., r32#..#m, pai*.";
&a*$as3dra/Li*e( r3'e0., r32#..#m, r3rig5., r3.#p, pai*.";
#a ma+or3a del tra*a%o a/$3 es realizado en el m0todo onTo$c2- /$e responde al $s$ario
tocando $na c0l$la partic$lar en el ta*lero del %$ego- + el m0todo onDra!- /$e pinta el
ta*lero del %$ego $sando el mecanismo de pint$ra de Android.
&l m0todo onTo$c2 $sa las f$nciones de tama
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
21/30
2#ard:ie/3p#s.(*e/ R**a2'e("@ p2'i& $#id r*("
@ 2#ard:ie/3i*$a'ida.e("; ";
&l temporizador es iniciado por la clase TicTacToeActi,it+ c$ando la aplicación se inicia.
&ste temporizador es $n mecanismo de sondeo. &sta no es la forma ms eficiente para la
com$nicación entre el cliente + el ser,idor- pero es la ms simple + confia*le. #a forma
ms eficiente es $sar la ,ersión 4.4 del protocolo de HTTP para mantener la conexión
a*ierta + para /$e el ser,idor en,3e act$alizaciones al cliente c$ando se 2agan los
mo,imientos. &ste enfo/$e es m$c2o ms comple%o re/$iere /$e el cliente + el ser,idor
soporten el protocolo 4.4 + tiene pro*lemas de escala*ilidad con el n8mero de
conexiones. &se enfo/$e est f$era del m*ito de este art3c$lo. Para %$egos simples de
demostración como este- $n mecanismo de sondeo f$nciona *ien.Con el código 2ec2o- p$ede pro*ar la aplicación. &so significa iniciar el em$lador. De*e
,er algo como la ig$ra = desp$0s de inicializar.
#igura 3. Lan5ando el emulador de Android
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig3https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig3
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
22/30
&ste es el em$lador cargando $na fantstica interfaz 9A 1 D ; I D9. Desp$0s de ser
cargada- ,e la pantalla po!erFon en la ig$ra B.
#igura 4. %l emulador lan5ado ) listo para usarse
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig4https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig4https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig4
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
23/30
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
24/30
Para entrar al tel0fono- deslice el icono de *lo/$eo 2acia la derec2a. &sa acción lo lle,a a
la pantalla de inicio + generalmente lanza la aplicación /$e est dep$rando. &n este caso-
esta acción m$estra la pantalla del %$ego en la ig$ra .
#igura !. %l &uego antes de que se hagan movimientos
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig5https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig5
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
25/30
Dependiendo del estado de s$ ser,idor- p$ede ,er o no ning8n mo,imiento. &n este caso-
el %$ego esta*a ,ac3o. #os *otones Pla+ ( + Pla+ estn en la parte s$perior con el
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
26/30
ta*lero del %$ego de l3nea de tres en el centro de la ,is$alización. A contin$ación- 2aga clic
en (la) 6- desp$0s 2aga clic en el c$adro del centro para ,er algo como la ig$ra E.
#igura ". 6 toma el cuadro del centro7 por supuesto
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig6https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig6https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig6
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
27/30
#a ig$ra E m$estra la ,is$alización del ta*lero del %$ego con $na ( a2ora llenando el
c$adro del centro. Para ,erificar /$e el ser,idor esta*a conectado- p$ede e%ec$tar el
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig6https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig6
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
28/30
comando c$rl en el script mo,es.p2p en el ser,idor para o*tener la lista ms reciente de
mo,imientos del %$ego.
Para pro*ar /$e f$ncionen las s- 2aga clic en (la) 8 + seleccione el c$adro de $na
es/$ina como en la ig$ra L.
#igura +. 8 toma el cuadro de una esquina
https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig7https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig7https://www.ibm.com/developerworks/ssa/library/x-androidtictactoe/#fig7
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
29/30
8/16/2019 Crear Un Juego de Tres en Línea en Red Para Android
30/30
P$ede %$gar con (s + s. #a aplicación se conecta al ser,idor para alo%ar el estado del
%$ego en $na $*icación compartida. > de*ido al temporizador de act$alización- cada
$s$ario p$ede ,er los mo,imientos realizados por el otro.
Conclusión
&s este $n %$ego completo 1o realmente. 1o 2a+ ,erificación de condición de ,ictoria-
los %$gadores p$eden so*rescri*ir posiciones + no 2a+ ,erificación de t$rno. Pero las
piezas de tecnolog3a *sicas estn presentes: $n ser,idor de %$ego con el estado
almacenado compartido entre los %$gadores + $na aplicación grfica nati,a en $n
dispositi,o mó,il /$e se conecta al ser,idor del %$ego para proporcionar $n interfaz para el
%$ego. P$ede $sar este %$ego como $n p$nto de partida para s$ propio %$ego + constr$irlo
como desee. Sólo rec$erde mantenerlo cas$al + di,ertido- + tal ,ez sea el creador del
sig$iente Uords Uit2 riends o m$lti%$gador de Angr+ irds.