Tres proyectos en desarrollo desde Git en HTML5 y JavaScript.
Código fuente.
Tetris
https://github.com/Herko8a/Tetris
Memoria
https://github.com/Herko8a/SimpleMemoryGame
Domino
https://github.com/Herko8a/Domon
domingo, 17 de julio de 2016
sábado, 6 de junio de 2015
Clase 2: Cargar una imagen de fondo
Desarrollo de Tetris en HTML5 (Canvas) y JavaScript
Como se puede ver en la siguiente imagen del lado izquierdo tenemos nuestro JS y del lado derecho el HTML5 de la clase anterior.
En la linea 4 y 5 del JS obtenemos en canvas del archivo HTML y creamos el contexto que nos servirá para dibujar en el lienzo nuestro fondo del videojuego.
Tenemos en seguida 3 funciones
- CargarContenido: Se encarga de crear un nuevo objeto de tipo imagen y sobre el lee la imagen de fondo. Después creamos la llamada a la función frameLoop con el reloj de la computadora cada 100 milisegundos
- La función dibujaFondo: Utiliza el contexto del canvas y dibuja la imagen de fondo en el canvas en la posición x,y (0,0).
- La función frameLoop: que como anteriormente dijimos se ejecuta cada 100 milisegundos invoca el dibujado del fondo.
Como podemos observar en la imagen en el explorador de Chrome se dibuja el fondo de nuestro juego de Tetris.
Clase 1: Creación de HTML5 y liga a código JavaScript
Desarrollo de Tetris en HTML5 (Canvas) y JavaScript
Pues nada, que con el objetivo de aprender acerca del desarrollo de videojuegos en HTML5 (Canvas) y Java Script vamos a iniciar paso a paso el desarrollo de nuestro ya conocido Tetris en HTML5.
Lo primero que haremos es escribir nuestro HTML5 siguiente y guardarlo como index.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Hercoka Games - Tetris</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="game" width='200' height='400'>Tu navegador no soporta canvas<canvas>
<script src='main.js'></script>
</body>
</html>
Como podemos ver creamos el objeto canvas con las propiedades de ancho y alto, así como un mensaje que indica que tu navegador no soporta canvas en caso de que no este actualizado. En la actualidad la mayoría de los exploradores en sus ultimas versiones soportan esta etiqueta de HTML5.
Después del canvas tenemos la llamada al archivo de nuestro javascript llamado main.js el cual se deberá guardar en la misma ruta que nuestro HTML.
A lo largo del curso se utilizara el siguiente software recomendado:
- Editor HTML y JS: http://www.sublimetext.com/3
- Explorador Web: https://www.google.es/chrome/
sábado, 20 de octubre de 2012
viernes, 6 de abril de 2012
Tetris en Visual Basic Capitulo 1
Desarrollo del videojuego de tetris en Visual Basic 2010, primer capitulo
sábado, 24 de marzo de 2012
Desarrollo de Tetris en C# XNA 4.0 Cap 1
Descripción:
- Descarga de software (requisitos previos)
- Crear un nuevo proyecto en Visual Studio XNA 4.0
Suscribirse a:
Entradas (Atom)