Share
El año pasado, te mostré cómo crear un juego de disparos con Flash y AS3. Con el aumento de la popularidad (y las capacidades) de HTML5, veamos cómo hacer lo mismo con HTML5, JavaScript y EaselJS..
Echemos un vistazo al resultado final en el que trabajaremos:
Haz click para reproducir la demo..
Usando sprites pre-hechos codificaremos un entretenido Tirador del espacio juego en HTML5 usando la biblioteca EaselJS.
El jugador podrá controlar una nave espacial y disparar a múltiples enemigos mientras viaja en el espacio.
Se utilizará una interfaz simple y futurista, esto implica mapas de bits y más. He usado una gran biblioteca de sprites en la demostración de este tutorial, estos son parte de la Sinistar Clone Graphics gratis..
Los recursos de interfaz necesarios para este tutorial se pueden encontrar en la descarga adjunta..
La biblioteca EaselJS se usará para construir nuestro juego, asegúrate de leer el Empezando tutorial si eres nuevo en esta biblioteca.
Puedes descargar EaselJS desde su sitio web oficial..
Preparemos nuestro documento HTML, es una estructura HTML simple para comenzar a escribir nuestra aplicación. Guardar esto como Shooter.html.
Tirador
Agreguemos un poco de CSS también, esta línea eliminará el resaltado predeterminado cuando toque un elemento con un navegador móvil; Sin esto, la experiencia móvil disminuiría drásticamente..
Tirador
El siguiente código agrega las bibliotecas de JavaScript necesarias para que nuestra aplicación funcione.
Tirador
Main.js Es el archivo que usaremos para almacenar todas nuestras funciones para el juego. Créelo ahora y guárdelo en la misma carpeta que Shooter.html. También deberá descargar las bibliotecas de EaselJS enumeradas..
En las siguientes líneas llamamos a nuestra función principal; Esta es la función que iniciará nuestra aplicación, se creará más adelante en nuestro código JavaScript..
Tirador
El lienzo se añade en esta línea. Asignamos una ID para referenciarla más tarde y también establecemos su ancho y alto.
Tirador
Empecemos nuestra creación de juegos.!
Abra su editor de JavaScript preferido (cualquier editor de texto funcionará, pero no tendrá resaltado de sintaxis) y prepárese para escribir su increíble juego. Abre el Main.js archivo creado anteriormente.
Comenzaremos por definir todas las variables gráficas y lógicas..
Las siguientes variables representan el elemento de lienzo HTML y la etapa que se vinculará a él. (Los escenario La variable se comportará de manera similar a la etapa en un proyecto Flash AS3.)
/ * Definir Canvas * / var canvas; etapa var
Las siguientes variables almacenan las imágenes de fondo. Dos imágenes en mosaico se utilizan para crear un fondo de desplazamiento infinito.
/ * Fondo * / var bgImg = nueva Imagen (); var bg; var bg2Img = nueva imagen (); var bg2;
Este es el barco que se usará como personaje de jugador o héroe..
/ * Ship * / var sImg = new Image (); barco var
Múltiples enemigos estarán en el escenario; Ellos usarán esto como la fuente gráfica..
/ * Enemy * / var eImg = new Image ();
Un jefe estará presente en el juego, más grande y con más salud que los otros enemigos. Estas variables se utilizan para instanciarlo..
/ * Jefe * / var bImg = nueva Imagen (); jefe de var
El icono de "vida". Al comienzo se dan tres vidas, y pierdes una cuando te golpea un enemigo..
/ * Vidas * / var lImg = nueva imagen ();
Esta es tu arma: dispara balas a los enemigos para matarlos. Esta variable almacena la imagen de origen..
/ * Bullets * / var bltImg = new Image ();
Se utilizan dos alertas en el juego, una para cuando ganas y otra para cuando pierdes. Veremos cómo determinar una ganancia o una pérdida más adelante en este tutorial..
/ * Alert * / var winImg = new Image (); var loseImg = nueva imagen (); var ganar var perder
Estas son las variables que usaremos, lea los comentarios en el código para saber más sobre ellas. Algunos de sus nombres se explican por sí mismos, por lo que no tienen comentarios..
var lives = nuevo Container (); // almacena las vidas gfx var bullets = new Container (); // almacena las balas gfx var enemigos = nuevo Contenedor (); // almacena los enemigos gfx var bossHealth = 20; puntuación var; var gfxLoaded = 0; // usado como precargador, cuenta los elementos ya cargados var centerX = 160; var centerY = 240; var tkr = nuevo objeto (); // utilizado como un oyente Ticker var timerSource; // hace referencia a un método setInterval
Usaremos efectos de sonido para mejorar la sensación del juego. Puede encontrar los sonidos utilizados en este ejemplo en Soungle.com usando las palabras clave espacio, explosión y láser.
los Principal() La función será la primera en ejecutarse cuando se cargue la página web, ya que se menciona en la onload atributo del documento HTML (ver paso 7).
Se llama a las funciones necesarias para iniciar el juego. Crearemos esas funciones en los siguientes pasos: todo desde el Paso 19 al Paso 23 debe ir dentro de esta función.
función principal () // código…
Este código obtiene el ID de lienzo HTML y lo vincula a la clase Stage de EaselJS. Esto hará que la variable de etapa se comporte como la clase de etapa en AS3.
Accentsconagua
/ * Link Canvas * / canvas = document.getElementById ('Shooter'); etapa = nueva etapa (lienzo); Los eventos del mouse están deshabilitados de forma predeterminada en EaselJS para mejorar el rendimiento; Como los necesitamos en el juego, agregamos la siguiente línea..
stage.mouseEventsEnabled = true;
Usaremos SoundJS para agregar sonidos a nuestro juego. De SoundJS añadir lote El método utiliza una matriz de tres parámetros para cada llamada:
nombre: El nombre de la instancia que desea que tenga el sonido - se usará para reproducir el sonido más adelante.src: La URL del archivo de sonido.instancias: El número de instancias que se pueden reproducir al mismo tiempo./ * Sound * / SoundJS.addBatch ([name: 'boss', src: 'boss.mp3', instancias: 1, name: 'explo', src: 'explo.mp3', instancias: 10, nombre: 'tiro', src: 'tiro.mp3', instancias: 10]);
Este código se usa para precargar los gráficos con la ayuda de una función que escribiremos más adelante. Apunta cada objeto de imagen que creamos anteriormente al archivo PNG de origen en nuestra carpeta de documentos. Se da un nombre para detectar qué imagen se carga y, por último, se llama a la función que maneja las imágenes cargadas..
/ * Cargar GFX * / bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; bg2Img.src = 'bg2.png'; bg2Img.name = 'bg2'; bg2Img.onload = loadGfx; sImg.src = 'ship.png'; sImg.name = 'ship'; sImg.onload = loadGfx; eImg.src = 'enemy1.png'; eImg.name = 'enemigo'; eImg.onload = loadGfx; bImg.src = 'boss.png'; bImg.name = 'jefe'; bImg.onload = loadGfx; lImg.src = 'live.png'; lImg.name = 'live'; lImg.onload = loadGfx; bltImg.src = 'bullet.png'; bltImg.name = 'bullet'; bltImg.onload = loadGfx; winImg.src = 'win.png'; winImg.name = 'win'; winImg.onload = loadGfx; loseImg.src = 'lose.png'; loseImg.name = 'perder'; loseImg.onload = loadGfx;
La clase Ticker proporciona un "tick" centralizado, emitido en un intervalo establecido. Podemos usar su garrapata() Función para ejecutar cierto código a una frecuencia regular.
El siguiente código establece la velocidad de fotogramas en 30 y define la etapa como el oyente para los tics..
La clase TweenJS escuchará este tick para realizar las animaciones..
/ * Ticker * / Ticker.setFPS (30); Ticker.addListener (etapa);
Cada vez que se carga un gráfico se ejecutará esta función. Asignará cada imagen a un objeto de mapa de bits y verificará que todos los elementos estén cargados antes de proceder a llamar. addGameView.
función loadGfx (e) if (e.target.name = 'bg') bg = nuevo Bitmap (bgImg); if (e.target.name = 'bg2') bg2 = new Bitmap (bg2Img); if (e.target.name = 'ship') ship = new Bitmap (sImg); gfxLoaded ++; if (gfxLoaded == 9) addGameView ();
Cuando todos los gráficos están cargados el addGameView se llama funcion Esta función agregará la nave, el contador de vidas, la puntuación y los fondos al escenario..
función addGameView () ship.x = centerX - 18.5; ship.y = 480 + 34; / * Añadir vidas * / para (var i = 0; i < 3; i++) var l = new Bitmap(lImg); l.x = 248 + (25 * i); l.y = 463; lives.addChild(l); stage.update(); /* Score Text */ score = new Text('0', 'bold 14px Courier New', '#FFFFFF'); score.maxWidth = 1000; //fix for Chrome 17 score.x = 2; score.y = 476; /* Second Background */ bg2.y = -480; /* Add gfx to stage and Tween Ship */ stage.addChild(bg, bg2, ship, enemies, bullets, lives, score); Tween.get(ship).to(y:425, 1000).call(startGame); La nave del jugador estará controlada por el mouse, y usamos esta función para manejar eso:
función moveShip (e) ship.x = e.stageX - 18.5;
e.stageX se refiere a la coordenada x del mouse, y esta función se llama cuando el mouse se mueve.
Nuestra nave podrá disparar balas para destruir y protegerse de los enemigos. Esta función se ejecutará cada vez que el usuario haga clic en el escenario y colocará una bala frente al barco que luego será movida por el actualizar() función. También reproduce un sonido de disparo..
function shoot () var b = new Bitmap (bltImg); b.x = ship.x + 13; b.y = ship.y - 20; bullets.addChild (b); stage.update (); SoundJS.play ('shot'); No sería un tirador sin algo que disparar. Aquí un setInterval () se utiliza para crear un enemigo cada 1000 milisegundos (puedes cambiar ese valor en el siguiente paso) que luego es movido por el actualizar() función.
función addEnemy () var e = new Bitmap (eImg); e.x = Math.floor (Math.random () * (320 - 50)) e.y = -50 enemigos.addChild (e); stage.update ();
Estas líneas agregarán los oyentes necesarios al escenario y al temporizador; esto incluye eventos del mouse, eventos cronometrados (a través de setInterval) y eventos Ticker que actualizarán el juego cada fotograma..
function startGame () stage.onMouseMove = moveShip; bg.onPress = disparar; bg2.onPress = disparar; Ticker.addListener (tkr, false); tkr.tick = actualizar; timerSource = setInterval ('addEnemy ()', 1000); El fondo se mueve cada cuadro para simular el viaje espacial; cuando el sprite de fondo inferior alcanza el límite del escenario, se mueve de nuevo a la parte superior, creando un bucle infinito.
función de actualización () / * Mover fondo * / bg.y + = 5; bg2.y + = 5; if (bg.y> = 480) bg.y = -480; else if (bg2.y> = 480) bg2.y = -480;
Las siguientes líneas de código verifican si hay viñetas en la etapa; Si es así, las balas se mueven hacia arriba..
/ * Mover viñetas * / para (var i = 0; i < bullets.children.length; i++) bullets.children[i].y -= 10;
Agreguemos algunas líneas para detectar la posición de la bala y utilicemos esto para destruir una bala cuando ya no esté visible..
/ * Mover viñetas * / para (var i = 0; i < bullets.children.length; i++) bullets.children[i].y -= 10; /* Remove Offstage Bullets */ if(bullets.children[i].y < - 20) bullets.removeChildAt(i);
Agregaremos un gran mal jefe al juego. Cuando el usuario alcanza un cierto puntaje, el jefe aparecerá:
/ * Show Boss * / if (parseInt (score.text)> = 500 && boss == null) boss = new Bitmap (bImg); SoundJS.play ('jefe'); boss.x = centerX - 90; boss.y = -183; stage.addChild (jefe); Tween.get (boss) .to (y: 40, 2000) // interpone el boss en el área de juego Los enemigos, como las balas, también se mueven cada cuadro. Este código encuentra a todos los enemigos en el escenario utilizando el enemigos Contenedor, y los mueve cada 5px hacia abajo..
/ * Mover enemigos * / para (var j = 0; j < enemies.children.length; j++) enemies.children[j].y += 5;
También comprobamos las posiciones de los enemigos para destruirlos cuando ya no son visibles..
/ * Mover enemigos * / para (var j = 0; j < enemies.children.length; j++) enemies.children[j].y += 5; /* Remove Offstage Enemies */ if(enemies.children[j].y > 480 + 50) enemigos.removeChildAt (j);
Las balas en el contenedor son probadas para colisionar con los enemigos; cuando esto sucede, ambos se eliminan del escenario, se reproduce un sonido y se actualiza la partitura.
para (var k = 0; k < bullets.children.length; k++) /* Bullet - Enemy Collision */ if(bullets.children[k].x >= enemy.children [j] .x && bullets.children [k] .x + 11 < enemies.children[j].x + 49 && bullets.children[k].y < enemies.children[j].y + 40) bullets.removeChildAt(k); enemies.removeChildAt(j); stage.update(); SoundJS.play('explo'); score.text = parseFloat(score.text + 50); El siguiente código maneja las colisiones del jefe, usa el mismo método usado en el bucle de colisión entre el enemigo y la bala. Aquí usamos el jefe de salud Variable para determinar cuando el jefe es derrotado..
/ * Bullet - Boss Collision * / if (boss! = Null && bullets.children [k] .x> = boss.x && bullets.children [k] .x + 11 < boss.x + 183 && bullets.children[k].y < boss.y + 162) bullets.removeChildAt(k); bossHealth--; stage.update(); SoundJS.play('explo'); score.text = parseInt(score.text + 50); Aquí comprobamos si un enemigo choca con la nave del jugador; Si lo hace, se reproduce un sonido, se quita una vida y se anima el barco..
/ * Ship - Enemy Collision * / if (enemy.hitTest (ship.x, ship.y) || enemy.hitTest (ship.x + 37, ship.y)) enemigos.removeChildAt (j); lives.removeChildAt (lives.length); ship.y = 480 + 34; Tween.get (envío) .to (y: 425, 500) SoundJS.play ('explo'); El jugador gana cuando el jefe pierde toda su salud y pierde si todas sus vidas se pierden. Las siguientes líneas detectan esas situaciones y llaman a una función de alerta usando el parámetro correcto.
/ * Verifique si gana * / si (¡jefe! = Nulo && jefeSalud <= 0) alert('win'); /* Check for lose */ if(lives.children.length <= 0) alert('lose'); La alerta muestra la información del jugador sobre el estado del juego; se muestra cuando se alcanza un evento de juego. Elimina a los oyentes del juego y muestra el mensaje correspondiente..
función alerta (e) / * Eliminar escuchas * / stage.onMouseMove = null; bg.onPress = null; bg2.onPress = nulo; Ticker.removeListener (tkr); tkr = nulo; timerSource = null; / * Mostrar mensaje correcto * / if (e == 'win') win = new Bitmap (winImg); win.x = centerX - 64; win.y = centerY - 23; stage.addChild (ganar); stage.removeChild (enemigos, jefe); else lose = new Bitmap (loseImg); lost.x = centerX - 64; perder.y = centroY - 23; stage.addChild (perder); stage.removeChild (enemigos, nave); bg.onPress = function () window.location.reload ();; bg2.onPress = function () window.location.reload ();; stage.update ();
Guarda tu trabajo (si no lo has hecho) y abre el archivo HTML en el navegador para ver cómo funciona tu juego HTML5!
Has aprendido cómo crear un juego de Space Shooter con todas sus características básicas, intenta expandirlo utilizando lo que ya sabes. Un buen comienzo sería hacer que los enemigos o el jefe disparen al jugador.
Espero que te haya gustado este tutorial, gracias por leer.!
