Etiqueta: eventos teclado

Uso práctico de vectores: Pong (y un poco de sonido)

Escrito por el 10 abril, 2013 | 3 comentarios

Tengo pendientes de realizar tutoriales sobre un juego estilo shooter en 2D y otro de carreras de coches, pero ví que hacía un intensivo uso de vectores en ellos, asi que rebusqué entre los muchos experimentos que tengo hechos desde hace tiempo buscando algún minijuego con el que poder hacer una introducción al mundo de los vectores, y lo encontré: Un Pong sencillito. Y éste es el resultado:
pong

Aquí teneis un enlace para poder probarlo online, y aquí está el zip con todo el código necesario para descargarlo y jugar en local. Las palas se mueven con W y S, y los cursores.

Con éste famoso minijuego aprenderemos a usar vectores (matemáticos) orientados a los videojuegos, y su increíble utilidad para posicionar, rotar y mover entidades por el mundo, entre otras muchas funciones. Y ya que estamos, veremos cómo meter sonidos en nuestros juegos javascript usando el nuevo elemento AUDIO de HTML5. Y por si mis queridos lectores no tuvieran hermanos ni amigos con los que jugar, también incluiremos una inteligencia artificial tan estúpida que podría llegar fácilmente a presidente del gobierno.

» Leer la entrada entera

Etiquetas: , , , , , ,

Three.js Tutorial 3 – Texturas, iluminación y transparencias.

Escrito por el 5 abril, 2013 | 3 comentarios

Seguimos con el tercer tutorial de la serie para Three.js, un framework de javascript exclusivamente dedicado a facilitarnos la vida a la hora de programar nuestros mundos 2D y 3D usando la especificación WebGL que trae el novedoso HTML5. Antes de empezar con él, me gustaría que leyeras antes los tutoriales que dediqué a WebGL que puedes encontrar en este enlace.

En esencia, lo que pretendo conseguir con cada lección de Three.js, es explicar cómo programar el mismo efecto que conseguíamos en uno o varios de los capítulos de aquél tutorial de WebGL. Así se podrán comparar códigos y comprenderemos mejor la gran ayuda que supone usar este framework de WebGL. En este tutorial uniremos lo que vimos en el tutorial 6, 7 y 8 de la serie de WebGL puro, debido a que los cambios no tienen mucha chicha.
» Leer la entrada entera

Etiquetas: , , , ,

Tutorial de Tiles 2ª parte, el héroe

Escrito por el 7 mayo, 2012 | 8 comentarios

Bienvenidos al segundo capítulo de la serie. En el primer capítulo vimos los conceptos básicos para crear un mapa basado en tiles. Pero un juego sin un héroe que acabe con los malos, no es un juego ni es nada. Así que el capítulo que estamos a punto de comenzar tratará sobre cómo crear a nuestro protagonista principal, a cómo embellecerlo usando sprites animados, y a moverlo por el mapa detectando las colisiones con las paredes infranqueables. En uno de los comentarios del blog me acusaban de crear artículos demasiado largos. Pues toma dos tazas, para que sepan con quién están tratando.

Antes de empezar, como siempre, veámos el resultado que conseguiremos si seguimos éste tutorial:

Como viene siendo habitual, aquí teneis un enlace para verlo en movimiento, y aquí un zip para que lo descargues y lo pruebes en local.
» Leer la entrada entera

Etiquetas: , , , , , , , ,

Tutorial Canvas 2D – Cómo hacer un juego en javascript 3ª parte

Escrito por el 20 diciembre, 2011 | 5 comentarios

Bienvenidos a la tercera parte de mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. En la primera lección, hablábamos un poco sobre la estructura general que tienen los videojuegos, de forma muy sencilla, de cómo ibamos a diseñar nuestro juego, un par de consejos sobre cómo depurar, y finalmente, la parte más importante, enseñé una forma de adaptar la programación orientada a objetos a javascript. En la segunda parte vimos cómo crear las entidades que necesita el juego mediante herencia de los atributos y métodos en común, hablemos un poco sobre cómo simular el blucle principal del juego y por último, vimos cómo empezar a dibujar el juego en la pantalla. Es hora de hacer que los aliens y el jugador se muevan un poco.

Aquí puedes probar lo que vamos a hacer en este tutorial. Y aquí tienes un ZIP con todos los archivos necesarios.
» Leer la entrada entera

Etiquetas: , , , , , , , ,

Gestionado con Wordpress y Stripes Theme Entradas (RSS) | Comentarios (RSS)