|
|
Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.
Temas - will21
Páginas: [1]
1
« en: Jueves 21 de Febrero de 2013, 18:23 »
Hola a todos, hoy quiero compartir un pequeño tutorial referente a la forma de reproducir sonidos en HTML5. Lo primero que hay que saber es que el formato de audio que utilicemos, va a depender del navegador donde estemos ejecutando nuestra aplicacion. Lo mejor es verlo por medio de una tabla: Esta tabla que fue tomada de w3schools, ilustra muy bien los formatos soportados por cada navegador. Si obsevamos bien no existe un formato que soporten todos los navegadores, por lo tanto necesitamos tener por lo menos dos formatos de un mismo sonido para que queden cubiertos todos los navegadores.
Entrando en materia, para reproducir un archivo necesitaremos:
1. Agregar etiqueta html Esta es la primera parte, lo que se hace es añadir una etiqueta llamada audio y se le asigna un id, luego dentro de esta etiqueta se agregan otras dos llamadas source, aqui es donde estara la ruta de los archivos. Como se puede observar se agregan dos, ya que si el primer archivo no lo soporta el navegador, entonces cargara el segundo.
2. Reproducir sonido utilizando javascript Lo primero que se necesita hacer, es crear una variable donde obtendremos el elemento de audio que creamos anteriormente. Esta variable se crea dentro del conocido metodo .ready() de jQuery, el cual se ejecuta cuando todos los elementos de la pagina esten cargados, es importante hacerlo de esta manera o sino existe el riesgo que la variable sonido quede como indefinida. Ahora sencillamente se puede crear un boton que al momento de hacer click sobre el, se ejecute el metodo play(), el cual permite que se ejecute el sonido que hemos cargado.
Otros metodos y atributos importantes
Con el fin de tener un mejor manejo de todos los archivos de sonido, existen otros metodos y propiedades muy utiles los cuales son:
pause() Permite pausar la reproduccion
canPlayType() Permite saber si el archivo asignado se puede reproducir en el navegador
.currentTime Atributo que permite conocer cuantos segundos lleva la canción en reproducción
.volume Permite asignar el volumen a la cancion, el atributo va de 0 a 1, de modo que se puede asignar por ejemplo 0.5 de volumen
.duration Permite saber la duracion de la canción (el valor se obtiene en segundos)Ejemplo practico
Y para terminar quiero compartir un ejemplo sencillo que implemente pero que puede ser bastante util al momento de reproducir un sonido. Luce asi:
 En el ejemplo cargo una cancion y creo los botones de play, pause y stop, tambien adiciono otro boton que permite disminuir el volumen de la cancion, y por ultimo añado en la parte inferior un <div> en el cual se muestra la cantidad de segundos que lleva de reproducción la canción.
Y el codigo: http://rapidshare.com/files/2719144879/Audio%20HTML5.rarMuchas gracias a todos y si les interesa mas informacion pueden visitar mi blog www.hacerjuegos.net
2
« en: Miércoles 13 de Febrero de 2013, 16:07 »
Hola a todos, hoy traigo la cuarta parte del tutorial de juegos en html5, para este ocasion el juego se vera asi:  En este tutorial introduje enemigos que van saliendo de manera aleatoria, y nuestro objetivo sera dispararles para que no nos toquen o sino perderemos y tendremos que volver a empezar. Ademas agregue una pantalla al inicio, lo cual hace que el usuario tenga que dar click para que el juego inice (lo mas normal en un juego web). Espero les guste y les dejo el linkhttp://www.hacerjuegos.net/2013/02/juegos-en-html5-tutorial-4.html
3
« en: Lunes 4 de Febrero de 2013, 21:21 »
Hola a todos, hoy traigo la tercera parte de programación de juegos en html5, espero les guste, quiero recordar que el objetivo es obtener algo asi:Para este tutorial explicare el loop principal, el metodo que detecta el teclado y el metodo que desplaza el fondo. Tambien subire el codigo para el que lo quiera ver completo.http://www.hacerjuegos.net/2013/02/juegos-en-html5-tutorial-3.html
4
« en: Miércoles 30 de Enero de 2013, 19:57 »
Hola a todos, primero disculpas por la tardanza, pero aqui les traigo la segunda parte del tutorial de programacion de juegos, esta vez el objetivo sera crear algo asi
Tendremos una nave que se podra mover por todo el escenario, el fondo se desplazara automaticamente (no se puede apreciar en la imagen) y la nave podra hacer un disparo (se dispara con z). Lo interesante es que con este tutorial se practicara, colisiones, el loop del juego y deteccion del teclado.
Asi que los invito al sitio del tutorial  http://www.hacerjuegos.net/2013/01/juegos-en-html5-tutorial-2.html
5
« en: Lunes 28 de Enero de 2013, 17:41 »
Hola a todos, hoy quiero compartir un tetris desarrollado en html5, es sencillo pero tiene muy buena jugabilidad, espero les guste, les dejo algunas imagenes:Para jugarlo se puede hacer desde mi blog http://www.hacerjuegos.net/2013/01/tetris-html5.html si llegaran a tener algun problema, entonces ingresen a la pagina donde esta colgado directamente el juego, http://www.intelygames.com/tetris/
Gracias a todos
6
« en: Viernes 4 de Enero de 2013, 02:13 »
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.
¿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 formaDespues es cuestion de agregar el siguiente codigo javascript, en medio de la etiqueta head: var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(30, 30, 100, 100)
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: 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); }
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 si quiere saber mas pueden visitar mi sitio www.hacerjuegos.net
7
« en: Sábado 29 de Diciembre de 2012, 05:03 »
Hola a todos, mi nombre es William y soy un amante del desarrollo de juegos, ya llevo algo de tiempo en este campo y lo quiero compartir, por el momento estoy concentrado en juegos jquery  y hoy les quiero mostrar un buscaminas.
Tiene todo lo necesario para tener una buena jugabilidad: varios niveles, buen detalle grafico y sonido al pisar mina  , espero les guste, y mas adelante les compartire un triki multijugador y un pipemania en html5.
Cualquier critica es bienvenida, y aqui el link http://www.hacerjuegos.net/2012/12/presentacion-buscaminas.html
Páginas: [1]
|
|
|
Mostrar Mensajes
