1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
---
title: Introduccion para desarrollo de juegos para la Web
slug: Games/Introduction
tags:
- Firefox OS
- juegos
- moviles
translation_of: Games/Introduction
original_slug: Games/Introduccion
---
<div>{{GamesSidebar}}</div>
<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
<div>La Web rapidamente se ha convertido en una plataforma viable no solo para crear impresionantes juegos de alta calidad, sino también para distruibuirlos.</div>
<div>El rango de juegos que pueden ser creados está a la par tanto de los juegos de escritorio como de SO nativos (Android, iOS). Con tecnologias Web modernas y un navegador reciente es totalmente posible hacer juegos de primera categoria para la Web. Y no estamos hablando sobre simples juegos de cartas o juegos sociales multijugadores que en tiempos anteriores se podian hacer con Flash®. Estamos hablando sobre juegos 3D <em>shooters</em> de accion, RPGs, y más. Gracias a las masivas mejoras de rendimiento en <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> con tecnologia de compilación <em>just-in-time</em> y nuevas APIs, se pueden construir juegos que pueden correr en el navegador (o en dispositivos <a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> como <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>) sin problemas.</div>
<h2 id="La_plataforma_de_juegos_HTML5">La plataforma de juegos HTML5</h2>
<p>Puedes pensar en la Web como una mejor opción de plataforma para desarrollar tu juego. Como nos gusta decir, "la Web es la plataforma". Hechemos un vistazo al nucleo de la plataforma Web:</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Funcion</th>
<th scope="col">Tecnología</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Audio</strong></td>
<td><a href="/es/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></td>
</tr>
<tr>
<td><strong>Graficos</strong></td>
<td><a href="/es/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
</tr>
<tr>
<td><strong>Entrada</strong></td>
<td><a href="/es/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Touch events</a>, <a href="/en-US/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>, device sensors, <a href="/es/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a>, <a href="/es/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a>, <a href="/es/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
</tr>
<tr>
<td><strong>Lenguaje</strong></td>
<td><a href="/es/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> (o C/C++ usando <a href="https://github.com/kripken/emscripten/wiki">Emscripten</a> para compilar a JavaScript)</td>
</tr>
<tr>
<td><strong>Redes</strong></td>
<td><a href="/es/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> and/or <a href="/es/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></td>
</tr>
<tr>
<td><strong>Almacenamiento</strong></td>
<td><a href="/es/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> o la "nube"</td>
</tr>
<tr>
<td><strong>Web</strong></td>
<td><a href="/es/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="/es/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/es/docs/SVG" title="/en-US/docs/SVG">SVG</a>, <a href="/es/docs/Social_API" title="/en-US/docs/Social_API">Social API</a> (y mucho más!)</td>
</tr>
</tbody>
</table>
<h2 id="El_caso_de_Exito">El caso de Exito</h2>
<div>Como un desarrollador de juegos, de forma individual o como un gran studio de juegos, tu quieres por que tiene sentido apuntar a la Web como tu práximo proyecto de juego. Veamos como la Web puede ayudarte.</div>
<ol>
<li>
<div><span class="notranslate">El alcance de la Web es enorme;</span> <span class="notranslate"> está en todas partes.</span> <span class="notranslate"> Los juegos construidos con HTML5 funcionan en smartphones, tablets, PCs y Smart TVs.</span></div>
</li>
<li><span class="notranslate">Se mejoran la comercialización y la detección.</span> <span class="notranslate"> No estás limitado a promocionar tu aplicación en la tienda de aplicaciones de otra persona.</span> <span class="notranslate"> En su lugar, puede anunciar y promover su juego en toda la Web, así como en otros medios, aprovechando la inherente capacidad de enlace y capacidad de compartir de la Web para llegar a nuevos clientes.</span></li>
<li><span class="notranslate">Usted tiene control donde importa: Pagos.</span> <span class="notranslate"> Usted no tiene que entregar más del 30% de sus ingresos a otra persona sólo porque su juego está en su ecosistema.</span> <span class="notranslate"> En su lugar, cargue lo que quiera y utilice cualquier servicio de procesamiento de pagos que le guste.</span></li>
<li><span class="notranslate">Una vez más con más control, puedes actualizar tu juego cuando quieras.</span> <span class="notranslate"> No hay que esperar sin aliento para la aprobación, mientras que alguien oculto dentro de otra empresa decide si su solución de error crítico se enviará hoy o mañana.</span></li>
<li><span class="notranslate">¡Controla tus análisis!</span> <span class="notranslate"> En lugar de confiar en otra persona para tomar todas las decisiones sobre qué analítica necesita, puede recoger su propia o elegir la tercera parte que más le guste para recopilar información sobre sus ventas y el alcance de su juego.</span></li>
<li><span class="notranslate">Usted consigue manejar su relación del cliente más de cerca, en su propia manera.</span> <span class="notranslate"> No más tener comentarios de los clientes filtrados a través de los mecanismos limitados de una tienda de aplicaciones.</span> <span class="notranslate"> Involucrarse con sus clientes de la manera que desee, sin un intermediario.</span></li>
<li><span class="notranslate">Sus jugadores pueden jugar su juego en cualquier lugar, en cualquier momento.</span> <span class="notranslate"> Debido a que la Web es omnipresente, sus clientes pueden comprobar el estado de su juego en sus teléfonos, tabletas, computadoras portátiles domésticas, sus escritorios de trabajo o cualquier otra cosa.</span></li>
</ol>
<h2 class="highlight-spanned" id="Tecnologías_web_para_desarrolladores_de_juegos_Edit"><span class="highlight-span"><span class="notranslate">Tecnologías web para desarrolladores de juegos</span> </span><a class="button section-edit only-icon" href="https://developer.mozilla.org/es/docs/Games/Introduccion$edit#Web_technologies_for_game_developers" rel="nofollow, noindex"><span>Edit</span></a></h2>
<p><span class="notranslate">Para la gente de tecnología, vamos a cavar en las API que la Web aporta a la mesa que atienden a los desarrolladores de juegos. Esta es una lista exhaustiva para darle una muestra de lo que la Web puede hacer por usted:</span></p>
<div class="twocolumns">
<dl>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/Fullscreen_API" title="/ Es-ES / docs / DOM / Using_fullscreen_mode">API de pantalla completa</a></span></dt>
<dd><span class="notranslate">Esta sencilla API permite que su juego se haga cargo de toda la pantalla, sumergiendo al jugador en acción.</span></dd>
<dt><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/API/Gamepad/Using_Gamepad_API&usg=ALkJrhhV6r_1Mvu6SOpsoQgHhJElOIWX7g" title="/ Es-ES / docs / API / Gamepad / Using_Gamepad_API">API de Gamepad</a></span></dt>
<dd><span class="notranslate">Si desea que sus usuarios puedan usar gamepads u otros controladores de juego para trabajar su juego, necesitará esta API.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/HTML" title="/ Es-US / docs / HTML">HTML</a> y <a href="https://developer.mozilla.org/es/docs/Web/CSS" title="/ Es-ES / docs / CSS">CSS</a></span></dt>
<dd><span class="notranslate">Juntas, estas dos tecnologías le permiten construir, diseñar y diseñar la interfaz de usuario de su juego.</span> <span class="notranslate"> Parte de HTML es el elemento <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/docs/HTML/Elemento/canvas&usg=ALkJrhhVmlLNFuUPIZvH_teRdETdIbBebw" title="Este artículo aún no se ha escrito. ¡Considere contribuir!"><code><canvas></code></a> , que proporciona una forma de hacer gráficos 2D.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/audio" title="/ Es-ES / docs / HTML / Elemento / audio">Audio HTML</a></span></dt>
<dd><span class="notranslate">El elemento <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/docs/HTML/Elemento/audio&usg=ALkJrhjtX6Px9Gu7gkcd0fdLB1gVGNTqZQ" title="Este artículo aún no se ha escrito. ¡Considere contribuir!"><code><audio></code></a> te permite reproducir fácilmente efectos de sonido y música sencillos.</span> <span class="notranslate"> Si sus necesidades están más involucradas, echa un vistazo a la <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web_Audio_API&usg=ALkJrhgCQeHzpAri8qJ00kmc9rNqYXZzHg" title="/ Es-ES / docs / Web_Audio_API">API de audio web</a> para obtener potencia de procesamiento de audio real.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/IndexedDB-840092-dup" title="/ Es-US / docs / IndexedDB">IndexedDB</a></span></dt>
<dd><span class="notranslate">Una poderosa API de almacenamiento de datos para mantener los datos del usuario en su propio ordenador o dispositivo.</span> <span class="notranslate"> Una gran manera de guardar el estado del juego y otra información localmente para que no tenga que ser descargado cada vez que sea necesario.</span> <span class="notranslate"> También es útil para ayudar a que su juego sea jugable incluso cuando el usuario no está conectado a la Web (por ejemplo, cuando están atrapados en un avión durante horas y horas ...).</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/JavaScript" title="/ Es-ES / docs / JavaScript">JavaScript</a></span></dt>
<dd><span class="notranslate">JavaScript, el lenguaje de programación utilizado en la Web, está ardiendo rápido en los navegadores modernos y cada vez más rápido.</span> <span class="notranslate"> Usa su poder para escribir el código para tu juego, o mira usando tecnologías como <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://github.com/kripken/emscripten/wiki&usg=ALkJrhhAf0czxz7h2rDyV_JV7PSlfap69g" title="Https://github.com/kripken/emscripten/wiki">Emscripten</a> o <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=http://asmjs.org/spec/latest/&usg=ALkJrhh9WXUvKAZKrbEzyZxr8nWhmVHYfw" title="Http://asmjs.org/spec/latest/">Asm.js</a> para portar fácilmente tus juegos existentes.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/WebAPI/Pointer_Lock" title="/ Es-ES / docs / WebAPI / Pointer_Lock">API de bloqueo de puntero</a></span></dt>
<dd><span class="notranslate">La API de Bloqueo de Puntero le permite bloquear el ratón u otro dispositivo señalador dentro de la interfaz de su juego para que en lugar de posicionamiento absoluto del cursor reciba deltas de coordenadas que le den medidas más precisas de lo que el usuario está haciendo e impide que el usuario envíe accidentalmente su entrada En algún otro lugar, por lo tanto falta una acción importante.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/SVG" title="/ Es-ES / docs / SVG">SVG</a> (Gráficos Vectoriales Escalables)</span></dt>
<dd><span class="notranslate">Permite crear gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Vectores_tipados" title="/ Es-US / docs / JavaScript / Typed_arrays">Matrices Arrays</a></span></dt>
<dd><span class="notranslate">Los arrays tipados en JavaScript le dan acceso a datos binarios sin procesar desde JavaScript;</span> <span class="notranslate"> Esto le permite manipular texturas GL, datos de juego, o cualquier otra cosa, incluso si no está en un formato JavaScript nativo.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web_Audio_API" title="/ Es-ES / docs / Web_Audio_API">API de audio web</a></span></dt>
<dd><span class="notranslate">Esta API para controlar la reproducción, síntesis y manipulación de audio a partir de código JavaScript le permite crear efectos de sonido impresionantes, así como jugar y manipular música en tiempo real.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/WebGL_API" title="/ Es-ES / docs / WebGL">WebGL</a></span></dt>
<dd><span class="notranslate">Permite crear gráficos 3D (y 2D) acelerados por hardware de alto rendimiento a partir del contenido Web.</span> <span class="notranslate"> Se trata de una implementación Web de <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=http://www.khronos.org/opengles/&usg=ALkJrhj7Pnj9FaaR-5oxI5CJw3N2i05Ngw" title="Http://www.khronos.org/opengles/">OpenGL ES</a> 2.0.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/WebRTC_API" title="/ En-US / docs / WebRTC">WebRTC</a></span></dt>
<dd><span class="notranslate">La API WebRTC (Comunicaciones en tiempo real) le permite controlar los datos de audio y vídeo, incluyendo la teleconferencia y la transmisión de otros datos de la aplicación entre dos usuarios.</span> <span class="notranslate"> ¿Quieren que sus jugadores puedan hablar entre sí mientras explotan monstruos?</span> <span class="notranslate"> Esta es la API para usted.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/WebSockets_API" title="/ Es-ES / docs / WebSockets">WebSockets</a></span></dt>
<dd><span class="notranslate">La API de WebSocket le permite conectar su aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real.</span> <span class="notranslate"> Perfecto para la acción de juego multijugador, servicios de chat, y así sucesivamente.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/Guide/Performance/Usando_web_workers" title="/ Es-ES / docs / DOM / Using_web_workers">Trabajadores de la Web</a></span></dt>
<dd><span class="notranslate">Los trabajadores le dan la posibilidad de generar hilos de fondo que ejecutan su propio código JavaScript, para aprovechar los modernos procesadores multi-núcleo.</span></dd>
<dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest" title="/ Es-US / docs / DOM / XMLHttpRequest">XMLHttpRequest</a> y <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/DOM/File_API&usg=ALkJrhjS1RWLb9XbCcHs-KcDniPTbC4fcw" title="/ Es-US / docs / DOM / File_API">API de archivos</a></span></dt>
<dd><span class="notranslate">La combinación de XMLHttpRequest y la API de archivos le permiten enviar y recibir cualquier tipo de datos que desee (no deje que el "XML" te lance!) Desde un servidor Web.</span> <span class="notranslate"> Esta es una gran manera de hacer cualquier cosa desde la descarga de nuevos niveles de juego y obras de arte a la transmisión de información de estado de juego en tiempo no real de ida y vuelta.</span></dd>
</dl>
</div>
<aside class="helpful-survey" id="helpful-survey">
<p><span class="notranslate">¿Te resultó útil este artículo?</span></p>
<div class="helpful-survey-content">
<div class="helpful-survey-buttons"></div>
</div>
</aside>
<div class="column-half wiki-column text-content" id="wiki-content">
<article id="wikiArticle">
<aside class="helpful-survey" id="helpful-survey">
<div class="helpful-survey-content">
<div class="helpful-survey-thankyou"><span class="notranslate">Gracias</span></div>
</div>
</aside>
</article>
<div class="wiki-block contributors">
<h2 class="offscreen" id="Etiquetas_y_colaboradores_del_documento"><span class="notranslate">Etiquetas y colaboradores del documento</span></h2>
<div class="tag-attach-list contributors-sub"><span class="notranslate"><strong>Etiquetas:</strong></span>
<ul class="tags tags-small">
<li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/docs/tag/Firefox%2520OS&usg=ALkJrhiMz60hq0NctaBY3vvrFB_d0qOW4A" rel="nofollow, noindex">Firefox OS</a></span></li>
<li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/docs/tag/juegos&usg=ALkJrhgDjdxSwGCqqR9onHjg5aeHWXOtZQ" rel="nofollow, noindex">Juegos</a></span></li>
<li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/docs/tag/moviles&usg=ALkJrhh4FtxUHYR70IVPrUF4PGeh5CrfcA" rel="nofollow, noindex">Moviles</a></span></li>
</ul>
</div>
<div class="contributors-sub"><span class="notranslate"><strong>Colaboradores en esta página:</strong> <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/profiles/Albizures&usg=ALkJrhgWRBfS71scMhWnz4J-PjnFKsFIBA">Albizures</a> , <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/profiles/atlas7jean&usg=ALkJrhgzALymuEYfsd8CnptuoTY4OCPMWw">atlas7jean</a></span></div>
<div class="contributors-sub"><span class="notranslate"><strong>Última actualización por:</strong> <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/profiles/Albizures&usg=ALkJrhgWRBfS71scMhWnz4J-PjnFKsFIBA">Albizures</a> ,</span> <time datetime="2014-10-16T13:58:46-07:00"> <span class="notranslate"> 16 oct.</span> <span class="notranslate"> 2014 13:58:46</span> </time></div>
</div>
</div>
<div class="column-strip wiki-column" id="wiki-left">
<nav class="zone-subnav-container">
<div class="subnav" id="Subnav">
<ol class="accordion">
<li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/docs/Games/Introduccion&usg=ALkJrhiT8uSw5K2TSW051FTS2G9ftOFnZQ#">Introducción</a></span></li>
<li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/es/docs/Games/Introduccion&usg=ALkJrhiT8uSw5K2TSW051FTS2G9ftOFnZQ#">API para el desarrollo de juegos</a></span></li>
<li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Games/Techniques&usg=ALkJrhjTEqvKzu-maArgaCVGov9Q1DC62g">Técnicas</a></span></li>
<li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Games/Tutorials&usg=ALkJrhi4A0KaxMCbPvV5D8_zjT3bnOfGaA">Tutoriales</a></span></li>
<li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=es&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Games/Publishing_games&usg=ALkJrhgQiYOYtL4GRD4H7y3qveRGSfUqvg">Publicar juegos</a></span></li>
</ol>
</div>
</nav>
</div>
|
