Foros del Web » Creando para Internet » HTML »

Desarrollo de juegos HTML5 tutorial 1

Estas en el tema de Desarrollo de juegos HTML5 tutorial 1 en el foro de HTML en Foros del Web. Hola a todos, este es el primer tutorial de una serie que realizare, y que ayudaran a conocer puntos claves del desarrollo de juegos en ...
  #1 (permalink)  
Antiguo 03/01/2013, 20:24
 
Fecha de Ingreso: diciembre-2012
Mensajes: 3
Antigüedad: 10 años
Puntos: 7
Desarrollo de juegos HTML5 tutorial 1

Hola a todos, este es el primer tutorial de una serie que realizare, y que ayudaran a conocer puntos claves del desarrollo de juegos en HTML5; para esta primera parte me enfocare en dar una introducción a la etiqueta <canvas> que es la que permite dibujar en el navegador y permitira asignar parte grafica a los juegos.

Primero comentar que esta etiqueta fue desarrollada por Apple para su navegador Safari. Despues la W3C (World Wide Web Consortium) empezo a trabajar con un grupo de empresas entre las que estaba el mismo Apple y decidio adoptar canvas para el lanzamiento de la siguiente version de HTML, es decir HTML5.


¿Y que se puede hacer con canvas?

Basicamente lo que permite canvas es dibujar poligonos de multiples formas, asignarles colores, degradados y mostrar imagenes, todo esto directamente en el navegador, sin necesidad de plugins como flash.

Todo lo anterior parece genial, pero canvas todavia esta en proceso de desarrollo, y tiene algunos inconvenientes, por ejemplo, si dibujamos una linea, no existe un metodo que permita borrar solamente esa linea, para ello tendriamos que borrar todo canvas, o recurrir a otro metodo que permite borrar una seccion cualquiera, pero solo en forma de rectangulo. Tampoco es cuestion de alarmase, ya existen librerias que facilitan mucho todo ese trabajo.

El primer dibujo, un rectangulo azul

Lo primero es crear la etiqueta canvas y asignarle un id de la siguiente forma

Código:
<canvas id="canvas" width="300" height="300"></canvas>
Despues es cuestion de agregar el siguiente codigo javascript, en medio de la etiqueta head:

Código:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");            
ctx.fillStyle = "blue";
ctx.fillRect(30, 30, 100, 100);
Como se puede observar lo primero que se hace es obtener el elemento canvas por medio de su id, luego sea crea una variable llamada ctx (canvas context), y se le asigna el metodo getContext(), esta variable es la que permite dibujar.

Seguidamente se le asigna un color a ctx y se llamada el metodo fillRect; los dos primeros numeros, son la ubicacion del rectangulo y los dos siguientes el ancho y el alto. El rectangulo se veria asi:



Agregar una imagen

Para desarrollar un juego con una buena interfaz grafica es necesario utilizar imagenes, de modo que voy a agregar una imagen de mario bros que estara almacenada en una carpeta, esto se puede hacer de la siguiente manera:

Código:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); 
var imagen = new Image();
imagen.src = 'Styles/Images/mario.jpeg';

imagen.onload = function () {
     ctx.drawImage(imagen, 30, 30, 80, 130);

}
Las primeras dos lineas de codigo son iguales que si fueramos a dibujar un rectangulo, luego lo que necesitamos hacer es crear un objeto de tipo Image, a ese objeto le asignamos la ruta de la imagen por medio de la propiedad src.

Luego es necesario asignar el metodo .onload, el cual se ejecutara una vez la imagen este cargada, esta parte es indispensable o sino la imagen no se cargaria en algunos navegadores. Al final se veria asi:



Y eso es todo por hoy, un pequeña introduccion al elemento canvas, espero que haya sido de utilidad.

Última edición por GatorV; 21/02/2013 a las 13:06
  #2 (permalink)  
Antiguo 04/01/2013, 10:05
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 13 años, 5 meses
Puntos: 641
Respuesta: Desarrollo de juegos HTML5 tutorial 1

¿De verdad tu programaste el buscaminas en Jquery?

+1
  #3 (permalink)  
Antiguo 07/01/2013, 09:45
Avatar de cvander
Moderador
 
Fecha de Ingreso: abril-2001
Ubicación: Ciudadano del mundo
Mensajes: 13.638
Antigüedad: 21 años, 7 meses
Puntos: 1791
Respuesta: Desarrollo de juegos HTML5 tutorial 1

Muy buen aporte.

También para febrero se viene un curso de videojuegos con HTML5 de parte de Google.

http://www.udacity.com/overview/Cour...55/CourseRev/1
__________________
- Christian Van Der Henst
Platzi
  #4 (permalink)  
Antiguo 07/01/2013, 17:46
Avatar de lgga  
Fecha de Ingreso: octubre-2004
Mensajes: 443
Antigüedad: 18 años, 1 mes
Puntos: 37
Respuesta: Desarrollo de juegos HTML5 tutorial 1

Excelente, cada cuando estarás publicando los tutos?
__________________
Breaking the LAW
TSM
  #5 (permalink)  
Antiguo 19/09/2014, 21:40
 
Fecha de Ingreso: mayo-2012
Ubicación: cali
Mensajes: 2
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Desarrollo de juegos HTML5 tutorial 1

En este video te enseñan hacer un juego con html y js, es sencillo para personas que apenas estan aprendiendo http://www.youtube.com/watch?v=DYC9FXKUkQc

Etiquetas: html5, juegos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 5 personas




La zona horaria es GMT -6. Ahora son las 15:39.