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í.
Creado: