Pablo M. Francisco Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Creacion de Juego con HTML5 y JavaScript



En esta nueva serie de tutoriales y videos, veremos los aspectos generales para la creacion de un game con HTML5, JavaScript y jQuery.

Bienvenidos a otro tutorial de HTML5!Hoy iniciaremos la creación de un simple videojuego (bastante simple :)), utilizando apenas HTML5 y Javascript.

hablaremos de algunos aspectos basicos de programacion con JavaScript, dando por hecho que ya tenés un poco de noción sobre este lenguage. Seguramente JavaScript es el lenguage de script o programacion más conocido que existe, pero no es el único, pero debe ser uno de los más utilizados en la programación web.

El juego en mas detalle se podrá ver en mis videotutoriales que el día de hoy mismo subiré a mi canal de youtube.

Bien!

Primeramente tenemos que crear nuestra pagina web que contendrá nuestro juego.

Esta página será muy simples y contendrá un solo elemento HTML5 que es el

<canvas></canvas>,etiqueta HTML5 que nos permite insertar dibujos, imagenes, animaciones y muchas mas cosas.

Aqui el maquetado inicial de la página web:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="description" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Juego HTML5 y Javascript</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<link rel="stylesheet" href="css/estilos.css">

<script type="text/javascript">

</script>

</head>

<body>

<div>

<!--Todo el juego o animacion pasará dentro del canvas-->

<canvas id="canvas" width="450" height="450">Tu navegador no soporta Canvas! actualizalo!</canvas>

</div>

</body>

</html>

Como se puede ver en el codigo HTML es muy simple:Tenemos en el cuerpo <body></body> apenas la etiqueta CANVAS con un texto inicial por si el navegador de nuestra web sea demasiado viejo y no lo soporte.

Lo mas importante aqui será lo que programaremos con javascript dentro del <head></head> de nuestra pagina. también usaremos un poco de jQuery, y para eso llamaremos la libreria para poder utilizarla:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

Además de eso tenemos nuestro proprio <script></script> que lo vamos a iniciar.

Primeramente queremos que nuestro script (juego) se inicie despues que nuestro documento HTML sea cargado completamente por el navegador, para eso utilizaremos un poco de jQuery:

En esta primera parte del tutorial creamos nuestro fondo (canvas) y dos pequeños jugadores (cuadrados sin nada de especial). Es el inicio de la configuracion de nuestro juego. En el video puede ver como lo voy haciendo y explicando, creo que se entiende bien:

Despues que nuestra pagina es totalmente cargada por el navegador, creamos la variable canvas la cual podremos manipular libremente con la instruccion [0]. Despues creamos nuestro contexto (ctx) que nos dice que el juego será en 2D.

Las variables cWidth y cHeight nos dicen las dimenciones (ancho y largo) de nuestro canvas que fue definido en HTML (definidos en 450 y 450 px).

con esto tenemos el control de donde están nuestros jugadores durante el juego.

Creamos la function setBackground que nos permite manipular los estilos de nuestro canvas sin necesidad de CSS.

Creamos la function setPlayer en la cual creamos dos cuadros simples por ahora, mas adelante los vamos a modificar para que no quede tan feo nuestro juego :).

tambien creamos un loop para nuestro juego se actualize a cada tanto (esto lo utilizaremos mas adelante para el Scrore y demas funciones.

La function game es para llamar las demas function del juego (nada del otro mundo) apenas par controlar todo en una sola funcion.

Bien, por ahora es todo, hoy mismo subiré el video con mas detalles y explicaciones sobre el juego. Subscribanse a mi canal para seguir los tutoriales.

Aqui les dejo el codigo! :)

Nos vemos!

Iniciamos nuestro script:

<script type="text/javascript">

 $(document).ready( function(){

var canvas = $("#canvas")[0];

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

var cWidth = $("#canvas").width();

var cHeight = $("#canvas").height();

var open = true;

//FONDO DEL CANVAS o AREA DE JUEGO

function setBackground(){

ctx.save();

ctx.fillStyle = "lightblue";

ctx.fillRect(0,0,cWidth,cHeight);

ctx.strokeStyle = "#000";

ctx.lineWidth = 5;

ctx.strokeRect(0,0,cWidth,cHeight);

ctx.restore();

}

//JUGADORES

function setPlayer(color, x, y, width, height){

ctx.save();

ctx.fillStyle =color;

ctx.fillRect(x,y, width, height);

ctx.restore();

}

//

if(typeof game_loop !="undefined"){

clearInterval(game_loop);

}

//intervalo del juego

game_loop = setInterval(game,800);

function game(){

setBackground();

setPlayer("red",20,120, 20, 20);

setPlayer("blue",420,420, 20, 20);

}

setBackground();

setPlayer("red",20,120, 20, 20);

setPlayer("blue",420,420, 20, 20);

//ARCOS Y CIRCULOS 

function degreesToradian(dreg){

//GRADOS A RADIANES

return(dreg * Math.PI)/180;

}

})

Para saber más: Mi canal de Yotutube

DBK uruguay

Fuente: este post proviene de Pablo M. Francisco, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

