comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[HTML][MEDIO] Juegos en HTML5 - Tutorial 1

  • 3 Respuestas
  • 1740 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado martinanonymo

  • *
  • Underc0der
  • Mensajes: 40
  • Actividad:
    0%
  • Reputación 0
  • Codeo en VB♥
    • Ver Perfil
  • Skype: martin.recalde4
« en: Febrero 05, 2013, 09:57:39 pm »
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




Despues es cuestion de agregar el siguiente codigo javascript, en medio de la etiqueta head:



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:



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.

Fuente: You are not allowed to view links. Register or Login
« Última modificación: Agosto 12, 2013, 11:02:32 pm por Destructor.php »
Para ganar hay que arriesgar

Desconectado jhoanseller

  • *
  • Underc0der
  • Mensajes: 1
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • Email
« Respuesta #1 en: Junio 04, 2013, 09:56:19 pm »
 ;) Buen aporte , seria bueno que sigas posteando este tipo de info . para prender a crear nuevos juego en esta plataforma nueva..  Exlente espero que sigas con la tutoria...!
 ;D ;D

Desconectado WHK

  • *
  • Underc0der
  • Mensajes: 68
  • Actividad:
    0%
  • Reputación 3
  • 吴阿卡
    • Ver Perfil
    • WHK
« Respuesta #2 en: Junio 10, 2013, 09:34:57 am »
muchas gracias! se agradece la información :)
You are not allowed to view links. Register or Login - The Hacktivism is not a crime - Si no lo hago yo, que lo hagan otros -

Desconectado Røøt.exE

  • *
  • Underc0der
  • Mensajes: 3
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
  • Skype: root.ejecutable
« Respuesta #3 en: Julio 16, 2013, 11:55:52 pm »
Muy buena información. Esperemos al desarrollo de la etiqueta para posteriores versiones de HTML y ver que sorpresas no puede dar.

ESTUDIANDO PYTHON
<======                >
50%



PROGRAMADOR DE
HTML-CSS | PAWNO | BATCH


 

¿Te gustó el post? COMPARTILO!



[Tutorial] Como crear un google maps con marcadores

Iniciado por graphixx

Respuestas: 5
Vistas: 1781
Último mensaje Agosto 28, 2014, 10:52:04 am
por Cl0udswX
[JavaScript][MEDIO] Menu 'Mac' en Javascript

Iniciado por @ed33x

Respuestas: 0
Vistas: 920
Último mensaje Enero 21, 2011, 11:54:30 am
por @ed33x
[HTML][BASICO] Script ''Haga desfilar un texto mediante la etiqueta <marquee>''

Iniciado por ANTRAX

Respuestas: 0
Vistas: 933
Último mensaje Febrero 24, 2010, 11:15:37 am
por ANTRAX
Curso: Diseño Web: [HTML y CSS Desde Cero] [Convierte tus diseños en sitios web]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 126
Último mensaje Julio 27, 2018, 01:20:17 pm
por Mr.Kratos
[VIDEOTUTORIAL] Full Stack Developer - Desde HTML hasta PYTHON - 15 GB

Iniciado por graphixx

Respuestas: 5
Vistas: 7445
Último mensaje Abril 01, 2018, 02:46:38 pm
por graphixx