Cómo desarrollar un juego de lienzo HTML5 sencillo

Ejemplo de código de desarrollo de minijuego de 9 Seconds Academy

Crear lienzo

// Crear lienzo

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

canvas.width = 512;

canvas.height = 480;

documento .body.appendChild(canvas);

Primero, necesitamos crear un lienzo como escenario del juego. El propósito de escribir el elemento canvas en código JS en lugar de hacerlo directamente en HTML es mostrar lo fácil que es crear el elemento en código. Una vez que tenemos el lienzo, podemos dibujar dentro de su contexto. Luego también podemos establecer el tamaño del lienzo y finalmente agregarlo a la página.

Preparar imágenes

//Imagen de fondo

var bgReady = false;

var bgImage = new Image();

bgImage.onload = función () {

bgReady = true

};

bgImage.src = "imágenes/fondo.png" ;

El corazón del juego son las imágenes, así que primero carguemos algunas imágenes. En aras de la simplicidad, crearemos aquí un objeto de imagen simple en lugar de escribir una clase o ayuda para completar la carga de la imagen. bgReady es una variable que identifica si la imagen está cargada, por lo que podemos usarla con confianza porque se le indicará un error si dibuja sin la imagen cargada.

Las tres imágenes utilizadas a lo largo del juego: fondo, héroe y monstruo se tratan de la misma manera que arriba.

Objeto del juego

//Objeto del juego

var hero = {

Velocidad: 256, // píxeles por segundo

x: 0,

y: 0

};

var monstruo = {

x: 0,

y: 0

};

var monstruo = {

x: 0,

y: 0

};

var monstersCaught = 0;

Ahora define algunos objetos que se utilizarán más adelante. Nuestro héroe tiene una propiedad de velocidad que controla cuántos píxeles se mueve por segundo. Los monstruos no se mueven durante el juego, así que solo usa las propiedades de coordenadas. monstersCaught se utiliza para almacenar la cantidad de veces que se ha capturado un monstruo.

Procesando la entrada del usuario

//Procesando claves

var keyDown = {};

addEventListener("keydown", function (e ) {

keysDown[e.keyCode] = verdadero;

}, falso

addEventListener("keyup", función (e) {

p>

eliminar teclasAbajo[e.keyCode];