¡Buenas!

Para mantener activo el blog, decidí hacer cada cierto tiempo un videojuego sencillo en HTML5, y comentar su desarrollo paso por paso en diferentes entradas. No usaré ningún framework especializado, pues esto será sólo por diversión.

 

Y… en esta primera ocasión: Un shooter simple.

 

PARTE 1: Planeando el juego

En esta primera parte no tocaremos nada de JavaScript. Sólo planearé la mecánica del juego, y definiré el diseño general del mismo.

 

LA IDEA

El juego será un shooter a modo “arcade”, es decir, sin fin. El objetivo será sobrevivir el mayor tiempo posible y romper récords guardados de forma local anteriormente. El jugador estará en una pequeña habitación, se podrá mover en ocho direcciones, y tendrá que eliminar enemigos (digamos, zombies) para obtener items que le ayuden a sobrevivir, como munición extra o aumentos de salud.

 

INODOS

El directorio del juego será algo así:

  • index.html
  • source
    • style.css
    • game.js
    • sprites
      • Todos los sprites del juego

Realmente no habrán muchos archivos en el juego. Lo que más habrá son imágenes: El sprite del fondo del juego, los muros, el jugador, los enemigos, y algunos items. Para todas estas imágenes, usaré recursos CC0 de kenney.nl

 

ESTILO INICIAL

Partamos de una estructura HTML y estilos básicos:
Archivo index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Shooter en Canvas</title>
    <link rel="stylesheet" type="text/css" href="source/style.css">
    <meta charset="utf-8">
</head>
<body>

    <h1>¡Sobrevive el mayor tiempo posible!</h1>

    <canvas id="game" width="800" height="600">
        Tu navegador no soporta canvas. Por favor utiliza un navegador
        actualizado.
    </canvas>

</body>
</html>

Archivo style.css:

html, body {
    position: absolute;
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    font:13pt Calibri;
    color: white;

    background-color: #387AFF;

    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;

    -webkit-align-items: center;
    -moz-align-items: center;
    -o-align-items: center;
    align-items: center;

    -webkit-justify-content: center;
    -moz-justify-content: center;
    -o-justify-content: center;
    justify-content: center;

    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}
#game {
    border:1px solid black;
    background-image: url(sprites/background.png);
}

Aquí dejo el directorio con lo que llevaríamos hasta el momento: CLICK AQUÍ.

 

Y hasta aquí esta primera parte. Haz clic aquí para ir a la segunda parte.

Al final del desarrollo, dejaré un enlace a Github con todo el código fuente del juego.