Juego web

├── README.md └── juego-web ├── app └── cargadorArchivosJS.inc.php ├── audio └── 393818_sirkoto51_retro-game-overworld-loop-1.mp3 ├── img ├── blowharder.png ├── mapa.png ├── mapa48.mapa.png ├── mapa48.png ├── personajes.png ├── personajes48.png ├── titulo.png ├── vehiculos.png ├── vilenes.png ├── villa.png ├── villa48.nivel.png └── villa48.png ├── index.php ├── js ├── CapaMapaTiles.js ├── EstadoMapamundi.js ├── EstadoPantallaTitulo.js ├── JugadorMapamundi.js ├── Localizacion.js ├── Mapa.js ├── PaletaSprites.js ├── Punto.js ├── Rectangulo.js ├── RegistroLocalizacionEntrada.js ├── Sprite.js ├── Tile.js ├── ajax.js ├── audio.js ├── buclePrincipal.js ├── controles.js ├── controlesTeclado.js ├── debug.js ├── dimensiones.js ├── inicio.js ├── listadoEstados.js ├── mando.js ├── maquinaEstados.js ├── popup.js ├── registroLocalizaciones.js └── teclado.js ├── mapas ├── desierto.json ├── desierto.tmx ├── desierto48.json └── desierto48.tmx └── niveles ├── niveles.json ├── villa48.json └── villa48.tmx /README.md: -------------------------------------------------------------------------------- 1 | # juego-web 2 | 3 | Juego web desarrollado en el canal de YouTube: https://www.youtube.com/c/javadevone 4 | 5 | Lista de reproducción con todos los vídeos hasta el momento: https://www.youtube.com/playlist?list=PLN9W6BC54TJLlH57qvG2aN9F99xaAk6Df 6 | 7 | ¡Bienvenido a esta serie de vídeos donde aprenderás a desarrollar un juego web desde cero! Para lograrlo, usaremos tecnologías como HTML5, CSS3, Javascript, PHP y MariaDB. 8 | 9 | A medida que vayan avanzando los episodios, el código fuente se compartirá con todos para poder estudiarlo, compararlo o mejorarlo. En definitiva, ¡el código fuente está ahí para que juegues y hagas pruebas con él! 10 | 11 | Para más dudas o consultas: 12 | - Mi web: http://javadevone.com 13 | - Patreon: https://www.patreon.com/javadevone 14 | - Facebook: https://www.facebook.com/java.devone/ 15 | - Twitter: https://twitter.com/javadevone 16 | - Instagram: https://www.instagram.com/javadev1/ 17 | - Twitch: https://www.twitch.tv/javadevone 18 | -------------------------------------------------------------------------------- /juego-web/app/cargadorArchivosJS.inc.php: -------------------------------------------------------------------------------- 1 | getTimestamp() . '">'; 35 | echo nl2br("\n"); 36 | } -------------------------------------------------------------------------------- /juego-web/audio/393818_sirkoto51_retro-game-overworld-loop-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/audio/393818_sirkoto51_retro-game-overworld-loop-1.mp3 -------------------------------------------------------------------------------- /juego-web/img/blowharder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/blowharder.png -------------------------------------------------------------------------------- /juego-web/img/mapa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/mapa.png -------------------------------------------------------------------------------- /juego-web/img/mapa48.mapa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/mapa48.mapa.png -------------------------------------------------------------------------------- /juego-web/img/mapa48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/mapa48.png -------------------------------------------------------------------------------- /juego-web/img/personajes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/personajes.png -------------------------------------------------------------------------------- /juego-web/img/personajes48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/personajes48.png -------------------------------------------------------------------------------- /juego-web/img/titulo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/titulo.png -------------------------------------------------------------------------------- /juego-web/img/vehiculos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/vehiculos.png -------------------------------------------------------------------------------- /juego-web/img/vilenes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/vilenes.png -------------------------------------------------------------------------------- /juego-web/img/villa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/villa.png -------------------------------------------------------------------------------- /juego-web/img/villa48.nivel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/villa48.nivel.png -------------------------------------------------------------------------------- /juego-web/img/villa48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javadevone/juego-web/5f55be6facdd4a65fafff8c6ece4ac20f310f97b/juego-web/img/villa48.png -------------------------------------------------------------------------------- /juego-web/index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Juego web 7 | 8 | 9 | 10 | 11 |

12 |

13 |

14 | 15 |

16 |

17 | 18 |

19 |

20 | 21 |

22 |

23 | 24 |

25 |

26 | 27 | 29 |

