19. El Tablero de Juego

 19 - Curso de Programación de Juegos HTML5 con JavaScript

📽 Miniatura de la clase
⏳ *13:02 / 18:17*

¡Hola devs! 👋 Bienvenidos a la sesión #19 del curso. Hoy profundizamos en:

🔹 Arrays Bidimensionales (Tablas)

¿Recuerdan las listas (arrays) de una dimensión? Ahora escalamos a 2D:

javascript
let matriz = [
  [0, 1, 2, 3],
  [4, 5, 6, 7],
  [8, 9, 0, 1]
];

📌 ¿Cómo acceder? matriz[fila][columna]. Ejemplo: matriz[1][2] → 6.

🌍 Aplicación en Juegos

Creamos un tablero 5x5 para un escenario:

  • 0 = Césped (🟩)

  • 1 = Agua (🟦)

  • 2 = Tierra (🟫)

javascript
function dibujaEscenario() {
  for (let y = 0; y < 5; y++) {
    for (let x = 0; x < 5; x++) {
      let color = escenario[y][x] === 0 ? "#4CAF50" : 
                  escenario[y][x] === 1 ? "#2196F3" : "#795548";
      ctx.fillStyle = color;
      ctx.fillRect(x * 50, y * 50, 50, 50);
    }
  }
}

✅ Resultado: Un mapa con ríos, caminos y zonas verdes. ¡Perfecto para RPGs!

🔜 En la próxima clase: ¡Movimiento del personaje en el tablero! 🎮

¿Te gustó? ¡Comenta qué juego te gustaría crear con esto! 

Comentarios

Publicar un comentario

Entradas más populares de este blog

codigo

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Protagonista y Disparos con Barra de Vida </ title > </ head > < body onload = " inicializa()" >     < canvas id = "canvas" width = "500" height = "300" style = " border:2px solid #000" ></ canvas > < script > let canvas, ctx; let FPS = 50 ; let vida = 100 ; // Imagen del protagonista let imgMega = new Image(); imgMega.src = 'img/mega.jpeg' ; // Inicialización function inicializa() {     canvas = document.getElementById( "canvas" );     ctx = canvas.getContext( "2d" );     setInterval(principal, 1000 / FPS); } // Clase Protagonista class Protagonista {     constructor (x, y) {         this .x = x;       ...
Leer más

5. 04.funciones parte1

  Post: Funciones en JavaScript - Parte 1 https://image.png Duración:  8:17 / 8:34 Introducción a las funciones en JavaScript Hola, ¿qué tal? Vamos a ver ahora el tema de las funciones en JavaScript, un concepto fundamental para desarrollar nuestros videojuegos. Variables iniciales javascript var vida = 100 ; var ataque = 10 ; var pocion = 20 ; Creando nuestra primera función La sintaxis básica de una función comienza con la palabra reservada  function , seguida del nombre de la función: javascript function muestraVida ( ) { console . log ( vida ) ; } Esta función tiene la tarea de mostrar nuestra vida actual en la consola. Para llamarla, simplemente usamos su nombre: javascript muestraVida ( ) ; Integrando funciones con HTML Podemos conectar esta función a un botón en HTML: html < button onClick = " muestraVida ( ) " > Mostrar Vida </ button > Cada vez que hagamos clic en este botón, se ejecutará la función y veremos nuestro nivel de vida (10...
Leer más