Crea Tu Primer Videojuego para Android Con HTML5 - El Androide Libre

27/11/2014 CreatuprimervideojuegoparaAndroidconHTML5ElAndroideLibre
Liberar Android Imprescindibles Accesorios Programacin Redeslibre Para Principiantes Otros android Contacta con EAL
Aplicaciones Juegos Smartphones Tablets Root Entendiendo las Apps Buscar...
Megusta Seguir YouTube

El Androide Libre
Seguir +1
ESPECIAL: LAS MEJORES OFERTAS ANDROID DEL WOLDER MISMART WAVE 8: ANLISIS Y PUEDES ESPIAR UN TELFONO ANDROID, PERO
BLACK FRIDAY 2014 EXPERIENCIA DE USO ES DELITO Y ES PELIGROSO
Crea tu primer videojuego para Android con HTML5 15

comentarios
El Androide Libre
Escrito el 4/03/2014 - 23:00
La mayora de nosotros tiene grandes ideas para hacer nuevos videojuegos.

Desgraciadamente son pocas las personas que hacen realidad dichas ideas porque la
mayora piensa que programar juegos es algo muy difcil. En realidad, programar juegos
no es algo tan complicado; si tienes conocimientos bsicos de HTML, CSS y Javascript,
es suciente para que puedas comenzar a hacer tus primeros juegos.
Agrega un elemento Canvas a una pgina web

Una de las caractersticas ms atractivas de HTML5 es el elemento <canvas>, que puede
utilizarse para dibujar grcas vectoriales y generar efectos visuales, juegos interactivos
y animaciones. Un Canvas es un rea rectangular que permite el despliegue (rendering)
dinmico de grcas 2D. El Canvas interacta con CSS3 y Javascript para generar grcos
APLICACIONES IMPRESCINDIBLES
y animaciones interactivas en el navegador web, sin necesidad de plugins.
El listado 1 contiene el cdigo bsico para denir un Canvas. LOS MEJORES JUEGOS ANDROID
20 APLICACIONES DE FOTOGRAFIA
<body onload=spaceShipGame()>
http://www.elandroidelibre.com/2014/03/creatuprimervideojuegoparaandroidconhtml5.html 1/10
<h1>SpaceShipGame</h1>
LIMPIA Y OPTIMIZA TU ANDROID
<canvas id=spaceCanvas width=300 height=300>
</canvas> MEJORES NAVEGADORES ANDROID
</body>
Esto es muy similar a como se dene una imagen con el emeneto <img>, con la
diferencia de que no tiene los atributos src y alt. El elemento <canvas> solamente tiene
dos atributos: width (ancho) y height (alto), ambos tienen un valor default de 300 pixeles.
El valor del id se utiliza para interactuar con el Canvas por medio de Javascript.
Dibuja los grcos

El listado 2 muestra el cdigo para crear un fondo negro con estrellas blancas.
// Obtenemos una referencia al canvas.

canvas = document.getElementById(spaceCanvas);
ctx = canvas.getContext(2d);
// Lo pintamos negro
ctx.llStyle = black;
ctx.rect(0, 0, 300, 300);
ctx.ll();
// Dibujamos 100 estrellas blancas
ctx.llStyle = white;
for (i = 0; i <= 100; i++) {
// Generamos coordenadas al azar entre 20 y 299
var x = 20 + Math.oor(Math.random() * 279);
var y = 20 + Math.oor(Math.random() * 279);
// Dibujamos la estrella ARTCULOS MS COMENTADOS
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2); LOS NEXUS RECIBEN YA LA OTA DE 206
ctx.closePath();
ctx.ll(); LOS FALLOS Y ERRORES DE ANDROI
177
}
ANDROID 5.0 LOLLIPOP, ANLISI

142
Primero obtenemos una referencia a nuestro elemento Canvas y luego obtenemos su
contexto. Este objeto nos provee mtodos para poder manipularlo.
Para crear las estrellas utilizamos la funcin arc, que se utiliza para crear crculos
(parciales o completos). En este caso estamos creando crculos en las coordenadas x, y
con un radio de 3 pixeles, comenzando el trazo en el ngulo 0 y terminando en el ngulo
2Pi (es decir que es una circunferencia completa).
Notarn que los valores de nuestras coordenadas deben ser mayores a 20,20. Esto es
para dejar espacio para nuestra nave espacial, que iniciar en la esquina superior
izquierda.
Para pintar nuestra nave utilizaremos curvas de bezier por medio de la funcin
bezierCurveTo. Esta funcin recibe 6 valores como parmetro, que en realidad son 3
pares de coordenadas: los primeros 2 pares de coordenadas son puntos de control y el
ltimo par es el punto nal. El listado 3 muestra el cdigo para dibujar nuestra nave.
function nave() {
// Dibujemos la nave usando curbas de bezier.
// Primero pintemos el fuselaje en azul
ctx.llStyle = rgb(0, 0, 255);
ctx.beginPath();
ctx.moveTo(28.4, 16.9);
ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);
ctx.closePath();
ctx.ll();
// ahora la cabina en rojo

