Snake part_1

En este capitulo comenzaremos con una serie de tutoriales para crear el clásico juego de Snake, por el momento será solo en javascript, dibujando los frames en la etiqueta canvas.

En esta entrada comenzamos con la parte de html y css con el enlace a JS.

index.html

<canvas class="mcv" height="600" id="canvas" width="400"></canvas>

Por el momento el código html lo dejamos de con eso damas, mientras que el apartado css 

estilo.css

.mcv {
    border: solid 0px;
    box-shadow: 0px 0px 5px 2px #404040;
    float: left;
}

Comenzamos con el javascript de la siguiente manera.

Para este punto quiero mencionar que en este caso estoy comenzando a usar los objetos de tipo clase en javaScript.

El codigo comienza en con lo siguiente.

Game.js

class Game{
     //constructor de la clase
     constructor(){
          this.c = document.getElementById("canvas");
          this.ctx = this.c.getContext("2d");
     }
     //evento inicial de la clase
     //nos ayudara a iniciar los demas objetos
     init(){
          var ts = this;
          this.interval = setInterval(function() {
               ts.update();
          }, 500);
     }
     //evento que pintara lo que veremos
     draw(){
          this.ctx.clearRect(0,0,this.c.width,this.c.height);
          this.ctx.beginPath();
          this.ctx.font = "12px Verdana";
          this.ctx.fillStyle="green";
          this.ctx.fillText('inovania.blogspot.com', 50, 50);
          this.ctx.stroke();
     }
     //evento que actualiza el estado del juego.
     update(){
          this.draw();
     }
}
//llamado de la clase
new Game().init();

Dejamos hasta aquí la entrada.

No olvides seguirme para ser de los primeros en recibir las notificaciones de la continuidad del juego.