¿Seguro que estamos seguros?

Todos los pagos y compras online, todos los "Me gusta", comentarios, mensajes, twits, chats, todas las gestiones que hacemos por internet dejan un rastro que contiene nuestros datos personal ...

Mobile marketing trends 2015

This my first post in english. Please try to understand any mystakes :). Today 80% of consumers are concerned about mobile marketing. Thousands of mobile phone users world wide were surveied on their ...

Recomendamos

Relacionado

general

Creacion de Juego con HTML5 y JavaScript parte II

En esta segunda parte del tutorial para crear un Juego con HTML5 Y javascript, daremos movimiento a nuestros "actores". Bienvenidos a otro tutorial de HTML5! Hoy daremos secuencia a esta serie de tutoriales de programacion de videojuegos con HTML5 CSS3 y Javascript. Como ya vimos en el tutorial anterior el armado de nuestro canvas y los jugadores que son apenas dos rectangulos uno rojo ...

general

Creacion de un Game con HTML5 Javascript Utilizando el framework Phaser

En este tutorial iniciaremos un nuevo juego utilizando el Framework "Phaser", usando HTML y CSS3. Phaser es un framewprk/engine muy completo y facil de usar. Hola amigos, como ven en el video, el juego es muy simple de jugar, apenas tenes que comer las frutas para mantenerte en vuelo y cuidar para que las estrellas negras no te toquen o mueres. Si tienen un smartphone Android puden desc ...

general videos

Tutorial HTML5 y CSS3

Video tutorial de maquetación HTML5 y CSS3 parte 1. Comenzamos una nueva serie en el Blog, después de pedidos iniciamos con los video tutoriales. Aqui el primero: Maquetación en HTML5, CSS3 y Jquery. En esta nueva serie de videotutoriales crearemos un Website completo en HTML5, CSS3, JQuery, Javascript. En este video hablamos sobre las etiquetas semánticas de HTML5 y como darles estilos con CSS3. ...

general curso html5 ...

Curso de HTML5 y CSS3 para web móvil

Estás interesado en aprender a desarrollar webs móviles en HTML5 CSS3, Javascript, Jquery mobile y Frameworks? Hola, estoy preparando un curso por email y skype de desarrollo de webs moviles con HTML5.Que les parece la idea? Interesados, participarán por 5 cursos totalmente gratuitos. Curso por mail, resolución de dudas por skype (uno a uno) clases semanales. Sorteo día 30/04/2015. Início: 02/05/2 ...

general desarrollo web html5 ...

Día #10 Hablemos de los Videos en HTML5

En este tutorial o artículo, vamos a ver de pronto no todo acerca los videos en HTML5 pero si lo más relevante e importante de esta nueva etiqueta Video. HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso, una de estas mejores es la de poder incluir directamente video y audio en el código, para depende ...

general desarrollo web html5 ...

Dia #3 – Estructura básica de html5

Estructura básica Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las nuevas API, y sus 30 nuevos elementos con la nueva semántica que se puede utilizar en tradicionales páginas estáticas, también en las franja de controles de formularios. Vamos a tocar un poco el tema de lo básico como veníamos tratando hasta ahora, Vamos a ver un poco la estructura básica y algunas mejo ...

propuestas

Qué es AMPHTML

Al navegar por Internet con nuestro móvil, muchas veces nos encontramos con pequeños bloqueos, interrupciones en el dibujado de la página porque se están cargando anuncios, o imágenes... en diversas ocasiones percibimos la navegación como algo poco fluido o inmediato. La iniciativa de código abierto AMP (Accelerated Mobile Pages) viene a crear un nuevo "ecosistema" de programación que pe ...

general desarrollo web html5 ...

Día #9 Formularios en HTML5. Nuevos elementos y Nuevos atributos.

Uno de los problemas que teníamos con la versión anterior de HTML es decir la 4, era la validación ya que teníamos que utilizar otra tecnología para su validación, por supuesto con Javascript dábamos el toque que necesitábamos para dar lo que le faltaba a estos formularios. En HTML5 esto se ha solucionado ya que se hicieron unas grandes mejoras para su propia validación y otras para su fácil manej ...

HTML

Arrancar con HTML5: Curso de programación – Emmanuel Herrera Ríos

Este libro se pensó con la idea de apoyar a todos los lectores de habla hispana interesados en conocer las posibilidades que ofrece la nueva especificación de HTML, popularmente conocida como HTML5. Los capítulos de este libro abordan los conceptos más básicos del leguaje, acompañado con ejemplos a cada concepto explicado a lo largo del mismo. Éste no es un manual o guía para migrar aplicaciones d ...

general desarrollo web html5 ...

Herramientas para desarrollar en HTML5

Es una realidad que, a la fecha, no todos los navegadores soportan todas las características del estándar -aunque hay que reconocer que se esfuerzan mucho para mejorar la compatibilidad con cada versión- sin embargo, desarrollar hoy día en HTML5 trae muchos beneficios, sobre todo de cara al futuro. Hoy en día hay muchas herramientas disponibles para ayudar y facilitar en el desarrollo web en HTML5 ...