ctx.beginPath();
ctx.moveTo(22.3, 12.0);
ctx.closePath();
ctx.ll();
}
Al ver nuestro cdigo en un navegador, veremos una imagen similar a la de la gura 1.
Figura 1. Imagen inicial
Agrega comportamiento
Ahora vamos a mover la nave espacial usando Javascript. Cada movimiento se hace en dos
pasos:
1. Borramos la nave de su posicin actual (reestableciendo el fondo que haba en el lugar donde dibujamos la nave).
2. Dibujamos la nave en su nueva posicin.
Estas sern las dos actividades que realizaremos de manera continua para estar redibujando la
nave. El listado 4 muestra como lo implementamos.
function gameLoop()
{
ctx.putImageData(oldBackground, oldX, oldY);
ctx.putImageData(ship, newX, newY);
}
Como podrn ver, en el listado 4 aparecen variables que no habamos denido. Estas son
variables que utilizamos para almacenar: las coordenadas anteriores de la nave, las
coordenadas nuevas, un objeto con la imagen de la nave, y un objeto con la imagen de fondo
anterior (para reestablecerlo cuando movamos a la nave a otro lugar). Ms adelante veremos
como se inicializan y actualizan dichas variables.
Para denir que queremos que nuestra funcin gameLoop se est ejecutando de manera
continua utilizamos el mtodo setInterval() de esta forma:
setInterval(gameLoop, 20);
es decir que cada 20 milisegundos se ejecutar la funcin gameLoop.
A continuacin vamos a capturar el evento cuando alguien toca la pantalla y moveremos la nave
a dicho lugar. Para ello, registramos el evento touchstart y denimos una funcin que realice
las acciones correspondientes. El listado 5 muestra el cdigo:
document.addEventListener(mousedown, moverNave, true);
function moverNave (event)

{
event.preventDefault(); //Para evitar el comportamiento default
oldX = newX;
oldY = newY;
oldBackground = newBackground;
ctx.putImageData(oldBackground, oldX,oldY);
var eventTouch;
eventTouch = event.changedTouches[0];
newX = eventTouch.pageX 15;
newY = eventTouch.pageY 60;
newBackground = ctx.getImageData(newX, newY, 30, 30);
}
Lo primero que hacemos en esta funcin es llamar el mtodo preventDefault() del

evento, para evitar que se dispare el comportamiento default para dicho evento.
Posteriormente actualizamos nuestras variables de control para almacenar las

coordenadas e imagen de fondo actual, y procedemos a borrar la nave (poniendo el
fondo que tenemos almacenado para esa posicin).
Despus registramos las coordenadas donde se dio el evento tctil y guardamos la

imagen de fondo que se encuentra en el recuadro para las nuevas coordenadas (antes
de que se redibuje la nave ahi). Al guardar las nuevas coordenadas, se darn cuenta que
estamos restando 15 a la X y 60 a la Y. Esto es tan solo un ajuste para buscar que la nave
quede ms centrada a donde hicimos el tacto.
Es importante notar que en realidad en esta funcin no estamos dibujando la nave, solo
actualizamos las coordenadas. Como ya vimos, la funcin que se encarga de estar
redibujando la nave es gameLoop, usando la informacin de las coordenadas
almacenadas.
El listado 6 contiene el cdigo completo de este ejercicio. Puedes salvarlo como html, y
accederlo desde el navegador web de tu dispositivo mvil para probarlo.
Si quieres continuar, te dejamos como ejercicio que modiques el cdigo para hacer que
tu nave se mueva poco a poco con una trayectoria, y puedas alterar dicha trayectoria al
tocar la pantalla.
<!DOCTYPE html>
<html>
<head>
<title>Nave espacial</title>
</head>
<body>
<h1>Juego de nave espacial</h1>
<canvas id=spaceCanvas width=300 height=300>
</canvas>
</body>
</html>
<script>
canvas = document.getElementById(spaceCanvas);
ctx = canvas.getContext(2d);
// denimos variables para almacenar imagenes que usaremos.

var oldBackground;
var newBackground;
var ship;
// denimos e inicializamos variables para coordenadas.

