Los niños hoy en día conseguir aburre en la escuela. Un profesor habla con decenas de niños y esperar que para transformar los bajos lanzó vibraciones sonoras en conceptos interesantes en sus cabezas, ¿se imagina? Y aprendizaje de las matemáticas en particular, es difícil para muchos, incluyendo algunos de mis primos, hijos e hijas de las personas con las que trabajo. Entonces, ¿cómo podemos hacer que este proceso un poco menos dolorosa, mientras que al mismo tiempo conseguir nuestras manos en un marco fresco HTML5 juego?

HTML5 móvil desarrollo del juego con el ejemplo –
Juego Educativo
HTML5 móvil desarrollo del juego con el ejemplo – verduras vs Zombies

En este tutorial, vamos a ser la creación de un juego móvil simple de aprender las tablas de multiplicar (o desarrollar otras habilidades matemáticas) en forma de un juego de carreras . El actor principal será un coche de carreras (en realidad se parece más a un poco fiables G.I. Joe en un carro, pero a ver dónde voy) que ganancias de velocidad al responder a las preguntas de matemáticas correctamente y es competir con otra falsa G.I. Joe tipos para alcanzar la meta (representado por una de 8 bits rubia).

Tabla de contenidos

Los Requisitos

Vamos a utilizar el Quinto marco de desarrollo de juegos en este tutorial. Este marco de código abierto fue creado por Pascal Retig y está dirigido a la creación de videojuegos con JavaScript para móviles, de escritorio y más allá.

Los requisitos para este tutorial son los siguientes:


  • La familiaridad con HTML, CSS, JavaScript y conceptos básicos orientados a objetos.
  • Clonar o descarga Quinto de ella de la página de Github.
  • Configuración de un servidor web local. Tenemos que ejecutar el código en este tutorial en un servidor web y no por simplemente haciendo doble clic en los archivos. Más sobre esto más adelante. WAMP para Windows, MAMP para Mac. En Linux sólo tiene que escribir sudo apt-get install apache2.
  • Haga que su IDE favorito listo (Netbeans, Eclipse, Sublime2, Notepad ++, VIM, o cualquier herramienta que se utiliza para la codificación).
  • crack nudillos y empezar a programar!

    Crea una nueva carpeta en la carpeta pública del servidor web (www carpeta en la mayoría de los casos), vamos a llamar a esta nueva carpeta “racingmath”. En ella, crear los siguientes sub-carpetas y archivos vacíos, y copiar los archivos JS contenidas en Quinto / lib donde se muestra:

    racingmath / index.html
    racingmath / datos /
    racingmath / lib / -> copiar el Quinto / lib archivos JS aquí
    racingmath / images /

    Los archivos

    Descargar el código fuente y los activos de juego en este enlace. A menos que quieras arruinar la diversión no se ven en el código por el momento. Copiar el contenido de las imágenes y / / datos a sus homólogos correspondientes en su proyecto sin embargo.

    atribución de archivo:

    Terreno azulejos http://opengameart.org/content/minecraft-ish-platformer-tiles
    Creado por nkorth, gracias por la obra!
    licencia: CC-BY 3.0

    Los tipos duros azulejos http://opengameart.org/content/skyriot-sprites
    Creado por freedomforge, gracias por la obra!
    licencia: CC-BY-SA 3.0

    pixelado conejito chica http://opengameart.org/content/twelve-more-characters-3-free-characters-and-a-child-template
    Creado por Antifarea, presentado por CharlesGabriel. Gracias por la obra!
    licencia: CC-BY 3.0

    El Marco

    Quinto es un marco con un enfoque en la simplicidad y la sintaxis clara. Se agarra a los conceptos de jQuery, Subrayado JS y otros marcos de juegos HTML5. No es necesario tener experiencia en el uso de estas bibliotecas con el fin de empezar a trabajar con Quinto, aunque sin duda sería de ayuda.

    Algunos enlaces útiles para este marco:


      página

    • Quinto Github. Antes de iniciar un nuevo proyecto de marca que usted está utilizando el código más reciente. Puede informar de los errores en esta página. También, al igual que en otros proyectos de código abierto que puede convertirse en un colaborador activo y añadir características adicionales.
      página de inicio

    • Quinto. Echar un vistazo al ejemplo de plataformas, la guía de introducción y el código fuente anotado para tener una idea de los fundamentos.
      comunidad

    • Google Plus Quinto. Si tiene preguntas relacionadas con el marco este es el lugar para preguntar. Además, a medida que se familiarice con ella se puede responder preguntas de otras personas también.

      Los fundamentos

      Antes de empezar con el juego real, me gustaría ir a través de algunos de los conceptos básicos cuando se trabaja con Quinto. Estos se tratan en mayor profundidad en la guía de introducción en la página principal Quinto.

      1. configuración del motor

      Siempre va a empezar su juego mediante la creación de una nueva instancia del motor e incluyendo el Módulos que desea utilizar. Hay algunas opciones de configuración, así que tienen que ver con la resolución de la pantalla. Ejecutar el siguiente iniciará el motor y crear un nuevo lienzo en el documento. También puede especificar su propio identificador de lona:
      var Q = Quinto () .include ( «Sprintes, escenas, de entrada, 2D»); .SETUP ({width: 1000, altura: 1000});. 123varQ = Quinto () incluyen ( «Sprintes, escenas, de entrada, 2D») ;. configuración ({width: 1000, altura: 1000});

      2. Las clases

      Quinto viene con su propia implementación de la herencia simple JavaScript de John Resig para que pueda crear clases y subclases de la misma manera otros lenguajes de POO implementan.
      // esto extender la clase Q.SomeClass, la creación de una nueva clase llamada Q.SomeSubClassQ.SomeClass.extend ( ‘SomeSubClass’, {saludar: function () {console.log ( ‘Hola GameDevAcademy’);}} // crear una instancia de Q.SomeSubClassvar subclass1 = new Q.SomeSubClass (); subclass1.greet () // «Hola GameDevAcademy» en la consola 12345678 // esto extender la clase Q.SomeClass, la creación de una nueva clase llamada Q.SomeSubClassQ. SomeClass.extend ( ‘SomeSubClass’, {greet: function () {console.log ( ‘Hola GameDevAcademy’);}} // crear una instancia de Q.SomeSubClassvarsubclass1 = newQ.SomeSubClass (); subclass1.greet () // «Hola GameDevAcademy» en la consola

      Hay conceptos básicos más fundamentales en este marco, pero vamos a ver en ellos a medida que los necesitamos en nuestro juego.

      La inicialización

      Basta de hablar! Vamos a empezar con nuestro juego educativo. Ponga el siguiente contenido en index.html: