Share
En este tutorial, crearemos un clon del juego clásico, Pong, en HTML5, utilizando la biblioteca EaselJS. El juego tendrá múltiples pantallas, efectos de sonido y un (muy simple) oponente de AI.
Utilizando gráficos prefabricados codificaremos un entretenido. Apestar juego en HTML5 utilizando la biblioteca EaselJS, que proporciona una interfaz similar a Flash para el lienzo HTML5. Para una introducción a EaselJS, vea este artículo de Activetuts +.
El jugador podrá controlar una paleta con el mouse y jugar contra el oponente del controlador de la computadora para obtener puntos..
Se utilizará una interfaz simple con un estilo neo-futurista; Esto involucra múltiples formas, botones, mapas de bits y más.
Los gráficos 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.
Puede descargar la última versión de EaselJS desde su sitio web oficial. Sin embargo, esto puede ser incompatible con el código aquí, así que sugiero usar la versión de la biblioteca que se incluye con la descarga de origen..
Preparemos nuestro documento HTML. Comenzaremos con lo más básico, solo un esquema de barebones:
Apestar
También debemos agregar un poco de CSS, para eliminar el resaltado predeterminado que se aplica cuando toca un elemento en un navegador móvil. Sin esto, la experiencia móvil disminuiría drásticamente.
Apestar
El siguiente código agrega las bibliotecas de JavaScript necesarias para que nuestra aplicación funcione.
Apestar /
Además de EaselJS, también usaremos TweenJS (para manejar las transiciones de pantalla y el bucle del juego) y SoundJS (para los efectos de sonido).
Main.js es el archivo que usaremos para guardar nuestro propio código JS.
En las siguientes líneas llamamos a nuestra Principal() función. Esta es la función que iniciará nuestra aplicación; Se creará más adelante en el tutorial, dentro. Main.js.
Apestar
Se crea un lienzo HTML5 en esta línea; Le asignamos una ID para que podamos consultarla más adelante y también establecer su ancho y alto.
Apestar
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 el código. Recuerde guardar el archivo como Main.js en la carpeta de tu proyecto.
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 AS3..
/ * Definir Canvas * / var canvas; etapa var
Esta variable almacena la imagen de fondo del título..
/ * Fondo * / var bgImg = nueva Imagen (); var bg;
Esta es la vista de título, la primera pantalla interactiva que aparece en nuestro juego. Estas variables almacenan sus componentes..
/ * Vista de título * / var mainImg = nueva imagen (); var principal var startBImg = nueva imagen (); var startB; var creditsBImg = nueva imagen (); var creditsB; var TitleView = nuevo contenedor ();
Esta vista mostrará los créditos, el año y los derechos de autor del juego, estas variables se utilizarán para almacenarlo.
/ * Créditos * / var creditsViewImg = new Image (); créditos var
Las siguientes variables almacenan los gráficos individuales que aparecen en la Vista del juego:
/ * Vista del juego * / var playerImg = nueva imagen (); jugador var var ballImg = nueva imagen (); bola var var cpuImg = nueva imagen (); var cpu; var winImg = nueva imagen (); var ganar var loseImg = nueva imagen (); var perder
Los valores de puntuación serán manejados por las siguientes variables:
/ * Puntuación * / var playerScore; var cpuScore;
Estas son las variables que usaremos, lea los comentarios en el código para entender para qué sirven:
var xSpeed = 5; // Velocidad horizontal de la bola var ySpeed = 5; // Velocidad vertical de la bola var gfxLoaded = 0; // utilizado como precargador, cuenta los elementos ya cargados var tkr = new Object; // utilizado como un detector de eventos para el Ticker
Usaremos efectos de sonido para mejorar la sensación del juego. Los sonidos en este ejemplo fueron creados usando la excelente herramienta gratuita as3sfxr y convertidos a MP3 usando Audacity.
Los sonidos requeridos se pueden encontrar en la descarga de la fuente. Si quieres crear el tuyo, necesitarás cuatro:
Accentsconagua
hit.mp3: jugado cuando la pelota golpea un remoplayerScore.mp3: jugó cuando el jugador anotaenemyScore.mp3: jugado cuando el enemigo marcawall.mp3: jugado cuando la pelota golpea el límite superior o inferiorlos 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).
Llamará a las funciones necesarias para iniciar el juego..
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. Añadir esto a Principal().
/ * Link Canvas * / canvas = document.getElementById ('Pong'); 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. Añadir esto a Principal().
stage.mouseEventsEnabled = true;
Usaremos SoundJS para agregar sonidos a nuestro juego; escribe el siguiente código para importar los sonidos que usaremos. Añadir esto a Principal().
/ * Sound * / SoundJS.addBatch ([name: 'hit', src: 'hit.mp3', instancias: 1, name: 'playerScore', src: 'playerScore.mp3', instancias: 1, nombre: 'enemyScore', src: 'enemyScore.mp3', instancias: 1, nombre: 'wall', src: 'wall.mp3', instancias: 1]);
Este código se usa para precargar los gráficos, con la ayuda de una función que escribiremos más adelante. Establece los objetos de imagen que creamos antes para apuntar a los archivos PNG de origen relevantes en nuestra carpeta de documentos.
Se le da un nombre a cada uno, por lo que podemos detectar qué imagen se carga más tarde, y por último se llama la función que maneja las imágenes cargadas.
Añadir esto a Principal().
/ * Cargar GFX * / bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; mainImg.src = 'main.png'; mainImg.name = 'main'; mainImg.onload = loadGfx; startBImg.src = 'startB.png'; startBImg.name = 'startB'; startBImg.onload = loadGfx; creditsBImg.src = 'creditsB.png'; creditsBImg.name = 'creditsB'; creditsBImg.onload = loadGfx; creditsViewImg.src = 'credits.png'; creditsViewImg.name = 'credits'; creditsViewImg.onload = loadGfx; playerImg.src = 'paddle.png'; playerImg.name = 'jugador'; playerImg.onload = loadGfx; ballImg.src = 'ball.png'; ballImg.name = 'ball'; ballImg.onload = loadGfx; cpuImg.src = 'paddle.png'; cpuImg.name = 'cpu'; cpuImg.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 una emisión centralizada de pulsos o latidos en un intervalo establecido. Esto puede ser usado para activar el bucle del juego..
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. Añadir esto a Principal().
/ * 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 comprobará que todos los elementos estén cargados antes de continuar..
función loadGfx (e) if (e.target.name = 'bg') bg = nuevo Bitmap (bgImg); if (e.target.name = 'main') main = new Bitmap (mainImg); if (e.target.name = 'startB') startB = new Bitmap (startBImg); if (e.target.name = 'creditsB') creditsB = new Bitmap (creditsBImg); if (e.target. name = 'credits') credits = new Bitmap (creditsViewImg); if (e.target.name = 'player') player = new Bitmap (playerImg); if (e.target.name = 'ball') ball = new Bitmap (ballImg); if (e.target.name = 'cpu') cpu = new Bitmap (cpuImg); if (e.target.name = 'win') win = new Bitmap ( winImg); if (e.target.name = 'lose') lose = new Bitmap (loseImg); gfxLoaded ++; if (gfxLoaded == 10) // recuerde cambiar esto si agrega más imágenes addTitleView ();
Cuando todos los gráficos están cargados, la Vista de título se agrega a la etapa mediante la siguiente función:
función addTitleView () startB.x = 240 - 31.5; startB.y = 160; startB.name = 'startB'; créditosB.x = 241 - 42; creditsB.y = 200; TitleView.addChild (main, startB, creditsB); stage.addChild (bg, TitleView); stage.update ();
Esta función agrega los oyentes necesarios a la TitleView botones (es parte de addTitleView ()):
startB.onPress = addGameView; creditsB.onPress = showCredits;
los Creditos la pantalla se muestra cuando el usuario hace clic en el botón de créditos; Se agrega un detector de mouse a la imagen completa para eliminarlo..
función showCredits () // Show Credits credits.x = 480; stage.addChild (créditos); stage.update (); Tween.get (créditos) .to (x: 0, 300); credits.onPress = hideCredits;
Cuando el Creditos Se hace clic en la pantalla, se interpone y se elimina del escenario..
// Función de ocultar créditos hideCredits (e) Tween.get (credits) .to (x: 480, 300) .call (rmvCredits); // Función para eliminar créditos rmvCredits () stage.removeChild (credits);
Paremos aquí para probar lo que hemos hecho hasta ahora. Haga clic aquí para una demostración de hito.
Tenga en cuenta que algunas líneas se han comentado ya que algunas funciones aún no se han creado..
Recuerde que el hito está incluido en los archivos de origen, por lo que si por alguna razón su archivo no imita este, compare su fuente con la mía para ver qué podría estar causando eso..
Las siguientes líneas eliminan el TitleView desde el escenario y añade el GameView Artículos al escenario. Se agrega un detector de mouse al fondo para iniciar el juego cuando se hace clic.
function addGameView () // Destroy Menu & Credits screen stage.removeChild (TitleView); TitleView = null; créditos = nulo; // Agregar Game View player.x = 2; jugador.y = 160 - 37.5; cpu.x = 480 - 25; cpu.y = 160 - 37.5; ball.x = 240 - 15; ball.y = 160 - 15; // Score playerScore = nuevo texto ('0', 'bold 20px Arial', '# A3FF24'); playerScore.maxWidth = 1000; // corregir para Chrome 17 playerScore.x = 211; playerScore.y = 20; cpuScore = nuevo texto ('0', 'bold 20px Arial', '# A3FF24'); cpuScore.maxWidth = 1000; // corregir para Chrome 17 cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, player, cpu, ball); stage.update (); // Start Listener bg.onPress = startGame; El jugador se moverá junto con la posición vertical del ratón:
function movePaddle (e) // Mouse Movement player.y = e.stageY;
Este código se ejecuta cuando el jugador hace clic en el fondo del juego, agrega el detector de mouse que activa la función en el paso anterior y agrega un Ticker para controlar el bucle del juego..
Preste atención a la forma en que se crea el ticker: es el equivalente a un evento Timer en AS3.
function startGame (e) bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (tkr, false); tkr.tick = actualizar;
Cuando un punto es anotado (por el jugador o la computadora), las paletas y la bola volverán a sus posiciones originales y el juego se detendrá:
función reset () ball.x = 240 - 15; ball.y = 160 - 15; jugador.y = 160 - 37.5; cpu.y = 160 - 37.5; stage.onMouseMove = null; // deja de escuchar el mouse Ticker.removeListener (tkr); // pausa el juego bg.onPress = startGame;
Si el juego no está en pausa, la bola se moverá a cada fotograma utilizando las variables que creamos antes..
función de actualización () // Ball Movement ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed;
Este código controla el movimiento de la computadora; la paleta se mueve de manera que siga a la pelota sin dejar de tener un margen de error.
si (cpu.y < ball.y) cpu.y = cpu.y + 2.5; else if(cpu.y > ball.y) cpu.y = cpu.y - 2.5;
Aquí comprobamos si la bola está en el borde superior o inferior del lienzo; Si es así, la velocidad vertical se invierte y se reproduce un sonido..
si ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall');;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ('wall');; // down Ahora los lados izquierdo y derecho. Este código también modifica la puntuación, llama a la función de reinicio y reproduce un sonido diferente dependiendo del lado que tocó la pelota..
/ * CPU Score * / if ((ball.x) < 0) xSpeed = -xSpeed; cpuScore.text = parseInt(cpuScore.text + 1); reset(); SoundJS.play('enemyScore'); /* Player Score */ if((ball.x + (30)) > 480) xSpeed = -xSpeed; playerScore.text = parseInt (playerScore.text + 1); Reiniciar(); SoundJS.play ('playerScore'); El siguiente código verifica si la pelota está chocando con una paleta, comparando la posición de la paleta con las coordenadas de la pelota. Si los recuadros delimitadores de los dos se intersecan, se produce una colisión, por lo que invirtimos la velocidad x de la bola y reproducimos un sonido..
/ * Colisión de la CPU * / if (ball.x + 30> cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75) xSpeed *= -1; SoundJS.play('hit'); /* Player collision */ if(ball.x <= player.x + 22 && ball.x > player.x && ball.y> = player.y && ball.y < player.y + 75) xSpeed *= -1; SoundJS.play('hit'); Puede modificar la condición de finalización en las siguientes líneas: se establece en 10 puntos de forma predeterminada.
/ * Compruebe si hay Win * / if (playerScore.text == '10') alert ('win'); / * Revisa Game Over * / if (cpuScore.text == '10') alerta ('perder'); Esta función detendrá el juego y mostrará una alerta, cuyo contenido dependerá del resultado del juego..
función de alerta (e) Ticker.removeListener (tkr); stage.onMouseMove = null; bg.onPress = null if (e == 'win') win.x = 140; win.y = -90; stage.addChild (ganar); Tween.get (ganar) .to (y: 115, 300); else lose.x = 140; perder.y = -90; stage.addChild (perder); Tween.get (perder) .to (y: 115, 300);
Guarda tu trabajo (si no lo has hecho) y abre el archivo HTML en el navegador para ver cómo funciona tu juego!
Intenta modificar las variables del juego para crear tu propia versión del juego!
Espero que te haya gustado este tutorial, gracias por leer.!