var oldX = 0;
var oldY = 0;
var newX = 0;
var newY = 0;
fondo();
nave();
setInterval(gameLoop, 20);
document.addEventListener(touchstart, moverNave, true);
function fondo() {
// Primero lo pintamos negro
ctx.llStyle = black;
ctx.rect(0, 0, 300, 300);
ctx.ll();
// Dibujemos 100 estrellas

ctx.llStyle = white;
for (i = 0; i <= 100; i++) {
// Generamos coordenadas al azar entre 30 y 299
var x = 30 + Math.oor(Math.random() * 269);
var y = 30 + Math.oor(Math.random() * 269);
// Dibujamos la estrella
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.closePath();
ctx.ll();
}
// inicializamos la imagen de fondo con el estado inicial
newBackground = ctx.getImageData(0, 0, 30, 30);
}
function nave() {
// Dibujemos la nave usando curbas de bezier.
// Primero pintemos el fuselaje en azul
ctx.beginPath();
ctx.moveTo(28.4, 16.9);
ctx.closePath();
ctx.ll();
// ahora la cabina en rojo

ctx.beginPath();
ctx.moveTo(22.3, 12.0);
ctx.closePath();
ctx.ll();
// guardamos la imagen de la nave

ship = ctx.getImageData(0, 0, 30, 30);
}
function gameLoop()
{
ctx.putImageData(oldBackground, oldX, oldY);
ctx.putImageData(ship, newX, newY);
}
function moverNave (event)

{
event.preventDefault(); //To prevent default behavior
oldX = newX;
oldY = newY;
ctx.putImageData(oldBackground, oldX,oldY);
var eventTouch;
eventTouch = event.changedTouches[0];
newX = eventTouch.pageX 15;
newY = eventTouch.pageY 60;
newBackground = ctx.getImageData(newX, newY, 30, 30);
}
</script>
Conclusin
En este artculo hemos visto a grandes rasgos como crear y manipular elementos de un
Canvas en HTML5. Tambin hemos conocido elementos esenciales de cualquier videojuego,
tales como registrar eventos y manipular objetos grcos.
Para aprender ms acerca de herramientas y tecnologas para crear aplicaciones para Android,
te recomendamos visitar la Zona para desarrolladores de Intel.
5 232 307 115
Compartir Megusta Twittear
Noticias y Novedades
PUBLICIDAD
Las cookies son necesarias para el funcionamiento del sitio. Al acceder a El Androide Libre,
Artculos relacionados
acepta el uso de ellas. Aceptar Ms informacin
15Comentarios ElAndroideLibre Acceder
Ordenarporlosmejores Compartir Favorito
netealadiscusin...
SergioFernndez hace9meses
Voyaserelprimerlistilloqueabralabocaparadecirqueestonoesas,peroesquedista
bastantedeloqueseconsideraunvideojuegoparaandroid.
Enprimerlugar,sivaacorrerenundispositivomvil,yaseadesdeelnavegadorouna
instanciadeesteenunaaplicacinnativa,tienequeserescalable.Nopuedespretendercargar
uncanvasenunhtmlconunfondoblancoyabrirlodesdeelmvilporquevasavernada.
Ensegundolugar,loquedecadeinstanciarelnavegador.Sisequiereconstruirunvideojuego
comotallomsprcticoestenerunaplantilladeunaappenjava,lacualcorraunainstancia
delnavegadorydentrodeesainstanciaelarchivohtml.Amiveres"mscreble"quecargarlo
desdeelnavegadordirectamente,apartedequedeesamanerasepodrapublicarenlastore
(supongo).
Entercerlugarestnlosfps(fotogramasoframesporsegundo).LasfuncionesdesetIntervalo
setTimeoutestnbien,perotienenmalasdiferenciasentredistintosdispositivosypiensoqueel
pintadodelcanvasconmtodosalestilodelostimersacabanpesandoalnavegador.Paraello
losnavegadores(versionesdemediasamsnuevas)incluyeronrequestAnimationFrame,que
vieneaserlomismoqueesosotrosdosmtodosperocreadoexpresamenteparaesoyl
solitoseocupadeaclimatarseaundispositivoyotro.Queyosepatodosocasitodoslos
navegadorestienensoporteactualmenteparaello.
Encuartolugaryentrandoenmateriadeprogramacin...Paradesarrollarjuegoses
verms
20 Responder Compartir
Jam>SergioFernndez hace9meses
Elpostvalilapenaparaleerunosaspectosimportantesquethascomentado
ampliamente.Gracias.
dsgrfg>SergioFernndez hace9meses
QueopinasdeUnity3D?
Responder Compartir
SergioFernndez>dsgrfg hace9meses
Megusta
PauSanchezFernandez>SergioFernndez hace9meses
Todalarazncompaeroysobretodolavelocidad,hacerunjuegoconunaWebApp
estamuylejosdeloqueseriaunjuegoenpuroJava.
YoheintentadohacercosasconPhoneGapypffparaaplicacionesbasicasvasque
tirasperoparaunjuegodemasiadopesadoparaelnavegadordeunmovilsenotaque
elmovimientodelosobjetosnoesfluido.
Responder Compartir
GustavoCanameroPalomares>PauSanchezFernandez hace9meses
holahacesaplicacionesparamoviles?porqueestoymontandounanueva
empresaybuscogentequemeayudeosiconocesalgunprogramadorjavao
androidoIOS.Salu2
Responder Compartir
BlackgemVindicare>GustavoCanameroPalomares hace9meses
Programadoressalendedebajodelaspiedras,cuidadoconbuscar
genteentrecomentariosdeunforooblogs...porquequeabundeno
significaqueseadecalidadXD.
Simontasunanuevaempresanonecesitasunaaplicacinespecifica
paraelloenprincipio,hazteunawebresponsivedesignenhtml5con
plantillascomobootstraposemejanteyteseramejor:).
Queademas,sinomeequivocoentuempresaeltemadediseowebsi
quelotrataiseinclusopodeisembeberunaenunaaplicacionpara
quelotrataiseinclusopodeisembeberunaenunaaplicacionpara
androidsilodeseismuyfacilmente:),esloquesellamanappshtml5.
Sino,contactamediantelosperfilesdeDisqusdondemuchosponemos
perfilessocialespordondepuedescontactar.
MarKav hace9meses
Amigo,copieelcdigofinalyloguardecomoHTML,perosoloapareceelTitulo,nohacenada.
PodrascolgarelHTMLlistopararevisarlo,meinteresotuarticulo.
Deantemanogracias.
Tuxerito hace9meses
Buenapublicacin.
OjalaponganmasdeHTML5ycosasasi.
Gracias.
BlackgemVindicare hace9meses
Llegaunmomentoenelcualunblogdebesabercuandoenlazaracontenidosdetercerosen
vezdeintentargenerarcontenidopropiodedudosacalidad.
Existenmultituddecursosygratuitosdondepodriaisenlazaragenteenvezdeintentardar
unaclaseexpresssobrealgoqueinclusoyovoyhedesistidodeleeralcompleto.
sergio hace9meses
jajaja,facilisimooiga,maanamismopongoamispadresahacerjuegosXD
siesquehoyendia,yasepublicacualquiercosa....
encima,elcodigonoestamuybienquedigamos....
XerXeselPandaRojo hace3meses
hola
Responder Compartir
LUDWIGVILLASIS hace6meses
Kepedooo.
Responder Compartir
LUDWIGVILLASIS hace6meses
AmmOkigraamdiosojaastamisawelosloariammgenealokidoki
Responder Compartir
JeronimoAlderete hace8meses
sepublicaloquecomentoaca?
Responder Compartir
Suscrbete d AadeDisqusatusitioweb Privacidad
El Androide Libre, la Web / Blog de referencia Android en espaol.