30 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /juego-web/js/CapaMapaTiles.js: -------------------------------------------------------------------------------- 1 | function CapaMapaTiles(datosCapa, indiceZ, anchoDeLosTiles, altoDeLosTiles, paletasSprites) { 2 | this.anchoEnTiles = parseInt(datosCapa.width); 3 | this.altoEnTiles = parseInt(datosCapa.height); 4 | this.x = parseInt(datosCapa.x); 5 | this.y = parseInt(datosCapa.y); 6 | this.z = indiceZ; 7 | this.tiles = []; 8 | 9 | for (y = 0; y < this.altoEnTiles; y++) { 10 | for (x = 0; x < this.anchoEnTiles; x++) { 11 | var idSpriteActualSobreUno = datosCapa.data[x + y * this.anchoEnTiles]; 12 | if (idSpriteActualSobreUno == 0) { 13 | this.tiles.push(null); 14 | } else { 15 | var spriteActual = this.encontrarSpriteEnPaletaPorId(idSpriteActualSobreUno - 1, paletasSprites); 16 | 17 | this.tiles.push(new Tile(x, y, indiceZ, anchoDeLosTiles, altoDeLosTiles, spriteActual)); 18 | } 19 | } 20 | } 21 | } 22 | 23 | CapaMapaTiles.prototype.encontrarSpriteEnPaletaPorId = function(idSpriteSobreZero, paletasSprites) { 24 | for (s = 0; s < paletasSprites.length; s++) { 25 | if (idSpriteSobreZero >= paletasSprites[s].primerSpriteSobreUno - 1 && 26 | idSpriteSobreZero < paletasSprites[s].totalSprites + paletasSprites[s].primerSpriteSobreUno + 1) { 27 | return paletasSprites[s].sprites[Math.abs(paletasSprites[s].primerSpriteSobreUno - 1 - idSpriteSobreZero)]; 28 | } 29 | } 30 | throw "El ID sobre ZERO " + idSpriteSobreZero + " del sprite no existe en ninguna paleta"; 31 | } -------------------------------------------------------------------------------- /juego-web/js/EstadoMapamundi.js: -------------------------------------------------------------------------------- 1 | function EstadoMapamundi(idEstado, rutaMapaJSON, xInicial, yInicial) { 2 | var that = this; 3 | this.mapaListo = false; 4 | this.mapa = null; 5 | this.jugadorMapamundi = null; 6 | ajax.cargarArchivo(rutaMapaJSON, function(objetoJSON) { 7 | that.mapa = new Mapa(objetoJSON, idEstado); 8 | that.mapaListo = true; 9 | that.jugadorMapamundi = new JugadorMapamundi(new Punto(xInicial, yInicial), idEstado); 10 | console.log("mapa cargado por AJAX"); 11 | }); 12 | } 13 | 14 | EstadoMapamundi.prototype.actualizar = function(registroTemporal) { 15 | if (!this.mapaListo || this.mapa == null || this.jugadorMapamundi == null) { 16 | return; 17 | } 18 | 19 | this.jugadorMapamundi.actualizar(registroTemporal, this.mapa); 20 | this.mapa.actualizar(registroTemporal, this.jugadorMapamundi.posicionEnMapaEnPixeles); 21 | 22 | let localizacionAtravesada = false; 23 | 24 | for(var i = 0; i < this.mapa.rectangulosLocalizaciones.length; i++) { 25 | let rActual = this.mapa.rectangulosLocalizaciones[i].rectangulo; 26 | let nombre = this.mapa.rectangulosLocalizaciones[i].nombre; 27 | let rTemporal = new Rectangulo(rActual.x + this.mapa.posicion.x, 28 | rActual.y + this.mapa.posicion.y, rActual.ancho, rActual.alto); 29 | let objetoEntradaLocalizacion = null; 30 | if(rTemporal.cruza(this.jugadorMapamundi.rectanguloGeneral)) { 31 | localizacionAtravesada = true; 32 | objetoEntradaLocalizacion = registroLocalizaciones.obtenerLocalizacion(nombre); 33 | if(!popup.visible) { 34 | popup.mostrar(dimensiones.ancho / 2 - 150, dimensiones.alto / 2 - 100, 35 | 300, nombre); 36 | } 37 | if(teclado.teclaPulsada(controlesTeclado.entrarLocalizacion)) { 38 | maquinaEstados.cambiarEstado(listadoEstados.NIVEL, objetoEntradaLocalizacion); 39 | console.log(objetoEntradaLocalizacion); 40 | } 41 | } 42 | 43 | if(!localizacionAtravesada && popup.visible) { 44 | popup.ocultar(); 45 | } 46 | } 47 | } 48 | 49 | EstadoMapamundi.prototype.dibujar = function() { 50 | if (!this.mapaListo) { 51 | return; 52 | } 53 | this.mapa.dibujar(); 54 | } -------------------------------------------------------------------------------- /juego-web/js/EstadoPantallaTitulo.js: -------------------------------------------------------------------------------- 1 | function EstadoPantallaTitulo() { 2 | this.rutaImagenTitulo = "img/titulo.png"; 3 | this.idHTML = "pantalla-titulo"; 4 | this.anchoImagen = "500"; 5 | this.altoImagen = "300"; 6 | 7 | this.movimientoY = 0; 8 | 9 | this.framesAnimacion = 0; 10 | 11 | document.getElementById(this.idHTML).style.position = "absolute"; 12 | document.getElementById(this.idHTML).style.width = this.anchoImagen + "px"; 13 | document.getElementById(this.idHTML).style.height = this.altoImagen + "px"; 14 | document.getElementById(this.idHTML).style.background = "url('" + this.rutaImagenTitulo + "')"; 15 | document.getElementById(this.idHTML).style.backgroundClip = "border-box"; 16 | document.getElementById(this.idHTML).style.outline = "1px solid transparent"; 17 | document.getElementById(this.idHTML).style.transform = 'translate3d(' + (dimensiones.ancho / 2 - this.anchoImagen / 2) + 'px, ' + (dimensiones.alto / 2 - this.altoImagen / 2) + 'px, 0'; 18 | 19 | document.getElementsByTagName("body")[0].style.overflow = "hidden"; 20 | document.getElementsByTagName("body")[0].style.backgroundColor = "black"; 21 | 22 | audio.reproducir(audio.pista1); 23 | 24 | document.getElementsByTagName("body")[0].onclick = function() { 25 | document.getElementById("pantalla-titulo").style.display = "none"; 26 | 27 | document.getElementsByTagName("body")[0].onclick = ""; 28 | 29 | maquinaEstados.cambiarEstado(listadoEstados.MAPAMUNDI); 30 | } 31 | } 32 | 33 | EstadoPantallaTitulo.prototype.actualizar = function(registroTemporal) { 34 | if(this.framesAnimacion < 30) { 35 | this.movimientoY++; 36 | } 37 | if(this.framesAnimacion >= 30 && this.framesAnimacion < 90) { 38 | this.movimientoY--; 39 | } 40 | if(this.framesAnimacion >= 90 && this.framesAnimacion < 120) { 41 | this.movimientoY++; 42 | } 43 | 44 | this.framesAnimacion++; 45 | 46 | if(this.framesAnimacion >=120) { 47 | this.framesAnimacion = 0; 48 | this.movimientoY = 0; 49 | } 50 | } 51 | 52 | EstadoPantallaTitulo.prototype.dibujar = function() { 53 | document.getElementById(this.idHTML).style.transform = 'translate3d(' + (dimensiones.ancho / 2 - this.anchoImagen / 2) + 'px, ' + (dimensiones.alto / 2 - this.altoImagen / 2 + this.movimientoY) + 'px, 0)'; 54 | } -------------------------------------------------------------------------------- /juego-web/js/JugadorMapamundi.js: -------------------------------------------------------------------------------- 1 | function JugadorMapamundi(posicionInicialEnPixeles, estadoJuego) { 2 | this.estadoJuego = estadoJuego; 3 | 4 | this.ancho = 48; 5 | this.alto = 48; 6 | 7 | this.rutaHojaSprites = "img/personajes48.png"; 8 | this.personaje = 5; //elegir personaje 9 | 10 | this.origenXSprite = 0; 11 | this.origenYSprite = this.alto * this.personaje; 12 | 13 | this.velocidadMovimiento = 3; 14 | 15 | this.velocidadX = 0; 16 | this.velocidadY = 0; 17 | 18 | this.subiendo = false; 19 | this.saltoBloqueado = false; 20 | this.saltoYInicial = 0; 21 | this.framesAereosMaximos = 12; 22 | this.framesAereos = this.framesAereosMaximos; 23 | 24 | this.velocidadTerminal = 10; 25 | this.velocidadCaida = 0; 26 | 27 | //modo escalera 28 | 29 | this.enMovimiento = false; 30 | this.framesAnimacion = 0; 31 | 32 | //eliminar decimales y centrar al jugador 33 | var centroX = Math.trunc(dimensiones.ancho / 2 - this.ancho / 2); 34 | var centroY = Math.trunc(dimensiones.alto / 2 - this.alto / 2); 35 | this.posicionCentrada = new Punto(centroX, centroY); 36 | this.rectanguloGeneral = new Rectangulo(centroX, centroY, this.ancho, this.alto); 37 | 38 | this.limiteArriba = new Rectangulo(centroX + this.ancho / 3, centroY, this.ancho / 3, 1); 39 | this.limiteAbajo = new Rectangulo(centroX + this.ancho / 3, centroY + this.alto - 1, this.ancho / 3, 1); 40 | this.limiteIzquierda = new Rectangulo(centroX, centroY + this.alto / 3, 1, this.alto / 3); 41 | this.limiteDerecha = new Rectangulo(centroX + this.ancho - 1, centroY + this.alto / 3, 1, this.alto / 3); 42 | 43 | this.colisionArriba = false; 44 | this.colisionAbajo = false; 45 | this.colisionIzquierda = false; 46 | this.colisionDerecha = false; 47 | 48 | //convertir positivos en negativos y viceversa 49 | posicionInicialEnPixeles.x *= -1; 50 | posicionInicialEnPixeles.y *= -1; 51 | 52 | this.posicionEnMapaEnPixeles = new Punto(this.posicionCentrada.x + posicionInicialEnPixeles.x, 53 | this.posicionCentrada.y + posicionInicialEnPixeles.y); 54 | 55 | this.aplicarEstilos(); 56 | } 57 | 58 | JugadorMapamundi.prototype.aplicarEstilos = function() { 59 | var idHTML = "jugador"; 60 | //document.getElementById(idHTML).style.backgroundColor = "white"; 61 | document.getElementById(idHTML).style.position = "absolute"; 62 | document.getElementById(idHTML).style.left = this.posicionCentrada.x + "px"; 63 | document.getElementById(idHTML).style.top = this.posicionCentrada.y + "px"; 64 | document.getElementById(idHTML).style.width = this.ancho + "px"; 65 | document.getElementById(idHTML).style.height = this.alto + "px"; 66 | document.getElementById(idHTML).style.zIndex = "10"; 67 | document.getElementById(idHTML).style.background = "url('" + this.rutaHojaSprites + "')"; 68 | document.getElementById(idHTML).style.backgroundPosition = "-" + this.origenXSprite + "px -" + this.origenYSprite + "px"; 69 | document.getElementById(idHTML).style.backgroundClip = "border-box"; 70 | document.getElementById(idHTML).style.outline = "1px solid transparent"; 71 | } 72 | 73 | JugadorMapamundi.prototype.comprobarColisiones = function(mapa) { 74 | this.colisionArriba = false; 75 | this.colisionAbajo = false; 76 | this.colisionIzquierda = false; 77 | this.colisionDerecha = false; 78 | 79 | if (!this.limiteArriba.cruza(mapa.limiteMapa)) { 80 | this.colisionArriba = true; 81 | } 82 | if (!this.limiteAbajo.cruza(mapa.limiteMapa)) { 83 | this.colisionAbajo = true; 84 | } 85 | if (!this.limiteIzquierda.cruza(mapa.limiteMapa)) { 86 | this.colisionIzquierda = true; 87 | } 88 | if (!this.limiteDerecha.cruza(mapa.limiteMapa)) { 89 | this.colisionDerecha = true; 90 | } 91 | 92 | for (var i = 0; i < mapa.rectangulosColisiones.length; i++) { 93 | var traduccionTemporalColision = new Rectangulo( 94 | mapa.rectangulosColisiones[i].x + mapa.posicion.x, 95 | mapa.rectangulosColisiones[i].y + mapa.posicion.y, 96 | mapa.rectangulosColisiones[i].ancho, 97 | mapa.rectangulosColisiones[i].alto 98 | ); 99 | 100 | if(this.limiteArriba.cruza(traduccionTemporalColision)) { 101 | this.colisionArriba = true; 102 | } 103 | if(this.limiteAbajo.cruza(traduccionTemporalColision)) { 104 | this.colisionAbajo = true; 105 | } 106 | if(this.limiteIzquierda.cruza(traduccionTemporalColision)) { 107 | this.colisionIzquierda = true; 108 | } 109 | if(this.limiteDerecha.cruza(traduccionTemporalColision)) { 110 | this.colisionDerecha = true; 111 | } 112 | } 113 | } 114 | 115 | JugadorMapamundi.prototype.moverEnMapamundi = function() { 116 | this.velocidadX = 0; 117 | this.velocidadY = 0; 118 | 119 | if(!this.colisionArriba && teclado.teclaPulsada(controlesTeclado.arriba)) { 120 | this.velocidadY += this.velocidadMovimiento; 121 | } 122 | if(!this.colisionAbajo && teclado.teclaPulsada(controlesTeclado.abajo)) { 123 | this.velocidadY -= this.velocidadMovimiento; 124 | } 125 | if(!this.colisionIzquierda && teclado.teclaPulsada(controlesTeclado.izquierda)) { 126 | this.velocidadX += this.velocidadMovimiento; 127 | } 128 | if(!this.colisionDerecha && teclado.teclaPulsada(controlesTeclado.derecha)) { 129 | this.velocidadX -= this.velocidadMovimiento; 130 | } 131 | 132 | this.posicionEnMapaEnPixeles.x += this.velocidadX; 133 | this.posicionEnMapaEnPixeles.y += this.velocidadY; 134 | } 135 | 136 | JugadorMapamundi.prototype.moverEnNivel = function() { 137 | this.velocidadX = 0; 138 | this.velocidadY = 0; 139 | 140 | if(this.saltoBloqueado && this.colisionAbajo && !teclado.teclaPulsada(controlesTeclado.saltar)) { 141 | this.saltoBloqueado = false; 142 | this.velocidadCaida = 0; 143 | console.log(); 144 | } 145 | 146 | if(!this.saltoBloqueado && teclado.teclaPulsada(controlesTeclado.saltar)) { 147 | this.subiendo = true; 148 | this.saltoBloqueado = true; 149 | } 150 | 151 | if (!this.colisionArriba && this.subiendo) { 152 | this.framesAereos--; 153 | this.velocidadY = 1 * this.velocidadMovimiento + this.framesAereos; 154 | 155 | if(this.framesAereos <= 0) { 156 | this.subiendo = false; 157 | this.framesAereos = this.framesAereosMaximos; 158 | } 159 | } 160 | 161 | if (!this.colisionAbajo && !this.subiendo) { 162 | this.velocidadY = Math.round(-this.velocidadCaida); 163 | console.log(this.velocidadY); 164 | if(this.velocidadCaida < this.velocidadTerminal) { 165 | this.velocidadCaida += 0.3; 166 | } 167 | } 168 | 169 | if(!this.colisionIzquierda && teclado.teclaPulsada(controlesTeclado.izquierda)) { 170 | this.velocidadX = 1 * this.velocidadMovimiento; 171 | } 172 | 173 | if(!this.colisionDerecha && teclado.teclaPulsada(controlesTeclado.derecha)) { 174 | this.velocidadX = -1 * this.velocidadMovimiento; 175 | } 176 | 177 | this.posicionEnMapaEnPixeles.x += this.velocidadX; 178 | this.posicionEnMapaEnPixeles.y += this.velocidadY; 179 | } 180 | 181 | JugadorMapamundi.prototype.dirigir = function() { 182 | if(this.velocidadX < 0) { //izquierda 183 | this.origenXSprite = this.ancho * 3; 184 | } 185 | if(this.velocidadX > 0) { //derecha 186 | this.origenXSprite = this.ancho * 3; 187 | } 188 | if(this.velocidadY < 0) { //abajo 189 | this.origenXSprite = 0; 190 | } 191 | if(this.velocidadY > 0) { //arriba 192 | this.origenXSprite = this.ancho * 6; 193 | } 194 | 195 | if(this.velocidadX > 0) { //derecha 196 | document.getElementById("jugador").style.transform = "scaleX(-1)"; 197 | } 198 | if(this.velocidadX < 0 || this.velocidadY < 0 || this.velocidadY > 0) { //izquierda 199 | document.getElementById("jugador").style.transform = "scaleX(1)"; 200 | } 201 | 202 | document.getElementById("jugador").style.backgroundPosition = "-" + this.origenXSprite + "px -" + this.origenYSprite + "px"; 203 | } 204 | 205 | JugadorMapamundi.prototype.animar = function() { 206 | if(this.velocidadX == 0 && this.velocidadY == 0) { 207 | this.framesAnimacion = 0; 208 | return; 209 | } 210 | 211 | this.framesAnimacion++; 212 | 213 | let paso1 = 10; 214 | let paso2 = 20; 215 | let origenXSpriteTemporal = this.origenXSprite; 216 | 217 | if(this.framesAnimacion > 0 && this.framesAnimacion < paso1) { 218 | origenXSpriteTemporal += this.ancho; 219 | } 220 | if(this.framesAnimacion >= paso1 && this.framesAnimacion < paso2) { 221 | origenXSpriteTemporal += this.ancho * 2; 222 | } 223 | if(this.framesAnimacion == paso2) { 224 | this.framesAnimacion = 0; 225 | } 226 | 227 | document.getElementById("jugador").style.backgroundPosition = "-" + origenXSpriteTemporal + "px -" + this.origenYSprite + "px"; 228 | } 229 | 230 | JugadorMapamundi.prototype.actualizar = function(registroTemporal, mapa) { 231 | if(this.estadoJuego == listadoEstados.MAPAMUNDI) { 232 | this.comprobarColisiones(mapa); 233 | this.moverEnMapamundi(); 234 | this.dirigir(); 235 | this.animar(); 236 | } 237 | 238 | if(this.estadoJuego == listadoEstados.NIVEL) { 239 | this.comprobarColisiones(mapa); 240 | this.moverEnNivel(); 241 | this.dirigir(); 242 | this.animar(); 243 | } 244 | } -------------------------------------------------------------------------------- /juego-web/js/Localizacion.js: -------------------------------------------------------------------------------- 1 | function Localizacion(rectangulo, nombre) { 2 | this.rectangulo = rectangulo; 3 | this.nombre = nombre; 4 | } -------------------------------------------------------------------------------- /juego-web/js/Mapa.js: -------------------------------------------------------------------------------- 1 | function Mapa(objetoJSON, estadoJuego) { //añadir id estado 2 | this.estadoJuego = estadoJuego; 3 | this.posicion = new Punto(0,0); 4 | this.posicionActualizada = new Punto(0,0); 5 | 6 | let rutaCompletaImagenFondo = objetoJSON.tilesets[0].image; 7 | let rutaImagenFondo = rutaCompletaImagenFondo.split("/"); 8 | let nombreImagenFondo = rutaImagenFondo[rutaImagenFondo.length - 1]; 9 | let nombreMapa = nombreImagenFondo.split("."); 10 | 11 | if (this.estadoJuego == listadoEstados.MAPAMUNDI) { 12 | this.rutaImagenMapa = "img/" + nombreMapa[0] + ".mapa.png"; 13 | } 14 | if (this.estadoJuego == listadoEstados.NIVEL) { 15 | this.rutaImagenMapa = "img/" + nombreMapa[0] + ".nivel.png"; 16 | } 17 | 18 | this.anchoMedidoEnTiles = parseInt(objetoJSON.width); 19 | this.altoMedidoEnTiles = parseInt(objetoJSON.height); 20 | this.anchoDeLosTiles = parseInt(objetoJSON.tilewidth); 21 | this.altoDeLosTiles = parseInt(objetoJSON.tileheight); 22 | 23 | this.rectangulosColisiones = []; 24 | this.rectangulosLocalizaciones = []; 25 | //rectangulos escaleras 26 | 27 | this.iniciarCapas(objetoJSON.layers); 28 | 29 | this.iniciarElementosMapa(); 30 | 31 | this.limiteMapa = new Rectangulo(this.posicion.x, 32 | this.posicion.y, 33 | this.anchoMedidoEnTiles * this.anchoDeLosTiles, 34 | this.altoMedidoEnTiles * this.altoDeLosTiles, "colision"); 35 | } 36 | 37 | Mapa.prototype.iniciarCapas = function(datosCapas) { 38 | for (i = 0; i < datosCapas.length; i++) { 39 | if (datosCapas[i].name == "colisiones") { 40 | console.log("capa colisiones"); 41 | for (c = 0; c < datosCapas[i].objects.length; c++) { 42 | this.rectangulosColisiones.push(new Rectangulo( 43 | datosCapas[i].objects[c].x, datosCapas[i].objects[c].y, 44 | datosCapas[i].objects[c].width, datosCapas[i].objects[c].height, "colision" 45 | )); 46 | } 47 | } 48 | if (datosCapas[i].name == "localizaciones") { 49 | for (l = 0; l < datosCapas[i].objects.length; l++) { 50 | this.rectangulosLocalizaciones.push(new Localizacion(new Rectangulo( 51 | datosCapas[i].objects[l].x, datosCapas[i].objects[l].y, 52 | datosCapas[i].objects[l].width, datosCapas[i].objects[l].height, "localizacion" 53 | ), datosCapas[i].objects[l].name)); 54 | } 55 | } 56 | //bloque if capas de escaleras 57 | } 58 | } 59 | 60 | Mapa.prototype.iniciarElementosMapa = function() { 61 | var anchoMapaEnPixeles = this.anchoMedidoEnTiles * this.anchoDeLosTiles; 62 | var altoMapaEnPixeles = this.altoMedidoEnTiles * this.altoDeLosTiles; 63 | 64 | let idHTML = "mapa"; 65 | document.getElementById(idHTML).style.position = "absolute"; 66 | document.getElementById(idHTML).style.width = (this.anchoMedidoEnTiles * this.anchoDeLosTiles) + "px"; 67 | document.getElementById(idHTML).style.height = (this.altoMedidoEnTiles * this.altoDeLosTiles) + "px"; 68 | document.getElementById(idHTML).style.background = "url('" + this.rutaImagenMapa + "')"; 69 | document.getElementById(idHTML).style.backgroundClip = "border-box"; 70 | document.getElementById(idHTML).style.outline = "1px solid transparent"; 71 | 72 | var htmlColisiones = ""; 73 | for(c = 0; c < this.rectangulosColisiones.length; c++) { 74 | htmlColisiones += this.rectangulosColisiones[c].html; 75 | } 76 | document.getElementById("colisiones").innerHTML = htmlColisiones; 77 | 78 | var htmlLocalizaciones = ""; 79 | for(l = 0; l < this.rectangulosLocalizaciones.length; l++) { 80 | htmlLocalizaciones += this.rectangulosLocalizaciones[l].rectangulo.html; 81 | } 82 | document.getElementById("localizaciones").innerHTML = htmlLocalizaciones; 83 | 84 | //bloque de escaleras 85 | 86 | if(debug.debugging) { 87 | for (c = 0; c < this.rectangulosColisiones.length; c++) { 88 | this.rectangulosColisiones[c].aplicarEstiloTemporal("#ff0000"); 89 | } 90 | 91 | for (l = 0; l < this.rectangulosLocalizaciones.length; l++) { 92 | this.rectangulosLocalizaciones[l].rectangulo.aplicarEstiloTemporal("#00ff00"); 93 | } 94 | 95 | //bloque escaleras debugging 96 | } 97 | 98 | 99 | document.getElementsByTagName("body")[0].style.overflow = "hidden"; 100 | document.getElementsByTagName("body")[0].style.backgroundColor = "black"; 101 | } 102 | 103 | Mapa.prototype.actualizar = function(registroTemporal, posicionJugadorEnPixeles) { 104 | this.posicion.x = posicionJugadorEnPixeles.x; 105 | this.posicion.y = posicionJugadorEnPixeles.y; 106 | 107 | this.limiteMapa.x = this.posicion.x; 108 | this.limiteMapa.y = this.posicion.y; 109 | } 110 | 111 | Mapa.prototype.dibujar = function() { 112 | document.getElementById("mapa").style.transform = 'translate3d(' + this.posicion.x + 'px, ' + this.posicion.y + 'px, 0' + ')'; 113 | 114 | if(debug.debugging) { 115 | for (rc = 0; rc < this.rectangulosColisiones.length; rc++) { 116 | this.rectangulosColisiones[rc].mover(this.posicion.x, this.posicion.y); 117 | } 118 | 119 | for (rl = 0; rl < this.rectangulosLocalizaciones.length; rl++) { 120 | this.rectangulosLocalizaciones[rl].rectangulo.mover(this.posicion.x, this.posicion.y); 121 | } 122 | 123 | //bloque dibujado escaleras 124 | } 125 | } -------------------------------------------------------------------------------- /juego-web/js/PaletaSprites.js: -------------------------------------------------------------------------------- 1 | function PaletaSprites(datosSprites) { 2 | this.rutaImagen = datosSprites.image; 3 | 4 | this.anchoImagen = parseInt(datosSprites.imagewidth); 5 | this.altoImagen = parseInt(datosSprites.imageheight); 6 | 7 | this.anchoSprites = parseInt(datosSprites.tilewidth); 8 | this.altoSprites = parseInt(datosSprites.tileheight); 9 | 10 | this.primerSpriteSobreUno = parseInt(datosSprites.firstgid); 11 | 12 | this.anchoImagenMedidoEnSprites = this.anchoImagen / this.anchoSprites; 13 | this.altoImagenMedidoEnSprites = this.altoImagen / this.altoSprites; 14 | this.totalSprites = this.anchoImagenMedidoEnSprites * this.altoImagenMedidoEnSprites; 15 | 16 | this.sprites = []; 17 | 18 | for (s = 0; s < this.totalSprites; s++) { 19 | var idActualSobreZero = this.primerSpriteSobreUno - 1 + s; 20 | this.sprites.push(new Sprite(this.rutaImagen, idActualSobreZero, 21 | this.obtenerPosicionDesdeIdSprite(idActualSobreZero))); 22 | } 23 | } 24 | 25 | PaletaSprites.prototype.obtenerPosicionDesdeIdSprite = function(idSpriteSobreZero) { 26 | var y = Math.floor(idSpriteSobreZero / this.anchoImagenMedidoEnSprites); 27 | var x = idSpriteSobreZero % this.anchoImagenMedidoEnSprites; 28 | 29 | return new Punto(x * this.anchoSprites, y * this.altoSprites); 30 | } -------------------------------------------------------------------------------- /juego-web/js/Punto.js: -------------------------------------------------------------------------------- 1 | function Punto(x, y) { 2 | this.x = x; 3 | this.y = y; 4 | } 5 | 6 | Punto.prototype.coincide = function(punto) { 7 | return (this.x == punto.x && this.y == punto.y) ? true : false; 8 | } -------------------------------------------------------------------------------- /juego-web/js/Rectangulo.js: -------------------------------------------------------------------------------- 1 | function Rectangulo(x, y, ancho, alto, tipo) { 2 | this.x = x; 3 | this.y = y; 4 | this.ancho = ancho; 5 | this.alto = alto; 6 | this.idHTML = tipo + "x" + x + "y" + y; 7 | this.html = '

'; 8 | } 9 | 10 | Rectangulo.prototype.cruza = function(rectangulo) { 11 | return (this.x < rectangulo.x + rectangulo.ancho && 12 | this.x + this.ancho > rectangulo.x && 13 | this.y < rectangulo.y + rectangulo.alto && 14 | this.alto + this.y > rectangulo.y) ? true : false; 15 | } 16 | 17 | Rectangulo.prototype.aplicarEstiloTemporal = function(colorHexadecimal) { 18 | if (!document.getElementById(this.idHTML)) { 19 | throw("El ID " + this.idHTML + " no existe en la hoja"); 20 | } 21 | 22 | //var color = "#ff0000"; 23 | document.getElementById(this.idHTML).style.backgroundColor = colorHexadecimal; 24 | 25 | document.getElementById(this.idHTML).style.position = "absolute"; 26 | document.getElementById(this.idHTML).style.left = this.x + "px"; 27 | document.getElementById(this.idHTML).style.top = this.y + "px"; 28 | document.getElementById(this.idHTML).style.width = this.ancho + "px"; 29 | document.getElementById(this.idHTML).style.height = this.alto + "px"; 30 | document.getElementById(this.idHTML).style.zIndex = "5"; 31 | } 32 | 33 | Rectangulo.prototype.mover = function(x, y) { 34 | document.getElementById(this.idHTML).style.transform = 'translate3d(' + x + 'px,' + y + 'px, 0)'; 35 | } 36 | -------------------------------------------------------------------------------- /juego-web/js/RegistroLocalizacionEntrada.js: -------------------------------------------------------------------------------- 1 | function RegistroLocalizacionEntrada(nombre, rutaMapa, rutaImagen, coordenadaXInicial, coordenadaYInicial) { 2 | this.nombre = nombre; 3 | this.rutaMapa = rutaMapa; 4 | this.rutaImagen = rutaImagen; 5 | this.coordenadaXInicial = coordenadaXInicial; 6 | this.coordenadaYInicial = coordenadaYInicial; 7 | } -------------------------------------------------------------------------------- /juego-web/js/Sprite.js: -------------------------------------------------------------------------------- 1 | function Sprite(ruta, idSobreZero, posicionEnHoja) { 2 | var elementosRuta = ruta.split("/"); 3 | this.rutaHojaOrigen = "img/" + elementosRuta[elementosRuta.length - 1]; 4 | this.idSobreZero = idSobreZero; 5 | this.idSobreUno = idSobreZero + 1; 6 | this.posicionEnHoja = posicionEnHoja; 7 | } -------------------------------------------------------------------------------- /juego-web/js/Tile.js: -------------------------------------------------------------------------------- 1 | function Tile(xEnTiles, yEnTiles, z, ancho, alto, sprite) { 2 | this.rectangulo = new Rectangulo(xEnTiles, yEnTiles, ancho, alto); 3 | this.zIndex = z; 4 | this.sprite = sprite; 5 | this.idHTML = "x" + xEnTiles + "y" + yEnTiles + "z" + z; 6 | this.html = '

'; 7 | } 8 | 9 | Tile.prototype.aplicarEstilos = function() { 10 | if (!document.getElementById(this.idHTML)) { 11 | throw("El ID " + this.idHTML + " no existe en la hoja"); 12 | } 13 | 14 | document.getElementById(this.idHTML).style.position = "absolute"; 15 | document.getElementById(this.idHTML).style.left = (this.rectangulo.x * this.rectangulo.ancho) + "px"; 16 | document.getElementById(this.idHTML).style.top = (this.rectangulo.y * this.rectangulo.alto) + "px"; 17 | document.getElementById(this.idHTML).style.width = this.rectangulo.ancho + "px"; 18 | document.getElementById(this.idHTML).style.height = this.rectangulo.alto + "px"; 19 | document.getElementById(this.idHTML).style.zIndex = "" + this.zIndex; 20 | document.getElementById(this.idHTML).style.background = "url('" + this.sprite.rutaHojaOrigen + "')"; 21 | 22 | var x = this.sprite.posicionEnHoja.x; 23 | var y = this.sprite.posicionEnHoja.y; 24 | 25 | document.getElementById(this.idHTML).style.backgroundPosition = "-" + x + "px -" + y + "px"; 26 | document.getElementById(this.idHTML).style.backgroundClip = "border-box"; 27 | document.getElementById(this.idHTML).style.outline = "1px solid transparent"; 28 | } 29 | 30 | Tile.prototype.mover = function(x, y) { 31 | document.getElementById(this.idHTML).style.transform = 'translate3d(' + x + 'px,' + y + 'px, 0)'; 32 | } -------------------------------------------------------------------------------- /juego-web/js/ajax.js: -------------------------------------------------------------------------------- 1 | var ajax = { 2 | cargarArchivo: function(ruta, manipularDatos) { 3 | var peticion = new XMLHttpRequest(); 4 | 5 | peticion.onreadystatechange = function() { 6 | /* 7 | 0 / UNSENT - no iniciada 8 | 1 / OPENED - conectado al servidor 9 | 2 / HEADERS_RECIEVED - peticion recbida 10 | 3 / LOADING - procesando peticion 11 | 4 / DONE - peticion finalizada, respuesta preparada 12 | */ 13 | if (peticion.readyState == XMLHttpRequest.DONE) { 14 | if (peticion.status == 200) { 15 | manipularDatos(JSON.parse(peticion.responseText)); 16 | } else if (peticion.status == 400) { 17 | console.log("error"); 18 | } else { 19 | console.log("resultado inesperado"); 20 | } 21 | } 22 | }; 23 | 24 | peticion.open("GET", ruta, true); 25 | peticion.send(); 26 | } 27 | } -------------------------------------------------------------------------------- /juego-web/js/audio.js: -------------------------------------------------------------------------------- 1 | var audio = { 2 | musica: null, 3 | pista1: "audio/393818_sirkoto51_retro-game-overworld-loop-1.mp3", //https://freesound.org/people/Sirkoto51/sounds/393818/ 4 | reproducir: function(rutaPista) { 5 | if(audio.musica != null) { 6 | audio.musica.pause(); 7 | audio.musica.src = ""; 8 | } 9 | audio.musica = new Audio(rutaPista); 10 | audio.musica.play(); 11 | } 12 | }; -------------------------------------------------------------------------------- /juego-web/js/buclePrincipal.js: -------------------------------------------------------------------------------- 1 | //namespace - espacio de nombres 2 | //main loop - bucle principal 3 | //aps - actualizaciones por segundo 4 | //fps - frames por segundo 5 | //callback 6 | //1s = 1000ms 7 | 8 | var buclePrincipal = { 9 | idEjecucion: null, 10 | ultimoRegistro: 0, 11 | aps: 0, 12 | fps: 0, 13 | iterar: function(registroTemporal) { 14 | buclePrincipal.idEjecucion = window.requestAnimationFrame(buclePrincipal.iterar); 15 | buclePrincipal.actualizar(registroTemporal); 16 | buclePrincipal.dibujar(); 17 | 18 | if(registroTemporal - buclePrincipal.ultimoRegistro > 999) { 19 | buclePrincipal.ultimoRegistro = registroTemporal; 20 | console.log("APS: " + buclePrincipal.aps + " | FPS: " + buclePrincipal.fps); 21 | buclePrincipal.aps = 0; 22 | buclePrincipal.fps = 0; 23 | } 24 | }, 25 | detener: function() { 26 | 27 | }, 28 | actualizar: function(registroTemporal) { 29 | mando.actualizar(); 30 | maquinaEstados.actualizar(registroTemporal); 31 | buclePrincipal.aps++; 32 | }, 33 | dibujar: function(registroTemporal) { 34 | maquinaEstados.dibujar(); 35 | buclePrincipal.fps++; 36 | } 37 | }; -------------------------------------------------------------------------------- /juego-web/js/controles.js: -------------------------------------------------------------------------------- 1 | var controles = { 2 | arriba: false, 3 | abajo: false, 4 | izquierda: false, 5 | derecha: false, 6 | actualizar: function() { 7 | if (teclado.teclaPulsada(controlesTeclado.arriba)) { 8 | controles.arriba = true; 9 | console.log("arriba"); 10 | } 11 | if (teclado.teclaPulsada(controlesTeclado.abajo)) { 12 | controles.abajo = true; 13 | console.log("abajo"); 14 | } 15 | if (teclado.teclaPulsada(controlesTeclado.izquierda)) { 16 | controles.izquierda = true; 17 | console.log("izquierda"); 18 | } 19 | if (teclado.teclaPulsada(controlesTeclado.derecha)) { 20 | controles.derecha = true; 21 | console.log("derecha"); 22 | } 23 | }, 24 | reiniciar: function() { 25 | controles.arriba = false; 26 | controles.abajo = false; 27 | controles.izquierda = false; 28 | controles.derecha = false; 29 | } 30 | }; -------------------------------------------------------------------------------- /juego-web/js/controlesTeclado.js: -------------------------------------------------------------------------------- 1 | var controlesTeclado = { 2 | arriba: 'w', 3 | abajo: 's', 4 | izquierda: 'a', 5 | derecha: 'd', 6 | entrarLocalizacion: 'r', 7 | saltar: ' ' 8 | }; -------------------------------------------------------------------------------- /juego-web/js/debug.js: -------------------------------------------------------------------------------- 1 | var debug = { 2 | debugging: false 3 | }; -------------------------------------------------------------------------------- /juego-web/js/dimensiones.js: -------------------------------------------------------------------------------- 1 | var dimensiones = { 2 | ancho: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 3 | alto: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, 4 | ladoTiles: 100, 5 | escala: 1, 6 | iniciar: function() { 7 | window.addEventListener("resize", function(evento) { 8 | dimensiones.ancho = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 9 | dimensiones.alto = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 10 | }); 11 | }, 12 | obtenerTilesHorizontales: function() { 13 | var ladoFinal = dimensiones.ladoTiles * dimensiones.escala; 14 | return Math.ceil((dimensiones.ancho - ladoFinal) / ladoFinal); 15 | }, 16 | obtenerTilesVerticales: function() { 17 | var ladoFinal = dimensiones.ladoTiles * dimensiones.escala; 18 | return Math.ceil((dimensiones.alto - ladoFinal) / ladoFinal); 19 | }, 20 | obtenerTotalTiles: function() { 21 | return dimensiones.obtenerTilesHorizontales() * dimensiones.obtenerTilesVerticales(); 22 | } 23 | }; -------------------------------------------------------------------------------- /juego-web/js/inicio.js: -------------------------------------------------------------------------------- 1 | // ctrl + f5 - recargar limpiando la caché 2 | 3 | var inicio = { 4 | iniciadores: [ 5 | dimensiones.iniciar(), 6 | maquinaEstados.iniciar(), 7 | teclado.iniciar(), 8 | mando.iniciar(), 9 | buclePrincipal.iterar() 10 | ], 11 | iniciarJuego: function() { 12 | inicio.encadenarInicios(inicio.iniciadores.shift()); 13 | }, 14 | encadenarInicios: function(iniciador) { 15 | if(iniciador) { 16 | iniciador(() => inicio.encadenarInicios(iniciadores.shift())); 17 | } 18 | } 19 | }; 20 | 21 | document.addEventListener('DOMContentLoaded', function() { 22 | inicio.iniciarJuego(); 23 | }, false); 24 | 25 | -------------------------------------------------------------------------------- /juego-web/js/listadoEstados.js: -------------------------------------------------------------------------------- 1 | var listadoEstados = { 2 | CARGANDO: 0, 3 | MENU_INICIAL: 1, 4 | MAPAMUNDI: 2, 5 | NIVEL: 3, 6 | PANTALLA_TITULO: 4 7 | } -------------------------------------------------------------------------------- /juego-web/js/mando.js: -------------------------------------------------------------------------------- 1 | var mando = { 2 | objeto: null, 3 | eventosDisponibles: 'ongamepadconnected' in window, 4 | conectado: false, 5 | iniciar: function() { 6 | if (mando.eventosDisponibles) { 7 | window.addEventListener("gamepadconnected", mando.conectar); 8 | window.addEventListener("gamepaddisconnected", mando.desconectar); 9 | } else { 10 | mando.actualizar(); 11 | } 12 | }, 13 | conectar: function(evento) { 14 | mando.objeto = evento.gamepad; 15 | mando.identificar(); 16 | }, 17 | desconectar: function(evento) { 18 | console.log("Mando desconectado del índice %d: %s.", evento.gamepad.index, evento.gamepad.id); 19 | }, 20 | actualizar: function() { 21 | if (!mando.eventosDisponibles) { 22 | mandos = null; 23 | 24 | try { 25 | mandos = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []); 26 | mando.objeto = mandos[0]; 27 | if(!mando.conectado) { 28 | mando.conectado = true; 29 | mando.identificar(); 30 | } 31 | } catch(exception) { 32 | console.log(exception.message); 33 | } 34 | } 35 | 36 | if (!mando.objeto) { 37 | return; 38 | } 39 | 40 | if (mando.botonPulsado(mando.objeto.buttons[0])) { 41 | console.log("Mando: A"); 42 | } 43 | }, 44 | botonPulsado: function(boton) { 45 | if (typeof(boton) == "object") { 46 | return boton.pressed; 47 | } 48 | return boton == 1.0; 49 | }, 50 | identificar: function() { 51 | console.log("Mando conectado en el índice %d: %s. %d botones, %d ejes.", 52 | mando.objeto.index, mando.objeto.id, mando.objeto.buttons.length, mando.objeto.axes.length); 53 | } 54 | }; -------------------------------------------------------------------------------- /juego-web/js/maquinaEstados.js: -------------------------------------------------------------------------------- 1 | var maquinaEstados = { 2 | estadoActual: null, 3 | iniciar: function() { 4 | maquinaEstados.cambiarEstado(listadoEstados.PANTALLA_TITULO); 5 | }, 6 | cambiarEstado: function(nuevoEstado, objetoEntradaLocalizacion) { 7 | switch(nuevoEstado) { 8 | case listadoEstados.CARGANDO: 9 | break; 10 | case listadoEstados.MENU_INICIAL: 11 | break; 12 | case listadoEstados.MAPAMUNDI: 13 | maquinaEstados.estadoActual = new EstadoMapamundi(listadoEstados.MAPAMUNDI, "mapas/desierto48.json", 500, 500); 14 | break; 15 | case listadoEstados.NIVEL: 16 | maquinaEstados.estadoActual = new EstadoMapamundi(listadoEstados.NIVEL, objetoEntradaLocalizacion.rutaMapa, 17 | objetoEntradaLocalizacion.coordenadaXInicial, objetoEntradaLocalizacion.coordenadaYInicial); 18 | //reproducir audio del nivel 19 | break; 20 | case listadoEstados.PANTALLA_TITULO: 21 | console.log("iniciando pantalla"); 22 | maquinaEstados.estadoActual = new EstadoPantallaTitulo(); 23 | break; 24 | } 25 | }, 26 | actualizar: function(registroTemporal) { 27 | maquinaEstados.estadoActual.actualizar(registroTemporal); 28 | }, 29 | dibujar: function() { 30 | maquinaEstados.estadoActual.dibujar(); 31 | } 32 | } -------------------------------------------------------------------------------- /juego-web/js/popup.js: -------------------------------------------------------------------------------- 1 | var popup = { 2 | visible: false, 3 | mostrar: function(x, y, ancho, texto) { 4 | if(popup.visible) { 5 | return; 6 | } 7 | 8 | x = Math.floor(x); 9 | y = Math.floor(y); 10 | 11 | let id = "popup"; 12 | 13 | document.getElementById(id).innerHTML = texto; 14 | document.getElementById(id).style.display = "block"; 15 | document.getElementById(id).style.position = "absolute"; 16 | document.getElementById(id).style.transform = 'translate3d('+ x + 'px, ' + y + 'px, 0' + ')'; 17 | document.getElementById(id).style.width = ancho + "px"; 18 | document.getElementById(id).style.zIndex = "11"; 19 | document.getElementById(id).style.backgroundColor = "black"; 20 | document.getElementById(id).style.color = "white"; 21 | document.getElementById(id).style.border = "3px solid white"; 22 | document.getElementById(id).style.padding = "0.5em"; 23 | document.getElementById(id).style.textAlign = "center"; 24 | 25 | popup.visible = true; 26 | }, 27 | ocultar: function() { 28 | if(!popup.visible) { 29 | return; 30 | } 31 | 32 | let id = "popup"; 33 | 34 | document.getElementById(id).style.display = "none"; 35 | document.getElementById(id).innerHTML = ""; 36 | 37 | popup.visible = false; 38 | } 39 | }; -------------------------------------------------------------------------------- /juego-web/js/registroLocalizaciones.js: -------------------------------------------------------------------------------- 1 | var registroLocalizaciones = { 2 | obtenerLocalizacion: function(nombreLocalizacion) { 3 | let localizaciones = new Array(); 4 | localizaciones.push(new RegistroLocalizacionEntrada("Rockport", "niveles/villa48.json", "img/villa48.nivel.png", 0, 630)); 5 | 6 | for(var i = 0; i < localizaciones.length; i++) { 7 | if(nombreLocalizacion == localizaciones[i].nombre) { 8 | return localizaciones[i]; 9 | } 10 | } 11 | } 12 | }; -------------------------------------------------------------------------------- /juego-web/js/teclado.js: -------------------------------------------------------------------------------- 1 | var teclado = { 2 | teclas: new Array(), 3 | iniciar: function() { 4 | document.onkeydown = teclado.guardarTecla; 5 | document.onkeyup = teclado.borrarTecla; 6 | }, 7 | guardarTecla: function(e) { 8 | if (teclado.teclas.indexOf(e.key) == -1) { 9 | teclado.teclas.push(e.key); 10 | } 11 | }, 12 | borrarTecla: function(e) { 13 | var posicion = teclado.teclas.indexOf(e.key); 14 | if (posicion !== -1) { 15 | teclado.teclas.splice(posicion, 1); 16 | } 17 | }, 18 | teclaPulsada: function(codigoTecla) { 19 | return (teclado.teclas.indexOf(codigoTecla) !== -1) ? true : false; 20 | } 21 | }; -------------------------------------------------------------------------------- /juego-web/mapas/desierto.json: -------------------------------------------------------------------------------- 1 | { "height":20, 2 | "layers":[ 3 | { 4 | "data":[108, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 110, 142, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, 126, 143, 143, 126, 143, 144, 88, 88, 22, 88, 88, 6, 7, 7, 7, 7, 7, 8, 88, 108, 144, 88, 5, 88, 88, 88, 21, 2, 4, 3, 88, 40, 24, 27, 24, 24, 27, 25, 108, 127, 117, 118, 118, 118, 118, 2, 39, 19, 19, 19, 39, 88, 40, 24, 24, 27, 24, 42, 142, 144, 136, 63, 64, 64, 64, 64, 39, 39, 118, 118, 118, 119, 55, 23, 24, 24, 24, 3, 118, 116, 153, 80, 18, 19, 38, 19, 88, 88, 88, 88, 35, 136, 6, 24, 24, 27, 24, 8, 88, 136, 88, 97, 98, 98, 98, 98, 88, 88, 35, 88, 88, 136, 23, 27, 24, 24, 27, 42, 88, 136, 88, 90, 88, 21, 19, 19, 16, 16, 16, 16, 17, 136, 40, 41, 41, 41, 42, 88, 117, 132, 118, 118, 118, 118, 19, 139, 11, 11, 11, 11, 34, 115, 118, 118, 118, 116, 118, 118, 133, 57, 58, 58, 58, 59, 19, 19, 11, 28, 11, 11, 34, 134, 22, 88, 20, 20, 20, 88, 136, 74, 75, 75, 75, 75, 58, 58, 11, 11, 11, 11, 34, 134, 88, 88, 20, 121, 20, 88, 136, 91, 92, 92, 92, 92, 92, 92, 11, 12, 13, 28, 34, 134, 88, 88, 108, 109, 110, 88, 115, 118, 118, 118, 118, 118, 118, 138, 28, 29, 122, 31, 34, 136, 78, 108, 112, 111, 112, 110, 136, 94, 91, 75, 75, 75, 58, 58, 11, 34, 136, 49, 51, 136, 108, 112, 112, 112, 112, 127, 136, 88, 79, 91, 75, 75, 75, 75, 11, 34, 151, 118, 118, 133, 142, 143, 143, 143, 143, 144, 136, 88, 39, 88, 91, 92, 92, 92, 28, 34, 36, 88, 88, 151, 118, 118, 116, 118, 118, 118, 153, 88, 88, 88, 88, 88, 88, 20, 12, 51, 88, 88, 37, 88, 88, 19, 19, 19, 88, 18, 88, 88, 37, 88, 18, 88, 88, 88, 34, 37, 88, 88, 88, 88, 18, 19, 124, 19, 88, 88, 88, 88, 20, 88, 88, 19, 88, 88, 34, 88, 88, 88, 88, 88, 88, 19, 19, 19, 88, 88, 88, 88, 88, 88, 88, 88, 18, 88], 5 | "height":20, 6 | "name":"Capa de Patrones 1", 7 | "opacity":1, 8 | "type":"tilelayer", 9 | "visible":true, 10 | "width":20, 11 | "x":0, 12 | "y":0 13 | }, 14 | { 15 | "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 182, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 210, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 16 | "height":20, 17 | "name":"Capa de patrones 2", 18 | "opacity":1, 19 | "type":"tilelayer", 20 | "visible":true, 21 | "width":20, 22 | "x":0, 23 | "y":0 24 | }, 25 | { 26 | "color":"#ff0000", 27 | "draworder":"topdown", 28 | "height":20, 29 | "name":"colisiones", 30 | "objects":[ 31 | { 32 | "height":35, 33 | "id":1, 34 | "name":"", 35 | "rotation":0, 36 | "type":"", 37 | "visible":true, 38 | "width":322, 39 | "x":-2, 40 | "y":-2 41 | }, 42 | { 43 | "height":42, 44 | "id":2, 45 | "name":"", 46 | "rotation":0, 47 | "type":"", 48 | "visible":true, 49 | "width":12, 50 | "x":2, 51 | "y":52 52 | }, 53 | { 54 | "height":13, 55 | "id":3, 56 | "name":"", 57 | "rotation":0, 58 | "type":"", 59 | "visible":true, 60 | "width":14, 61 | "x":17, 62 | "y":82 63 | }, 64 | { 65 | "height":13, 66 | "id":4, 67 | "name":"", 68 | "rotation":0, 69 | "type":"", 70 | "visible":true, 71 | "width":12, 72 | "x":67, 73 | "y":66 74 | }, 75 | { 76 | "height":12, 77 | "id":5, 78 | "name":"", 79 | "rotation":0, 80 | "type":"", 81 | "visible":true, 82 | "width":14, 83 | "x":34, 84 | "y":36 85 | }, 86 | { 87 | "height":29, 88 | "id":6, 89 | "name":"", 90 | "rotation":0, 91 | "type":"", 92 | "visible":true, 93 | "width":107, 94 | "x":84, 95 | "y":35 96 | }, 97 | { 98 | "height":50, 99 | "id":7, 100 | "name":"", 101 | "rotation":0, 102 | "type":"", 103 | "visible":true, 104 | "width":70, 105 | "x":105, 106 | "y":67 107 | }, 108 | { 109 | "height":22, 110 | "id":8, 111 | "name":"", 112 | "rotation":0, 113 | "type":"", 114 | "visible":true, 115 | "width":83, 116 | "x":94, 117 | "y":121 118 | }, 119 | { 120 | "height":16, 121 | "id":9, 122 | "name":"", 123 | "rotation":0, 124 | "type":"", 125 | "visible":true, 126 | "width":10, 127 | "x":179, 128 | "y":104 129 | }, 130 | { 131 | "height":41, 132 | "id":10, 133 | "name":"", 134 | "rotation":0, 135 | "type":"", 136 | "visible":true, 137 | "width":30, 138 | "x":195, 139 | "y":38 140 | }, 141 | { 142 | "height":33, 143 | "id":11, 144 | "name":"", 145 | "rotation":0, 146 | "type":"", 147 | "visible":true, 148 | "width":67, 149 | "x":254, 150 | "y":77 151 | }, 152 | { 153 | "height":12, 154 | "id":12, 155 | "name":"", 156 | "rotation":0, 157 | "type":"", 158 | "visible":true, 159 | "width":11, 160 | "x":258, 161 | "y":34 162 | }, 163 | { 164 | "height":16, 165 | "id":13, 166 | "name":"", 167 | "rotation":0, 168 | "type":"", 169 | "visible":true, 170 | "width":12, 171 | "x":274, 172 | "y":113 173 | }, 174 | { 175 | "height":12, 176 | "id":14, 177 | "name":"", 178 | "rotation":0, 179 | "type":"", 180 | "visible":true, 181 | "width":14, 182 | "x":241, 183 | "y":114 184 | }, 185 | { 186 | "height":13, 187 | "id":15, 188 | "name":"", 189 | "rotation":0, 190 | "type":"", 191 | "visible":true, 192 | "width":14, 193 | "x":98, 194 | "y":163 195 | }, 196 | { 197 | "height":12, 198 | "id":16, 199 | "name":"", 200 | "rotation":0, 201 | "type":"", 202 | "visible":true, 203 | "width":13, 204 | "x":225, 205 | "y":247 206 | }, 207 | { 208 | "height":15, 209 | "id":17, 210 | "name":"", 211 | "rotation":0, 212 | "type":"", 213 | "visible":true, 214 | "width":91, 215 | "x":227, 216 | "y":210 217 | }, 218 | { 219 | "height":21, 220 | "id":18, 221 | "name":"", 222 | "rotation":0, 223 | "type":"", 224 | "visible":true, 225 | "width":59, 226 | "x":261, 227 | "y":231 228 | }, 229 | { 230 | "height":38, 231 | "id":19, 232 | "name":"", 233 | "rotation":0, 234 | "type":"", 235 | "visible":true, 236 | "width":73, 237 | "x":213, 238 | "y":151 239 | }, 240 | { 241 | "height":23, 242 | "id":20, 243 | "name":"", 244 | "rotation":0, 245 | "type":"", 246 | "visible":true, 247 | "width":26, 248 | "x":292, 249 | "y":165 250 | }, 251 | { 252 | "height":18, 253 | "id":21, 254 | "name":"", 255 | "rotation":0, 256 | "type":"", 257 | "visible":true, 258 | "width":46, 259 | "x":131, 260 | "y":197 261 | }, 262 | { 263 | "height":15, 264 | "id":22, 265 | "name":"", 266 | "rotation":0, 267 | "type":"", 268 | "visible":true, 269 | "width":77, 270 | "x":107, 271 | "y":220 272 | }, 273 | { 274 | "height":13, 275 | "id":23, 276 | "name":"", 277 | "rotation":0, 278 | "type":"", 279 | "visible":true, 280 | "width":90, 281 | "x":100, 282 | "y":241 283 | }, 284 | { 285 | "height":71, 286 | "id":24, 287 | "name":"", 288 | "rotation":0, 289 | "type":"", 290 | "visible":true, 291 | "width":74, 292 | "x":1, 293 | "y":134 294 | }, 295 | { 296 | "height":29, 297 | "id":25, 298 | "name":"", 299 | "rotation":0, 300 | "type":"", 301 | "visible":true, 302 | "width":18, 303 | "x":54, 304 | "y":207 305 | }, 306 | { 307 | "height":79, 308 | "id":26, 309 | "name":"", 310 | "rotation":0, 311 | "type":"", 312 | "visible":true, 313 | "width":28, 314 | "x":-1, 315 | "y":205 316 | }, 317 | { 318 | "height":33, 319 | "id":27, 320 | "name":"", 321 | "rotation":0, 322 | "type":"", 323 | "visible":true, 324 | "width":11, 325 | "x":-1, 326 | "y":287 327 | }], 328 | "opacity":1, 329 | "type":"objectgroup", 330 | "visible":true, 331 | "width":20, 332 | "x":0, 333 | "y":0 334 | }, 335 | { 336 | "color":"#00ff00", 337 | "draworder":"topdown", 338 | "height":20, 339 | "name":"localizaciones", 340 | "objects":[ 341 | { 342 | "height":32, 343 | "id":28, 344 | "name":"", 345 | "rotation":0, 346 | "type":"", 347 | "visible":true, 348 | "width":46, 349 | "x":18, 350 | "y":48 351 | }, 352 | { 353 | "height":15, 354 | "id":29, 355 | "name":"", 356 | "rotation":0, 357 | "type":"", 358 | "visible":true, 359 | "width":21, 360 | "x":30, 361 | "y":209 362 | }, 363 | { 364 | "height":13, 365 | "id":30, 366 | "name":"", 367 | "rotation":0, 368 | "type":"", 369 | "visible":true, 370 | "width":13, 371 | "x":131, 372 | "y":292 373 | }, 374 | { 375 | "height":16, 376 | "id":31, 377 | "name":"", 378 | "rotation":0, 379 | "type":"", 380 | "visible":true, 381 | "width":14, 382 | "x":305, 383 | "y":192 384 | }, 385 | { 386 | "height":17, 387 | "id":32, 388 | "name":"", 389 | "rotation":0, 390 | "type":"", 391 | "visible":true, 392 | "width":15, 393 | "x":304, 394 | "y":128 395 | }, 396 | { 397 | "height":25, 398 | "id":33, 399 | "name":"", 400 | "rotation":0, 401 | "type":"", 402 | "visible":true, 403 | "width":47, 404 | "x":131, 405 | "y":164 406 | }, 407 | { 408 | "height":16, 409 | "id":34, 410 | "name":"", 411 | "rotation":0, 412 | "type":"", 413 | "visible":true, 414 | "width":14, 415 | "x":306, 416 | "y":47 417 | }, 418 | { 419 | "height":15, 420 | "id":35, 421 | "name":"", 422 | "rotation":0, 423 | "type":"", 424 | "visible":true, 425 | "width":12, 426 | "x":179, 427 | "y":80 428 | }], 429 | "opacity":1, 430 | "type":"objectgroup", 431 | "visible":true, 432 | "width":20, 433 | "x":0, 434 | "y":0 435 | }], 436 | "nextobjectid":36, 437 | "orientation":"orthogonal", 438 | "renderorder":"right-down", 439 | "tileheight":16, 440 | "tilesets":[ 441 | { 442 | "columns":17, 443 | "firstgid":1, 444 | "image":"..\/..\/juego-web\/img\/mapa.png", 445 | "imageheight":144, 446 | "imagewidth":272, 447 | "margin":0, 448 | "name":"mapa", 449 | "spacing":0, 450 | "tilecount":153, 451 | "tileheight":16, 452 | "tilewidth":16 453 | }, 454 | { 455 | "columns":18, 456 | "firstgid":154, 457 | "image":"..\/img\/vehiculos.png", 458 | "imageheight":64, 459 | "imagewidth":288, 460 | "margin":0, 461 | "name":"vehiculos", 462 | "spacing":0, 463 | "tilecount":72, 464 | "tileheight":16, 465 | "tilewidth":16 466 | }], 467 | "tilewidth":16, 468 | "version":1, 469 | "width":20 470 | } -------------------------------------------------------------------------------- /juego-web/mapas/desierto.tmx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 108,109,109,109,109,109,109,109,109,109,109,109,109,109,109,109,109,109,109,110, 9 | 142,143,143,143,143,143,143,143,143,143,143,143,143,143,126,143,143,126,143,144, 10 | 88,88,22,88,88,6,7,7,7,7,7,8,88,108,144,88,5,88,88,88, 11 | 21,2,4,3,88,40,24,27,24,24,27,25,108,127,117,118,118,118,118,2, 12 | 39,19,19,19,39,88,40,24,24,27,24,42,142,144,136,63,64,64,64,64, 13 | 39,39,118,118,118,119,55,23,24,24,24,3,118,116,153,80,18,19,38,19, 14 | 88,88,88,88,35,136,6,24,24,27,24,8,88,136,88,97,98,98,98,98, 15 | 88,88,35,88,88,136,23,27,24,24,27,42,88,136,88,90,88,21,19,19, 16 | 16,16,16,16,17,136,40,41,41,41,42,88,117,132,118,118,118,118,19,139, 17 | 11,11,11,11,34,115,118,118,118,116,118,118,133,57,58,58,58,59,19,19, 18 | 11,28,11,11,34,134,22,88,20,20,20,88,136,74,75,75,75,75,58,58, 19 | 11,11,11,11,34,134,88,88,20,121,20,88,136,91,92,92,92,92,92,92, 20 | 11,12,13,28,34,134,88,88,108,109,110,88,115,118,118,118,118,118,118,138, 21 | 28,29,122,31,34,136,78,108,112,111,112,110,136,94,91,75,75,75,58,58, 22 | 11,34,136,49,51,136,108,112,112,112,112,127,136,88,79,91,75,75,75,75, 23 | 11,34,151,118,118,133,142,143,143,143,143,144,136,88,39,88,91,92,92,92, 24 | 28,34,36,88,88,151,118,118,116,118,118,118,153,88,88,88,88,88,88,20, 25 | 12,51,88,88,37,88,88,19,19,19,88,18,88,88,37,88,18,88,88,88, 26 | 34,37,88,88,88,88,18,19,124,19,88,88,88,88,20,88,88,19,88,88, 27 | 34,88,88,88,88,88,88,19,19,19,88,88,88,88,88,88,88,88,18,88 28 | 29 | 30 | 31 |