Noticias, aplicaciones, juegos, telfonos mviles... todo sobre Android y el SO de Google, Nexus, Samsung, Root y mucho ms.
Creative Commons 2.5 | Publicidad | Desarrollo web: Ismael Ortiz Osuna | Informacin Legal

Crea Tu Primer Videojuego para Android Con HTML5 - El Androide Libre

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Crea Tu Primer Videojuego para Android Con HTML5 - El Androide Libre

Hochgeladen von

Copyright:

Verfügbare Formate

27/11/2014 CreatuprimervideojuegoparaAndroidconHTML5ElAndroideLibre

Aplicaciones Juegos Smartphones Tablets Root Entendiendo las Apps Buscar...

Megusta Seguir YouTube

Crea tu primer videojuego para Android con HTML5 15

La mayora de nosotros tiene grandes ideas para hacer nuevos videojuegos.

Agrega un elemento Canvas a una pgina web

Dibuja los grcos

// Obtenemos una referencia al canvas.

ANDROID 5.0 LOLLIPOP, ANLISI

// ahora la cabina en rojo

Al ver nuestro cdigo en un navegador, veremos una imagen similar a la de la gura 1.

Figura 1. Imagen inicial

es decir que cada 20 milisegundos se ejecutar la funcin gameLoop.

document.addEventListener(mousedown, moverNave, true);

function moverNave (event)

Lo primero que hacemos en esta funcin es llamar el mtodo preventDefault() del

Posteriormente actualizamos nuestras variables de control para almacenar las

Despus registramos las coordenadas donde se dio el evento tctil y guardamos la

// denimos variables para almacenar imagenes que usaremos.

// denimos e inicializamos variables para coordenadas.

// Dibujemos 100 estrellas

// ahora la cabina en rojo

// guardamos la imagen de la nave

function moverNave (event)

5 232 307 115

Compartir Megusta Twittear

15Comentarios ElAndroideLibre Acceder

Ordenarporlosmejores Compartir Favorito

Suscrbete d AadeDisqusatusitioweb Privacidad

El Androide Libre, la Web / Blog de referencia Android en espaol.

Das könnte Ihnen auch gefallen