From: VladImpaler <fake@email.com>
Date: Tue, 25 Apr 2023 03:16:23 +0000 (-0600)
Subject: Iframe to display the game added
X-Git-Url: https://git.josue.xyz/?p=salamandradevs.site%2F.git;a=commitdiff_plain;h=3ba4e37dc2566522dcb98db59c902903b51c3cad

Iframe to display the game added
---

3ba4e37dc2566522dcb98db59c902903b51c3cad
diff --cc content/games/snake.md
index d048246,d048246..68a257b
--- a/content/games/snake.md
+++ b/content/games/snake.md
@@@ -2,4 -2,4 +2,5 @@@
  title: SNAKE GAME
  description: Juego de la viborita con disparos, hecho por @VladImpaler64
  image: /images/games/pato.svg
++iframe: /games/snake/juego.html
  ---
diff --cc content/games/snake/Explosion 69 (2).wav
index 2ec91aa,2ec91aa..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/Hit_hurt 176 (1).wav
index 256b2a5,256b2a5..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/Hit_hurt 192 (2).wav
index 93cdc52,93cdc52..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/Mouse.png
index 93154a3,93154a3..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/Pickup_coin 10.wav
index 560e15a,560e15a..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/Skull.png
index f2f8751,f2f8751..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/Slime.png
index df633b1,df633b1..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/Snake2.png
index f279c4a,f279c4a..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/disparo.png
index 9959228,9959228..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/foreground.png
index ee98e73,ee98e73..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/gema.png
index a997005,a997005..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/gema2.png
index 010a777,010a777..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/gema3.png
index 7870490,7870490..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/gema4.png
index ee6d566,ee6d566..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/lifebar.png
index e0e3080,e0e3080..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc content/games/snake/map2.png
index 3fe8628,3fe8628..0000000
deleted file mode 100644,100644
Binary files differ
diff --cc static/games/snake/Explosion 69 (2).wav
index 0000000,0000000..2ec91aa
new file mode 100644
Binary files differ
diff --cc static/games/snake/Hit_hurt 176 (1).wav
index 0000000,0000000..256b2a5
new file mode 100644
Binary files differ
diff --cc static/games/snake/Hit_hurt 192 (2).wav
index 0000000,0000000..93cdc52
new file mode 100644
Binary files differ
diff --cc static/games/snake/Mouse.png
index 0000000,0000000..93154a3
new file mode 100644
Binary files differ
diff --cc static/games/snake/Pickup_coin 10.wav
index 0000000,0000000..560e15a
new file mode 100644
Binary files differ
diff --cc static/games/snake/Skull.png
index 0000000,0000000..f2f8751
new file mode 100644
Binary files differ
diff --cc static/games/snake/Slime.png
index 0000000,0000000..df633b1
new file mode 100644
Binary files differ
diff --cc static/games/snake/Snake2.png
index 0000000,0000000..f279c4a
new file mode 100644
Binary files differ
diff --cc static/games/snake/disparo.png
index 0000000,0000000..9959228
new file mode 100644
Binary files differ
diff --cc static/games/snake/foreground.png
index 0000000,0000000..ee98e73
new file mode 100644
Binary files differ
diff --cc static/games/snake/gema.png
index 0000000,0000000..a997005
new file mode 100644
Binary files differ
diff --cc static/games/snake/gema2.png
index 0000000,0000000..010a777
new file mode 100644
Binary files differ
diff --cc static/games/snake/gema3.png
index 0000000,0000000..7870490
new file mode 100644
Binary files differ
diff --cc static/games/snake/gema4.png
index 0000000,0000000..ee6d566
new file mode 100644
Binary files differ
diff --cc static/games/snake/juego.html
index 0000000,0000000..f334858
new file mode 100644
--- /dev/null
+++ b/static/games/snake/juego.html
@@@ -1,0 -1,0 +1,1231 @@@
++<!DOCTYPE html>
++	<html lang="es">
++	<head>
++		<meta charset="UTF-8">
++		<meta http-equiv="X-UA-Compatible" content="IE=edge">
++		<meta name="viewport" content="width=device-width, initial-scale=1.0">
++		<title>Snake</title>
++		<style>
++
++			* {
++				padding: 0; 
++				margin: 0; 
++				box-sizing: border-box;
++			}
++
++			html {
++				width: 100%;
++				height: 100%;
++				font-size: 1vh;
++			}
++
++			body {
++				width: 100%;
++				height: 100%;
++
++				background: rgb(185, 128, 4);
++
++				overflow: hidden;
++			}
++
++			.contenedor-gameboy {
++				display: flex;
++				flex-direction: column;
++				width: 100%;
++				height: 100%;
++				position: relative;
++			}
++
++			canvas {
++				display: block;
++				width: 100vw;
++				height: 100vw;
++				max-height: 70vh;
++				max-width: 70vh;
++				margin: 0 auto;
++
++				border: 3rem solid black;
++				border-width: 1.5rem 1.5rem 3rem 1.5rem;
++				background-color: rgb(57, 60, 61);
++
++			}
++
++			.contenedor-gameboy span {
++				display: flex;
++				width: 100%;
++				flex-direction: row;
++				gap: 2vh;
++				align-items: center;
++
++				margin: 0 auto 5vh auto;
++				position: absolute;
++				inset: calc(100vh - 25vh) 0 0 0;
++
++				max-width: 75vh;
++			}
++
++			.pad {
++				position: relative;
++				width: 50%;
++				height: 25vh;
++				font-size: 2.5rem;
++			}
++			
++			.actionAB {
++				position: relative;
++				width: 50%;
++				height: 25vh;
++				font-size: 2.5rem;
++			}
++
++			#controlStart {
++				display: none;
++			}
++
++			#controlSelect {
++				display: none;
++			}
++
++			.lbl-control {
++				display: inline-block;
++				position: relative;
++				width: 6.5rem;
++				height: 2.5rem;
++				inset: 55% 0%;
++
++				border-radius: 15rem;
++				background-color: rgb(119, 112, 5);
++
++				cursor: pointer;
++				user-select: none;
++			}
++
++			.lbl-control::after {
++				position: absolute;
++				content: '';
++				inset: 0.4rem 1rem;
++
++				width: 3rem;
++				height: 1.5rem;
++
++				border-radius: 15rem;
++				background-color: rgb(45, 49, 7);
++
++			}
++
++			.lbl-controlSelect {
++				display: inline-block;
++				position: relative;
++				width: 6.5rem;
++				height: 2.5rem;
++				inset: 55% 85%;
++				
++				border-radius: 15rem;
++				background-color: rgb(119, 112, 5);
++
++				cursor: pointer;
++				user-select: none;
++			}
++
++			.lbl-controlSelect::after {
++				position: absolute;
++				content: '';
++				inset: 0.4rem 1rem;
++
++				width: 3rem;
++				height: 1.5rem;
++
++				border-radius: 15rem;
++				background-color: rgb(45, 49, 7);
++			}
++
++			#controlStart:checked~ .lbl-control::after{
++				inset: 0.4rem 2.6rem;
++			}
++
++			#controlSelect:checked~ .lbl-controlSelect::after{
++				inset: 0.4rem 2.6rem;
++			}
++
++			/* Controles */
++
++			.A, .B, .ArrowUp, .ArrowDown, .ArrowLeft, .ArrowRight {
++				position: absolute;
++				width: 8rem;
++				height: 8rem;
++
++				border-radius: 50%;
++				background-color: rgb(165, 16, 65);
++			}
++
++			.ArrowUp {
++				inset: 10% 25%;
++			}
++			.ArrowUp::after{
++				content: '';
++				position: absolute;
++				inset: 20% 13%;
++				width: 0; 
++				height: 0; 
++				border-left: 2.5rem solid transparent;
++				border-right: 2.5rem solid transparent;
++			
++  				border-bottom: 2.5rem solid rgb(36, 1, 33);
++			}
++			.ArrowDown {
++				inset: 60% 25%;
++			}
++			.ArrowDown::after{
++				content: '';
++				position: absolute;
++				inset: 35% 13%;
++				width: 0; 
++				height: 0; 
++				border-left: 2.5rem solid transparent;
++				border-right: 2.5rem solid transparent;
++				
++				border-top: 2.5rem solid rgb(36, 1, 33);
++			}
++			.ArrowLeft {
++				inset: 35% calc(25% - 6.5rem);
++			}
++			.ArrowLeft::after{
++				content: '';
++				position: absolute;
++				inset: 15% 25%;
++				width: 0; 
++				height: 0; 
++				border-top: 2.5rem solid transparent;
++				border-bottom: 2.5rem solid transparent; 
++				
++				border-right:2.5rem solid rgb(36, 1, 33); 
++			}
++			.ArrowRight {
++				inset: 35% calc(25% + 6.5rem);
++			}
++			.ArrowRight::after{
++				content: '';
++				position: absolute;
++				inset: 15% 35%;
++				width: 0; 
++				height: 0; 
++				border-top: 2.5rem solid transparent;
++				border-bottom: 2.5rem solid transparent;
++				
++				border-left: 2.5rem solid rgb(36, 1, 33);
++			}
++			.A {
++				inset: 25% calc(90% - 6.5rem);
++			}
++			.A::after {
++				content: 'A';
++				color: rgb(36, 1, 33);
++				position: absolute;
++				inset:0 14%;
++				font-weight: 700;
++				font-size: 4.4rem;
++				
++			}
++			.B {
++				inset: 40% calc(60% - 6.5rem);
++			}
++			.B::after {
++				content: 'B';
++				color: rgb(36, 1, 33);
++				position: absolute;
++				inset: 0 18%;
++				font-weight: 700;
++				font-size: 4.4rem;
++				
++			}
++
++			@media (max-width: 55vh) {
++
++				canvas {
++					min-width: 45vh;
++					min-height: 45vh;
++					margin: 0 auto;
++
++					border: none;
++					background-color: rgb(57, 60, 61);
++
++				}
++
++				.lbl-controlSelect {
++					inset: -35% 55%;
++				}
++				.lbl-control {
++					inset: -35% -20%;
++				}
++				.A {
++					inset: 25% calc(80% - 6.5rem);
++				}
++				.B {
++					inset: 40% calc(40% - 6.5rem);
++				}
++				.ArrowUp {
++				inset: 10% 35%;
++				}
++			
++				.ArrowDown {
++					inset: 60% 35%;
++				}
++			
++				.ArrowLeft {
++					inset: 35% calc(35% - 6.5rem);
++				}
++			
++				.ArrowRight {
++					inset: 35% calc(35% + 6.5rem);
++				}
++			
++			}
++
++			@media (min-width: calc(75vh + 60vh)){
++				body {
++					background: rgb(185, 128, 4);
++				}
++
++				.contenedor-gameboy {
++					flex-direction: row;
++					gap: 1rem;
++				}
++
++				canvas {
++					display: block;
++					position: relative;
++					width: 100vw;
++					height: 100vw;
++					max-height: 75vh;
++					max-width: 75vh;
++					min-width: 45vh;
++					min-height: 45vh;
++					margin: 0 auto;
++				
++					inset: 10vh 0 0 0;
++				}
++				
++				.contenedor-gameboy span {
++					display: flex;
++					flex-direction: row;
++					gap: 2vh;
++					align-items: stretch;
++
++					margin: 0;
++					position: absolute;
++					inset: calc(100vh - 25vh) 0 0 0;
++					
++					min-width: 55vh;
++					max-width: 100vw;
++				}
++				.A {
++					inset: 35% 80%;
++				}
++				.B {
++					inset: 50% 65%;
++				}
++
++			}
++		</style>
++		
++	</head>
++	<body>
++		
++		<span class="contenedor-gameboy">
++
++		
++			<canvas></canvas>
++			<span>
++				<div class="pad">
++					<div class="ArrowUp"></div>
++					<div class="ArrowDown"></div>
++					<div class="ArrowLeft"></div>
++					<div class="ArrowRight"></div>
++					<input type="checkbox" id="controlSelect"><label for="controlSelect" class="lbl-controlSelect" title="On/Off de menú"><br>Select</label>
++				</div>
++
++				<div class="actionAB">
++					<div class="A"></div>
++					<div class="B"></div>
++					<input type="checkbox" id="controlStart"><label for="controlStart" class="lbl-control" title="On/Off de animación"><br>&nbsp;Start</label>
++				</div>
++			</span>
++		
++		</span>
++
++		<script>
++			'use strict';
++			(function(){
++				const colisiones = [
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 73, 73, 73, 73, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 73, 73, 73, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 73, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 0, 0, 73, 73, 73, 73, 73, 73, 73, 73, 73, 73, 0, 0, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
++				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
++				];
++
++				let i = 0;  
++				let mapaColisiones = [];
++
++				while (i < colisiones.length){
++
++					mapaColisiones.push(colisiones.slice(i, i + 20)); // Se modifica el corte dependiendo del ancho del ancho
++					i += 20;
++				}
++
++				const controlAnim = document.querySelector('#controlStart');
++				const controlMenu = document.querySelector('#controlSelect');
++				const canvas = document.querySelector('canvas');
++				const CANVAS_WIDTH = canvas.width = 320;  
++				const CANVAS_HEIGHT = canvas.height = 320;
++				const ctx = canvas.getContext('2d');
++
++				const mapa = new Image();
++				mapa.src = './map2.png';
++				const foreground = new Image();
++				foreground.src = './foreground.png';
++
++				// SFX
++				const coin = new Audio('./Pickup_coin 10.wav');
++				coin.volume = 0.08;
++				const pain = new Audio('./Hit_hurt 192 (2).wav');
++				pain.volume = 0.05;
++				const shoot = new Audio('./Explosion 69 (2).wav');
++				shoot.volume = 0.1;
++				const hithurt = new Audio('./Hit_hurt 176 (1).wav');
++				hithurt.volume = 0.2;
++				// NPC 
++
++				class NPC{
++					constructor(start = 0, width, height, path = '', frames = 7, x = 0, y= 0, slowmo = 6, resolution = 1, velocidad = 2, life = 100, pain=2){
++						this.npcImage = new Image();
++						this.src = this.npcImage.src = path;
++						this.lifeImge = new Image();
++						this.lifeSrc = this.lifeImge.src = './lifebar.png';
++						this.width = width;
++						this.height = height;   
++						this.resolution = resolution; // Este valor sólo puede ser entero o un entero con 0.5 de decimal
++						this.frameX = start;
++						this.frameY = 0;
++						this.gameFrame = 0;
++						this.slowmotion = slowmo;
++						this.controlF = frames;
++						this.x = x;
++						this.y = y;
++						this.efecto = {
++							activo: false,
++							estado: ''
++						};
++						this.movimiento = false;
++						this.direction = {
++							'Last': undefined,
++							'ArrowUp': false,
++							'ArrowDown': false,
++							'ArrowLeft': false,
++							'ArrowRight': false
++						};
++						this.collision = false;
++						this.velocidad = velocidad;
++						this.life = life;
++						this.reload = false;
++						this.pain = pain;
++						this.hit = {
++							'0': (empuje)=>{
++								if(player.frameX === 6 || player.frameX === 1 || player.direction.Last === 'ArrowUp') {
++									this.life -= this.pain; 
++									return this.y -= empuje;
++								}
++							},
++							'1': (empuje)=>{
++								if(player.frameX === 4 || player.frameX === 0 || player.direction.Last === 'ArrowDown') {
++									this.life -= this.pain; 
++									return this.y += empuje;
++								}
++							},
++							'3': (empuje)=>{
++								if(player.frameX === 8 || player.frameX === 3 || player.direction.Last === 'ArrowLeft') {
++									this.life -= this.pain; 
++									return this.x -= empuje;
++								}
++							},
++							'2': (empuje)=>{
++								if(player.frameX === 7 || player.frameX === 2 || player.direction.Last === 'ArrowRight') {
++									this.life -= this.pain; 
++									return this.x += empuje;
++								}
++							},
++							'undefined': ()=> {return;},
++							' ': ()=>{return;}
++						};
++						this.fx = undefined;
++						this.offsetMapX = 0;
++						this.offsetMapY = 0;
++					}
++					
++					hitbox(vel, empuje){
++						
++						if(player.x - 24 < this.x + 16 && player.y + 88 > this.y && player.x + 88 > this.x && player.y - 20 < this.y + 16){
++
++							if(this.life && !player.efecto.activo){
++										this.velocidad = vel;
++										player.reload = true;
++										this.hit[this.frameX](empuje);
++										return setTimeout(() => {
++											player.reload = false;
++										}, 400);
++									};
++								return;
++						} else {return setTimeout(() => {
++							player.fx = undefined
++							player.reload = false;
++						}, 700)};
++					}
++
++					enfrente(lineaMedia = 32){ // Para renderizar adelante o atrás de un sprite
++						if(this.y >= player.y + lineaMedia) return true;
++						else return false;
++					}
++
++					colision(x = player.x, y = player.y, objetivo = player){ // Esto es para los sprites que no atacan y puedan pararse ante colisiones.
++
++					
++						if(this.x <= x + (objetivo.width * objetivo.resolution - 16) && this.x + (this.width * this.resolution ) >= x + 16 && this.y <= y + (objetivo.height * objetivo.resolution - 24) && this.y + (this.height * this.resolution) >= y + 32) {
++							return true;
++						} else {
++							return false;
++						}
++					}
++
++					random(){
++						if(this.colision()) {return;} 
++						// Acá es donde los sprites se quedan quietos si se encuentran con el jugador.
++
++						this.slowmotion = 7;
++						if(this.gameFrame % 30 === 0){
++							switch (Math.trunc(Math.random() * 10 / 2)) {
++								case 0:
++									this.frameX = 2;
++									this.x -= 2;
++									if(player.frameX === 1) this.y -= 2;
++									
++									break;
++								case 1:
++									this.frameX = 3;
++									this.x += 2;
++									if(player.frameX === 0) this.y += 2;
++									
++									break;
++								case 2:
++									this.frameX = 0;
++									this.y += 2;
++									if(player.frameX === 3) this.x += 2;
++									
++									break;
++								case 3:
++									this.frameX = 1;
++									this.y -= 2;
++									if(player.frameX === 2) this.x -= 2
++									
++									break;
++								case 4:
++									// this.frameX = 4; // Falta hacer el estado de espera
++									break;
++								default:
++									break;
++							}
++						}
++						
++					};
++
++					render() {
++
++						/*
++						Img - Imagen para renderizar
++						Posición en X de la imagen
++						Posición en Y de la imagen
++						Ancho de la imagen que se utilizará
++						Largo de la imagen que se utilizará 
++						Posición en X del canvas que se renderizará
++						Posición en Y del canvas que se renderizará 
++						Ancho que ocupará
++						Largo que ocupará 
++						*/ 
++
++						if(this.life <= 0 && this.life !== null){ // Bloque que se encarga de no renderizar más el sprite cuando no tiene vida
++							this.x, this.y = undefined;
++							this.life = null;
++	
++							if(this === player){
++								controlAnim.checked = false;
++								ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
++								return ctx.fillText(`Score: ${contador}`, CANVAS_WIDTH / 2 - 48, CANVAS_WIDTH / 2 - 16);
++							}
++
++							if(this !== player) { // Se le agrega vida extra al jugador una vez que ha matado al sprite
++								player.life += 5;
++								contador += this.velocidad * 10;
++								if(player.life > 100) player.life = 100;
++								setTimeout(()=>{
++									this.life = 100;
++									this.x = Math.trunc(Math.random() * (canvas.width - 16)); 
++									this.y = Math.trunc(Math.random() * (canvas.height - 16)); 
++								}, this.pain * 1000);
++								// player.fx = renderFx.bind(corazon);
++							};
++							return setTimeout(() => {
++								this.fx = undefined;
++							}, 2000);
++						} else if (this.life !== null){
++							ctx.font = '12px serif';
++							ctx.strokeText(this.life, this.x + this.width - this.offsetMapX, this.y - this.offsetMapY);
++						};
++
++						if(this.efecto.activo){ // Bloque para renderizar los efectos de un estado provocado por slime (fuego, electrico, empuje normal)
++							this.slowmotion = 4;
++							switch (this.efecto.estado) {
++								case 'electrico':
++									this.frameX = 9;
++									break;
++								case 'fuego':
++									this.frameX = 5;
++									break;
++								default:
++									break;
++							}
++						}
++
++
++						// Bloque para visualizar la barra de vida
++
++						if(this.life === 100) ctx.drawImage(this.lifeImge, 0, 0, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++						if(this.life <100 && this.life >= 90) ctx.drawImage(this.lifeImge, 0, 8, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++						if(this.life <90 && this.life >= 80) ctx.drawImage(this.lifeImge, 0, 16, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++						if(this.life <80 && this.life >= 70) ctx.drawImage(this.lifeImge, 0, 24, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++						if(this.life <70 && this.life >= 60) ctx.drawImage(this.lifeImge, 0, 32, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++						if(this.life <60 && this.life >= 50) ctx.drawImage(this.lifeImge, 0, 40, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++						if(this.life <50 && this.life >= 40) ctx.drawImage(this.lifeImge, 0, 48, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++						if(this.life <40 && this.life >= 30) ctx.drawImage(this.lifeImge, 0, 56, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++						if(this.life <30 && this.life >= 20) ctx.drawImage(this.lifeImge, 0, 64, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++						if(this.life <20 && this.life >= 1) ctx.drawImage(this.lifeImge, 0, 72, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
++
++
++						ctx.drawImage(this.npcImage, this.frameX * this.width, this.frameY * this.height, this.width, this.height, this.x - this.offsetMapX, this.y - this.offsetMapY, this.width * this.resolution, this.height * this.resolution);
++						
++						// Renderizar la estrella.
++
++			
++
++						// Acá es donde se renderiza la imagen, se renderiza después porque estos efectos están pensados para ir encima del sprite al cual están unidos.
++						if(this.fx !== undefined) {
++							this.fx();
++						};
++
++
++						if (this.gameFrame % this.slowmotion === 0) { 
++							if (this.frameY < this.controlF) { // Control de los frames
++								this.frameY++;
++							} else {
++								this.frameY = 0;
++							};
++						};
++							
++						this.gameFrame++;
++
++						
++
++					};
++				};
++
++				const move = ()=>{
++					if(player.life === null) return;
++					player.slowmotion = 6;
++					if(player.direction.ArrowUp) {
++						// Acá es donde debo poner la colisión con algún sprite
++						
++						player.frameX = 1;
++						if(player.y + 8 <= estrella.y + 16 && player.y + 8 > estrella.y && (player.x + 16 > estrella.x && player.x < estrella.x + 16)){
++							coin.play();
++							// Haz que la gema pase a otro lado.
++							contador += puntos;
++							randEstrella();
++						}
++
++						if(player.y + 8 <= 0) {return player.y = canvas.height - 16;}
++						if(mapaColisiones[Math.trunc((player.y) / 16)][Math.trunc((player.x + 8) / 16)] === 73){return player.movimiento = false;}
++						player.y -= paso;
++					}
++							
++					if(player.direction.ArrowDown){
++						
++						player.frameX = 0;
++						if(player.y + 16 >= estrella.y  && player.y < estrella.y && (player.x + 16 > estrella.x && player.x < estrella.x + 16)){
++							coin.play();
++							contador += puntos;
++							randEstrella();
++						}
++						
++						if(player.y + 16 >= canvas.height) {return player.y = -8;}
++						if(mapaColisiones[Math.trunc((player.y + 16 ) / 16)][Math.trunc((player.x + 8) / 16)] === 73){return player.movimiento = false;}
++						player.y += paso;
++					}
++
++					if(player.direction.ArrowLeft){
++						
++						player.frameX = 2;
++						if(player.x + 8 <= estrella.x + 16 && player.x + 8 > estrella.x && (player.y + 16 > estrella.y && player.y < estrella.y + 16)){
++							coin.play();
++							contador += puntos;
++							randEstrella();
++						}
++						if(player.x + 8 <= 0) {return player.x = canvas.width - 16;}
++						if(mapaColisiones[Math.trunc((player.y + 8) / 16)][Math.trunc((player.x) / 16)] === 73){return player.movimiento = false;}
++						player.x -= paso;
++					}
++							
++					if(player.direction.ArrowRight){
++						
++						player.frameX = 3;
++						if(player.x + 8 >= estrella.x  && player.x < estrella.x && (player.y + 16 > estrella.y && player.y < estrella.y + 16)){
++							coin.play();
++							contador += puntos;
++							randEstrella();
++						}
++						if(player.x + 16 >= canvas.width) {return player.x = -8;}
++						if(mapaColisiones[Math.trunc((player.y + 8) / 16)][Math.trunc((player.x + 16) / 16)] === 73){return player.movimiento = false;}
++						player.x += paso;
++					}
++				};
++
++
++				let [x,y,contador, puntos] = [0,0,0,1];
++				let paso = 1;
++				
++				// const marcador = (function () {
++				// 	let contador = 0; // private variable
++				// 	return {
++				// 		set setCount(valida){
++				// 			contador++;
++				// 		},
++				// 		get getCount(){
++				// 			return contador;
++				// 		}
++				// 	};
++				// }());
++
++				// Jugador principal
++				const player = new NPC(undefined, 16, 16, './Snake2.png', 3, 4 * 25, 4 * 25, 8, 1, 1, 100, 10);
++				const estrella = new NPC(undefined, 16, 16, './gema.png', 3, 4 * 57, 4 * 70, 10, 1, 0, null, undefined);
++
++				const randEstrella = ()=>{
++					if(contador >= 20){
++						puntos = 2;
++						estrella.npcImage.src = './gema2.png';
++					};
++							
++					if(contador >= 50){
++						puntos = 5;
++						estrella.npcImage.src = './gema3.png';
++					};
++
++					if(contador >= 100){
++						puntos = 10;
++						estrella.npcImage.src = './gema4.png';
++				
++					};
++
++					return estrella.x = Math.trunc(Math.random() * (canvas.width - 16)), estrella.y = Math.trunc(Math.random() * (canvas.height - 16)); 
++				};
++
++				// Objetcs
++
++				const bala = new NPC(undefined, 8, 8, './disparo.png', 3, 0, 0, 5, 1, 3, null);
++
++				function disparo(){
++					
++					if(player.life === null || bala.movimiento === true) return;
++					bala.movimiento = true;
++					if(player.direction.ArrowUp) {
++						// Acá es donde debo poner la colisión con algún sprite
++						
++						bala.frameX = 0;
++						bala.x = player.x + 4; // Bala centrada
++						bala.y = player.y - 4;
++						shoot.play();
++					}
++							
++					if(player.direction.ArrowDown){
++						
++						bala.frameX = 1;
++						bala.x = player.x + 2;
++						bala.y = player.y + 12;
++						shoot.play();
++					}
++
++					if(player.direction.ArrowLeft){
++						
++						bala.frameX = 3;
++						bala.x = player.x;
++						bala.y = player.y + 4;
++						shoot.play();
++					}
++							
++					if(player.direction.ArrowRight){
++						
++						bala.frameX = 2;
++						bala.x = player.x + 12;
++						bala.y = player.y + 4;
++						shoot.play();
++					}
++				
++				}
++
++				let npcActivos = [];
++
++				function shootHit(){
++					if(npcActivos.length !== 0) {
++						npcActivos.forEach(sprite => {
++
++							switch (bala.frameX) {
++								case 0: // Arriba
++									if((bala.y <= sprite.y + sprite.height && bala.y > sprite.y) && (bala.x + bala.width > sprite.x && bala.x < sprite.x + sprite.width)){
++										bala.y = player.y
++										bala.movimiento = false;
++										shoot.pause();
++										shoot.currentTime = 0;
++										sprite.life -= sprite.pain;
++										sprite.y -= 24;
++										hithurt.play();// Reproducir un sonido de golpe.
++										// console.log('le pegaste');
++									}
++
++									if(bala.y <= 0){
++										bala.y = player.y
++										bala.movimiento = false;
++										// console.log('murio la bala')
++										shoot.pause();
++										shoot.currentTime = 0;
++									}
++									bala.y -= bala.velocidad;
++									break;
++
++								case 1: // Abajo
++									if((bala.y + bala.height >= sprite.y && bala.y + bala.height < sprite.y + sprite.height) && (bala.x + bala.width > sprite.x && bala.x < sprite.x + sprite.width)){
++										bala.y = player.y
++										bala.movimiento = false;
++										shoot.pause();
++										shoot.currentTime = 0;
++										sprite.life -= sprite.pain;
++										sprite.y += 24;
++										hithurt.play();
++										// console.log('le pegaste');
++									}
++
++									if(bala.y >= canvas.height){
++										bala.y = player.y
++										bala.movimiento = false;
++										// console.log('murio la bala')
++										shoot.pause();
++										shoot.currentTime = 0;
++									}
++									bala.y += bala.velocidad;
++									break;
++									
++								case 2: // Derecha
++									if((bala.x + bala.width >= sprite.x && bala.x + bala.width < sprite.x + sprite.width) && (bala.y + bala.height > sprite.y && bala.y < sprite.y + sprite.height)){
++										bala.y = player.y
++										bala.movimiento = false;
++										shoot.pause();
++										shoot.currentTime = 0;
++										sprite.life -= sprite.pain;
++										sprite.x += 24;
++										hithurt.play();
++										// console.log('le pegaste');
++									}
++
++									if(bala.x >= canvas.width){
++										bala.y = player.x
++										bala.movimiento = false;
++										// console.log('murio la bala')
++										shoot.pause();
++										shoot.currentTime = 0;
++									}
++									bala.x += bala.velocidad;
++									break;
++
++								case 3: // Izquierda
++									if((bala.x <= sprite.x + sprite.width && bala.x > sprite.x) && (bala.y + bala.height > sprite.y && bala.y < sprite.y + sprite.height)){
++										bala.y = player.y
++										bala.movimiento = false;
++										shoot.pause();
++										shoot.currentTime = 0;
++										sprite.life -= sprite.pain;
++										sprite.x -= 24;
++										hithurt.play();
++										// console.log('le pegaste');
++									}
++
++									if(bala.x <= 0){
++										bala.y = player.x
++										bala.movimiento = false;
++										// console.log('murio la bala')
++										shoot.pause();
++										shoot.currentTime = 5;
++									}
++									bala.x -= bala.velocidad;
++									break;
++								default:
++									break;
++							};
++						});
++					} else {
++						switch (bala.frameX) {
++							case 0: // Arriba
++								
++								if(bala.y <= 0){
++									bala.y = player.y
++									bala.movimiento = false;
++									// console.log('murio la bala')
++									shoot.pause();
++									shoot.currentTime = 0;
++								}
++								bala.y -= bala.velocidad;
++								break;
++
++							case 1: // Abajo
++								
++								if(bala.y >= canvas.height){
++									bala.y = player.y
++									bala.movimiento = false;
++									// console.log('murio la bala')
++									shoot.pause();
++									shoot.currentTime = 0;
++								}
++								bala.y += bala.velocidad;
++								break;
++								
++							case 2: // Derecha
++								
++								if(bala.x >= canvas.width){
++									bala.y = player.x
++									bala.movimiento = false;
++									// console.log('murio la bala')
++									shoot.pause();
++									shoot.currentTime = 0;
++								}
++								bala.x += bala.velocidad;
++								break;
++
++							case 3: // Izquierda
++								
++								if(bala.x <= 0){
++									bala.y = player.x
++									bala.movimiento = false;
++									// console.log('murio la bala')
++									shoot.pause();
++									shoot.currentTime = 5;
++								}
++								bala.x -= bala.velocidad;
++								break;
++							default:
++								break;
++						};
++					}
++				}
++
++				// Slimes
++
++				const blueSlime = new NPC(undefined, 32, 32,'./Slime.png', 3, 4*12, 4*30, 7, 1, 0.4, undefined, 8);
++				const skull = new NPC(undefined, 32, 32, './Skull.png', 3, 4 * 10, 4 * 20, 6, 1, 0.6, undefined, 2);
++				// const owl = new NPC(undefined, 32, 32, './Slimes/Owl.png', 3, 4 * 50, 4 * 10, 15, 0.5, 0.2, null);
++				const mouse = new NPC(undefined, 16, 16, './Mouse.png', 3, 4 * 25, 4 * 25, 6, 1, 0.8, 100, 5);
++
++				/* Comportamiento de los slimes */
++
++				const damage = {
++					'': ()=>{player.life -= 2},
++					'fuego': ()=>{player.life -= 5},
++					'electrico': ()=>{player.life -= 10}
++				}
++
++				// Ataque de los slimes
++
++				const attack = (sprite, efecto='', empujeS = 8, empujeP = 4)=>{
++					// if( // Si se encuentra cerca del jugador.
++					// (player.x < sprite.x + (sprite.width * sprite.resolution) + 96) && 
++					// (player.x + (player.width * player.resolution) > sprite.x - 96) && 
++					// (player.y < sprite.y + (sprite.height * sprite.resolution) + 96) && 
++					// (player.y + (player.height * player.resolution) > sprite.y - 96)
++					// ){
++						sprite.slowmo = 5;
++						if(player.life <= 0) return;
++
++						if (player.x + (player.width * player.resolution) / 2 < sprite.x + (sprite.width * sprite.resolution) / 2){
++							sprite.x -= sprite.velocidad;
++							sprite.frameX = 2;   
++						};
++
++						if (player.x + (player.width * player.resolution) / 2 > sprite.x + (sprite.width * sprite.resolution) / 2){
++							sprite.x += sprite.velocidad;
++							sprite.frameX = 3;  
++						};
++
++						if(player.y + (player.height * player.resolution) / 2 > sprite.y + (sprite.height * sprite.resolution) / 2 && (player.x + (player.width * player.resolution) / 2 < (sprite.x + (sprite.width * sprite.resolution)/2)+72) && (player.x + (player.width * player.resolution) / 2 > (sprite.x + (sprite.width * sprite.resolution)/2)-72)){
++							sprite.y += sprite.velocidad;
++							sprite.frameX = 0;    
++						};
++
++						if((player.y + (player.height * player.resolution) / 2) + 12 < sprite.y + (sprite.height * sprite.resolution) / 2 && (player.x + (player.width * player.resolution) / 2 < (sprite.x + (sprite.width * sprite.resolution)/2)+72) && (player.x + (player.width * player.resolution) / 2 > (sprite.x + (sprite.width * sprite.resolution)/2)-72)){
++							sprite.y -= sprite.velocidad;
++							sprite.frameX = 1;  
++						};
++						
++						if ((player.y + 16 >= sprite.y && player.y + 8 < (sprite.y)) && (player.x + 8 < sprite.x + sprite.width * sprite.resolution && (player.x + player.width * player.resolution) -8 > sprite.x)) { // Hacia arriba
++							pain.play();
++							if(player.y - empujeP <= 0) {
++								player.y = canvas.height - 16;
++								return damage[efecto]();
++							}
++							damage[efecto]();
++							player.y -= empujeP;
++							
++						};
++
++						if ((player.y + 8 <= (sprite.y + sprite.height * sprite.resolution) && player.y + 16 > (sprite.y)) && (player.x + 8 < sprite.x + sprite.width * sprite.resolution && (player.x + player.width * player.resolution) -8 > sprite.x)) { // Hacia abajo
++							pain.play();
++							if(player.y + 16 + empujeP >= canvas.height) {
++								player.y = -8;
++								return damage[efecto]();
++							}
++							damage[efecto]();
++							player.y += empujeP;
++							
++						};
++
++
++						if ((player.x + 16 >= (sprite.x) && player.x + 8 <= (sprite.x + sprite.width * sprite.resolution)) && (player.y + 32 < sprite.y + sprite.width * sprite.resolution && (player.y + player.width * player.resolution) -8 > sprite.y)) { // Hacia izquierda
++							pain.play();
++							if(player.x - empujeP <= 0) {
++								player.x = canvas.width - 16;
++								return damage[efecto]();
++							}
++							damage[efecto]();
++							player.x -= empujeP;
++							
++						};
++
++						if ((player.x + 8 <= (sprite.x + sprite.width * sprite.resolution) && player.x + 16 > (sprite.x)) && (player.y + 8 < sprite.y + sprite.width * sprite.resolution && (player.y + player.width * player.resolution) -8 > sprite.y)) { // Hacia derecha
++							pain.play();
++							if(player.x + empujeP + 16 >= canvas.width) {
++								player.x = -8;
++								return damage[efecto]();
++							}
++							damage[efecto]();
++							player.x += empujeP;
++						};
++					// } else {
++					// 	sprite.random();
++					// }
++				
++				};
++
++				// Movimiento libre de un sprite
++
++				const freeMove = (sprite)=>{
++					if( // Si se encuentra cerca del jugador.
++					(player.x < sprite.x + (sprite.width * sprite.resolution) + 128) && 
++					(player.x + (player.width * player.resolution) > sprite.x - 128) && 
++					(player.y < sprite.y + (sprite.height * sprite.resolution) + 128) && 
++					(player.y + (player.height * player.resolution) > sprite.y - 128)
++					){
++						// Llamar una función que haga movimiento aleatorio.
++						sprite.random();
++					};
++					return;
++
++					// if(player.x + (player.width * player.resolution) > owl.x - 32 && owl.x >= player.x + (player.width * player.resolution)){
++					//     owl.x -= owl.velocidad;
++					// }
++
++					// if((player.y < owl.y + (owl.height * owl.resolution) + 32 && owl.y + (owl.height * owl.resolution) <= player.y)){
++					//     // Llamar una función que haga movimiento aleatorio.
++					//     owl.y += owl.velocidad;
++					// }
++
++					// if(player.y + (player.height * player.resolution) > owl.y - 32 && owl.y >= player.y + (player.height * player.resolution)){
++					//     owl.y -= owl.velocidad;
++					// }
++				};
++
++				function animacion(){ 
++					
++				if (controlAnim.checked){
++					ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
++					ctx.drawImage(mapa, x, y, mapa.width, mapa.height, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
++
++					// Acciones de los sprites
++					// attack(blueSlime);
++					// attack(skull, 'fuego', 0, 32, 16);
++					// attack(mouse, undefined, 8, 4);
++					// freeMove(owl);
++					if(player.movimiento && player.life !== 0) {
++						move();
++					};
++
++					if(bala.movimiento){ // Refactorizar para que la funcionalidad sea para cualquier npc.
++						bala.render();
++						shootHit();
++					}
++
++					
++					// if(!blueSlime.enfrente()) blueSlime.render();
++					// if(!mouse.enfrente(48)) mouse.render();
++					// if(!skull.enfrente()) skull.render();
++					player.render();
++					if(player.life === null){return;}
++					ctx.drawImage(foreground, x, y, mapa.width, mapa.height, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
++					// owl.render();
++					// if(blueSlime.enfrente()) blueSlime.render();
++					// if(mouse.enfrente(48)) mouse.render();
++					// if(skull.enfrente()) skull.render();
++					if(contador >= 5){
++						blueSlime.render();
++						attack(blueSlime, undefined, undefined, 10);
++						if(!npcActivos.includes(blueSlime)) npcActivos.push(blueSlime);
++					};
++
++					if(contador >= 30){
++						skull.render();
++						attack(skull, 'fuego', 0, 20);
++						if(!npcActivos.includes(skull)) npcActivos.push(skull);
++					};
++					
++					if(contador >= 50){
++						mouse.render();
++						attack(mouse);
++						if(!npcActivos.includes(mouse)) npcActivos.push(mouse);
++					};
++					
++					estrella.render();
++					ctx.font = '32px serif';
++					
++					ctx.fillStyle = 'black';
++					ctx.lineWidth = 1;
++					ctx.fillText(contador, 16, 32);
++
++					requestAnimationFrame(animacion); // El orden en que aparecen acá es lo que importa para que uno esté por encima del otro
++				
++					} else {
++						return;
++					}    
++					
++				}
++
++				controlMenu.addEventListener('click', ()=>{
++	
++					if(controlMenu.checked){
++						canvas.style = 'image-rendering: crisp-edges;';
++						ctx.imageSmoothingEnabled = false;
++						
++					} else {
++						canvas.style = 'image-rendering: none;';
++						ctx.imageSmoothingEnabled = true;
++						
++					};
++				})
++
++				controlAnim.addEventListener('click', ()=>{
++					if (controlAnim.checked){ 
++					animacion();
++					} else {
++						return;
++					};
++				})
++
++				document.addEventListener('keydown', (e)=>{
++					
++					// console.log(e.key)
++					if (!controlAnim.checked){return;}
++					e.preventDefault();
++					
++					if(e.key === ' '){
++						disparo();
++					};
++
++					if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown' && e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key){
++						return;
++					}
++					player.direction['ArrowLeft'] = false;
++					player.direction['ArrowUp'] = false;
++					player.direction['ArrowRight'] = false;
++					player.direction['ArrowDown'] = false;
++
++					player.movimiento = true;
++					player.direction[e.key] = true;
++
++				});
++
++				const dir = {
++						'ArrowUp': ()=>player.frameX = 1,
++						'ArrowDown': ()=>player.frameX = 0,
++						'ArrowLeft': ()=>player.frameX = 2,
++						'ArrowRight': ()=>player.frameX = 3,
++						'undefined' : ()=>player.frameX = 0,
++				}
++
++
++				// Controles
++
++				window.mobileCheck = function() {
++					let check = false;
++					(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
++					return check;
++				};
++
++				let [keyDown, keyMove, keyUp] = window.mobileCheck() ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup'];
++				
++				
++				const [a, b, up, down, left, right] = [document.querySelector('.A'), document.querySelector('.B'), document.querySelector('.ArrowUp'), document.querySelector('.ArrowDown'), document.querySelector('.ArrowLeft'), document.querySelector('.ArrowRight'),];
++				
++				a.addEventListener(keyDown, (e)=>{
++					disparo();
++				})
++
++				const pad = document.querySelector('.pad');
++				pad.addEventListener(keyDown, (e)=>{
++					if (!controlAnim.checked){return;}
++					e.preventDefault();
++	
++					if(e.target !== up && e.target !== down && e.target !== left && e.target !== right){
++						return;
++					}
++
++					// console.log(e.target.className)
++					player.direction['ArrowLeft'] = false;
++					player.direction['ArrowUp'] = false;
++					player.direction['ArrowRight'] = false;
++					player.direction['ArrowDown'] = false;
++
++					player.movimiento = true;
++					player.direction[e.target.className] = true;
++				});
++
++			}());
++
++		</script>
++	</body>
++</html>
diff --cc static/games/snake/lifebar.png
index 0000000,0000000..e0e3080
new file mode 100644
Binary files differ
diff --cc static/games/snake/map2.png
index 0000000,0000000..3fe8628
new file mode 100644
Binary files differ
diff --cc themes/droda/assets/css/main.css
index 7123971,7123971..f11ec18
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@@ -287,6 -287,6 +287,14 @@@ main span .highlight code 
     overflow-x: auto;
  }
  
++main iframe {
++   display: block;
++   margin: 0 auto;
++   width: 100%;
++   height: 100%;
++   max-width: 100vh;
++}
++
  footer {
     grid-area: footer;
     display: flex;
diff --cc themes/droda/layouts/games/single.html
index 9ab9acb,9ab9acb..71c6f75
--- a/themes/droda/layouts/games/single.html
+++ b/themes/droda/layouts/games/single.html
@@@ -1,1231 -1,1231 +1,7 @@@
--<!DOCTYPE html>
--	<html lang="es">
--	<head>
--		<meta charset="UTF-8">
--		<meta http-equiv="X-UA-Compatible" content="IE=edge">
--		<meta name="viewport" content="width=device-width, initial-scale=1.0">
--		<title>Snake Shoot!</title>
--		<style>
--
--			* {
--				padding: 0; 
--				margin: 0; 
--				box-sizing: border-box;
--			}
--
--			html {
--				width: 100%;
--				height: 100%;
--				font-size: 1vh;
--			}
--
--			body {
--				width: 100%;
--				height: 100%;
--
--				background: rgb(185, 128, 4);
--
--				overflow: hidden;
--			}
--
--			.contenedor-gameboy {
--				display: flex;
--				flex-direction: column;
--				width: 100%;
--				height: 100%;
--				position: relative;
--			}
--
--			canvas {
--				display: block;
--				width: 100vw;
--				height: 100vw;
--				max-height: 70vh;
--				max-width: 70vh;
--				margin: 0 auto;
--
--				border: 3rem solid black;
--				border-width: 1.5rem 1.5rem 3rem 1.5rem;
--				background-color: rgb(57, 60, 61);
--
--			}
--
--			.contenedor-gameboy span {
--				display: flex;
--				width: 100%;
--				flex-direction: row;
--				gap: 2vh;
--				align-items: center;
--
--				margin: 0 auto 5vh auto;
--				position: absolute;
--				inset: calc(100vh - 25vh) 0 0 0;
--
--				max-width: 75vh;
--			}
--
--			.pad {
--				position: relative;
--				width: 50%;
--				height: 25vh;
--				font-size: 2.5rem;
--			}
--			
--			.actionAB {
--				position: relative;
--				width: 50%;
--				height: 25vh;
--				font-size: 2.5rem;
--			}
--
--			#controlStart {
--				display: none;
--			}
--
--			#controlSelect {
--				display: none;
--			}
--
--			.lbl-control {
--				display: inline-block;
--				position: relative;
--				width: 6.5rem;
--				height: 2.5rem;
--				inset: 55% 0%;
--
--				border-radius: 15rem;
--				background-color: rgb(119, 112, 5);
--
--				cursor: pointer;
--				user-select: none;
--			}
--
--			.lbl-control::after {
--				position: absolute;
--				content: '';
--				inset: 0.4rem 1rem;
--
--				width: 3rem;
--				height: 1.5rem;
--
--				border-radius: 15rem;
--				background-color: rgb(45, 49, 7);
--
--			}
--
--			.lbl-controlSelect {
--				display: inline-block;
--				position: relative;
--				width: 6.5rem;
--				height: 2.5rem;
--				inset: 55% 85%;
--				
--				border-radius: 15rem;
--				background-color: rgb(119, 112, 5);
--
--				cursor: pointer;
--				user-select: none;
--			}
--
--			.lbl-controlSelect::after {
--				position: absolute;
--				content: '';
--				inset: 0.4rem 1rem;
--
--				width: 3rem;
--				height: 1.5rem;
--
--				border-radius: 15rem;
--				background-color: rgb(45, 49, 7);
--			}
--
--			#controlStart:checked~ .lbl-control::after{
--				inset: 0.4rem 2.6rem;
--			}
--
--			#controlSelect:checked~ .lbl-controlSelect::after{
--				inset: 0.4rem 2.6rem;
--			}
--
--			/* Controles */
--
--			.A, .B, .ArrowUp, .ArrowDown, .ArrowLeft, .ArrowRight {
--				position: absolute;
--				width: 8rem;
--				height: 8rem;
--
--				border-radius: 50%;
--				background-color: rgb(165, 16, 65);
--			}
--
--			.ArrowUp {
--				inset: 10% 25%;
--			}
--			.ArrowUp::after{
--				content: '';
--				position: absolute;
--				inset: 20% 13%;
--				width: 0; 
--				height: 0; 
--				border-left: 2.5rem solid transparent;
--				border-right: 2.5rem solid transparent;
--			
--  				border-bottom: 2.5rem solid rgb(36, 1, 33);
--			}
--			.ArrowDown {
--				inset: 60% 25%;
--			}
--			.ArrowDown::after{
--				content: '';
--				position: absolute;
--				inset: 35% 13%;
--				width: 0; 
--				height: 0; 
--				border-left: 2.5rem solid transparent;
--				border-right: 2.5rem solid transparent;
--				
--				border-top: 2.5rem solid rgb(36, 1, 33);
--			}
--			.ArrowLeft {
--				inset: 35% calc(25% - 6.5rem);
--			}
--			.ArrowLeft::after{
--				content: '';
--				position: absolute;
--				inset: 15% 25%;
--				width: 0; 
--				height: 0; 
--				border-top: 2.5rem solid transparent;
--				border-bottom: 2.5rem solid transparent; 
--				
--				border-right:2.5rem solid rgb(36, 1, 33); 
--			}
--			.ArrowRight {
--				inset: 35% calc(25% + 6.5rem);
--			}
--			.ArrowRight::after{
--				content: '';
--				position: absolute;
--				inset: 15% 35%;
--				width: 0; 
--				height: 0; 
--				border-top: 2.5rem solid transparent;
--				border-bottom: 2.5rem solid transparent;
--				
--				border-left: 2.5rem solid rgb(36, 1, 33);
--			}
--			.A {
--				inset: 25% calc(90% - 6.5rem);
--			}
--			.A::after {
--				content: 'A';
--				color: rgb(36, 1, 33);
--				position: absolute;
--				inset:0 14%;
--				font-weight: 700;
--				font-size: 4.4rem;
--				
--			}
--			.B {
--				inset: 40% calc(60% - 6.5rem);
--			}
--			.B::after {
--				content: 'B';
--				color: rgb(36, 1, 33);
--				position: absolute;
--				inset: 0 18%;
--				font-weight: 700;
--				font-size: 4.4rem;
--				
--			}
--
--			@media (max-width: 55vh) {
--
--				canvas {
--					min-width: 45vh;
--					min-height: 45vh;
--					margin: 0 auto;
--
--					border: none;
--					background-color: rgb(57, 60, 61);
--
--				}
--
--				.lbl-controlSelect {
--					inset: -35% 55%;
--				}
--				.lbl-control {
--					inset: -35% -20%;
--				}
--				.A {
--					inset: 25% calc(80% - 6.5rem);
--				}
--				.B {
--					inset: 40% calc(40% - 6.5rem);
--				}
--				.ArrowUp {
--				inset: 10% 35%;
--				}
--			
--				.ArrowDown {
--					inset: 60% 35%;
--				}
--			
--				.ArrowLeft {
--					inset: 35% calc(35% - 6.5rem);
--				}
--			
--				.ArrowRight {
--					inset: 35% calc(35% + 6.5rem);
--				}
--			
--			}
--
--			@media (min-width: calc(75vh + 60vh)){
--				body {
--					background: rgb(185, 128, 4);
--				}
--
--				.contenedor-gameboy {
--					flex-direction: row;
--					gap: 1rem;
--				}
--
--				canvas {
--					display: block;
--					position: relative;
--					width: 100vw;
--					height: 100vw;
--					max-height: 75vh;
--					max-width: 75vh;
--					min-width: 45vh;
--					min-height: 45vh;
--					margin: 0 auto;
--				
--					inset: 10vh 0 0 0;
--				}
--				
--				.contenedor-gameboy span {
--					display: flex;
--					flex-direction: row;
--					gap: 2vh;
--					align-items: stretch;
--
--					margin: 0;
--					position: absolute;
--					inset: calc(100vh - 25vh) 0 0 0;
--					
--					min-width: 55vh;
--					max-width: 100vw;
--				}
--				.A {
--					inset: 35% 80%;
--				}
--				.B {
--					inset: 50% 65%;
--				}
--
--			}
--		</style>
--		
--	</head>
--	<body>
--		
--		<span class="contenedor-gameboy">
--
--		
--			<canvas></canvas>
--			<span>
--				<div class="pad">
--					<div class="ArrowUp"></div>
--					<div class="ArrowDown"></div>
--					<div class="ArrowLeft"></div>
--					<div class="ArrowRight"></div>
--					<input type="checkbox" id="controlSelect"><label for="controlSelect" class="lbl-controlSelect" title="On/Off de menú"><br>Select</label>
--				</div>
--
--				<div class="actionAB">
--					<div class="A"></div>
--					<div class="B"></div>
--					<input type="checkbox" id="controlStart"><label for="controlStart" class="lbl-control" title="On/Off de animación"><br>&nbsp;Start</label>
--				</div>
--			</span>
--		
--		</span>
--
--		<script>
--			'use strict';
--			(function(){
--				const colisiones = [
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 73, 73, 73, 73, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 73, 73, 73, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 73, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 0, 0, 73, 73, 73, 73, 73, 73, 73, 73, 73, 73, 0, 0, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
--				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
--				];
--
--				let i = 0;  
--				let mapaColisiones = [];
--
--				while (i < colisiones.length){
--
--					mapaColisiones.push(colisiones.slice(i, i + 20)); // Se modifica el corte dependiendo del ancho del ancho
--					i += 20;
--				}
--
--				const controlAnim = document.querySelector('#controlStart');
--				const controlMenu = document.querySelector('#controlSelect');
--				const canvas = document.querySelector('canvas');
--				const CANVAS_WIDTH = canvas.width = 320;  
--				const CANVAS_HEIGHT = canvas.height = 320;
--				const ctx = canvas.getContext('2d');
--
--				const mapa = new Image();
--				mapa.src = './map2.png';
--				const foreground = new Image();
--				foreground.src = './foreground.png';
--
--				// SFX
--				const coin = new Audio('./Pickup_coin 10.wav');
--				coin.volume = 0.08;
--				const pain = new Audio('./Hit_hurt 192 (2).wav');
--				pain.volume = 0.05;
--				const shoot = new Audio('./Explosion 69 (2).wav');
--				shoot.volume = 0.1;
--				const hithurt = new Audio('./Hit_hurt 176 (1).wav');
--				hithurt.volume = 0.2;
--				// NPC 
--
--				class NPC{
--					constructor(start = 0, width, height, path = '', frames = 7, x = 0, y= 0, slowmo = 6, resolution = 1, velocidad = 2, life = 100, pain=2){
--						this.npcImage = new Image();
--						this.src = this.npcImage.src = path;
--						this.lifeImge = new Image();
--						this.lifeSrc = this.lifeImge.src = './lifebar.png';
--						this.width = width;
--						this.height = height;   
--						this.resolution = resolution; // Este valor sólo puede ser entero o un entero con 0.5 de decimal
--						this.frameX = start;
--						this.frameY = 0;
--						this.gameFrame = 0;
--						this.slowmotion = slowmo;
--						this.controlF = frames;
--						this.x = x;
--						this.y = y;
--						this.efecto = {
--							activo: false,
--							estado: ''
--						};
--						this.movimiento = false;
--						this.direction = {
--							'Last': undefined,
--							'ArrowUp': false,
--							'ArrowDown': false,
--							'ArrowLeft': false,
--							'ArrowRight': false
--						};
--						this.collision = false;
--						this.velocidad = velocidad;
--						this.life = life;
--						this.reload = false;
--						this.pain = pain;
--						this.hit = {
--							'0': (empuje)=>{
--								if(player.frameX === 6 || player.frameX === 1 || player.direction.Last === 'ArrowUp') {
--									this.life -= this.pain; 
--									return this.y -= empuje;
--								}
--							},
--							'1': (empuje)=>{
--								if(player.frameX === 4 || player.frameX === 0 || player.direction.Last === 'ArrowDown') {
--									this.life -= this.pain; 
--									return this.y += empuje;
--								}
--							},
--							'3': (empuje)=>{
--								if(player.frameX === 8 || player.frameX === 3 || player.direction.Last === 'ArrowLeft') {
--									this.life -= this.pain; 
--									return this.x -= empuje;
--								}
--							},
--							'2': (empuje)=>{
--								if(player.frameX === 7 || player.frameX === 2 || player.direction.Last === 'ArrowRight') {
--									this.life -= this.pain; 
--									return this.x += empuje;
--								}
--							},
--							'undefined': ()=> {return;},
--							' ': ()=>{return;}
--						};
--						this.fx = undefined;
--						this.offsetMapX = 0;
--						this.offsetMapY = 0;
--					}
--					
--					hitbox(vel, empuje){
--						
--						if(player.x - 24 < this.x + 16 && player.y + 88 > this.y && player.x + 88 > this.x && player.y - 20 < this.y + 16){
--
--							if(this.life && !player.efecto.activo){
--										this.velocidad = vel;
--										player.reload = true;
--										this.hit[this.frameX](empuje);
--										return setTimeout(() => {
--											player.reload = false;
--										}, 400);
--									};
--								return;
--						} else {return setTimeout(() => {
--							player.fx = undefined
--							player.reload = false;
--						}, 700)};
--					}
--
--					enfrente(lineaMedia = 32){ // Para renderizar adelante o atrás de un sprite
--						if(this.y >= player.y + lineaMedia) return true;
--						else return false;
--					}
--
--					colision(x = player.x, y = player.y, objetivo = player){ // Esto es para los sprites que no atacan y puedan pararse ante colisiones.
--
--					
--						if(this.x <= x + (objetivo.width * objetivo.resolution - 16) && this.x + (this.width * this.resolution ) >= x + 16 && this.y <= y + (objetivo.height * objetivo.resolution - 24) && this.y + (this.height * this.resolution) >= y + 32) {
--							return true;
--						} else {
--							return false;
--						}
--					}
--
--					random(){
--						if(this.colision()) {return;} 
--						// Acá es donde los sprites se quedan quietos si se encuentran con el jugador.
--
--						this.slowmotion = 7;
--						if(this.gameFrame % 30 === 0){
--							switch (Math.trunc(Math.random() * 10 / 2)) {
--								case 0:
--									this.frameX = 2;
--									this.x -= 2;
--									if(player.frameX === 1) this.y -= 2;
--									
--									break;
--								case 1:
--									this.frameX = 3;
--									this.x += 2;
--									if(player.frameX === 0) this.y += 2;
--									
--									break;
--								case 2:
--									this.frameX = 0;
--									this.y += 2;
--									if(player.frameX === 3) this.x += 2;
--									
--									break;
--								case 3:
--									this.frameX = 1;
--									this.y -= 2;
--									if(player.frameX === 2) this.x -= 2
--									
--									break;
--								case 4:
--									// this.frameX = 4; // Falta hacer el estado de espera
--									break;
--								default:
--									break;
--							}
--						}
--						
--					};
--
--					render() {
--
--						/*
--						Img - Imagen para renderizar
--						Posición en X de la imagen
--						Posición en Y de la imagen
--						Ancho de la imagen que se utilizará
--						Largo de la imagen que se utilizará 
--						Posición en X del canvas que se renderizará
--						Posición en Y del canvas que se renderizará 
--						Ancho que ocupará
--						Largo que ocupará 
--						*/ 
--
--						if(this.life <= 0 && this.life !== null){ // Bloque que se encarga de no renderizar más el sprite cuando no tiene vida
--							this.x, this.y = undefined;
--							this.life = null;
--	
--							if(this === player){
--								controlAnim.checked = false;
--								ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
--								return ctx.fillText(`Score: ${contador}`, CANVAS_WIDTH / 2 - 48, CANVAS_WIDTH / 2 - 16);
--							}
--
--							if(this !== player) { // Se le agrega vida extra al jugador una vez que ha matado al sprite
--								player.life += 5;
--								contador += this.velocidad * 10;
--								if(player.life > 100) player.life = 100;
--								setTimeout(()=>{
--									this.life = 100;
--									this.x = Math.trunc(Math.random() * (canvas.width - 16)); 
--									this.y = Math.trunc(Math.random() * (canvas.height - 16)); 
--								}, this.pain * 1000);
--								// player.fx = renderFx.bind(corazon);
--							};
--							return setTimeout(() => {
--								this.fx = undefined;
--							}, 2000);
--						} else if (this.life !== null){
--							ctx.font = '12px serif';
--							ctx.strokeText(this.life, this.x + this.width - this.offsetMapX, this.y - this.offsetMapY);
--						};
--
--						if(this.efecto.activo){ // Bloque para renderizar los efectos de un estado provocado por slime (fuego, electrico, empuje normal)
--							this.slowmotion = 4;
--							switch (this.efecto.estado) {
--								case 'electrico':
--									this.frameX = 9;
--									break;
--								case 'fuego':
--									this.frameX = 5;
--									break;
--								default:
--									break;
--							}
--						}
--
--
--						// Bloque para visualizar la barra de vida
--
--						if(this.life === 100) ctx.drawImage(this.lifeImge, 0, 0, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--						if(this.life <100 && this.life >= 90) ctx.drawImage(this.lifeImge, 0, 8, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--						if(this.life <90 && this.life >= 80) ctx.drawImage(this.lifeImge, 0, 16, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--						if(this.life <80 && this.life >= 70) ctx.drawImage(this.lifeImge, 0, 24, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--						if(this.life <70 && this.life >= 60) ctx.drawImage(this.lifeImge, 0, 32, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--						if(this.life <60 && this.life >= 50) ctx.drawImage(this.lifeImge, 0, 40, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--						if(this.life <50 && this.life >= 40) ctx.drawImage(this.lifeImge, 0, 48, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--						if(this.life <40 && this.life >= 30) ctx.drawImage(this.lifeImge, 0, 56, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--						if(this.life <30 && this.life >= 20) ctx.drawImage(this.lifeImge, 0, 64, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--						if(this.life <20 && this.life >= 1) ctx.drawImage(this.lifeImge, 0, 72, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
--
--
--						ctx.drawImage(this.npcImage, this.frameX * this.width, this.frameY * this.height, this.width, this.height, this.x - this.offsetMapX, this.y - this.offsetMapY, this.width * this.resolution, this.height * this.resolution);
--						
--						// Renderizar la estrella.
--
--			
--
--						// Acá es donde se renderiza la imagen, se renderiza después porque estos efectos están pensados para ir encima del sprite al cual están unidos.
--						if(this.fx !== undefined) {
--							this.fx();
--						};
--
--
--						if (this.gameFrame % this.slowmotion === 0) { 
--							if (this.frameY < this.controlF) { // Control de los frames
--								this.frameY++;
--							} else {
--								this.frameY = 0;
--							};
--						};
--							
--						this.gameFrame++;
--
--						
--
--					};
--				};
--
--				const move = ()=>{
--					if(player.life === null) return;
--					player.slowmotion = 6;
--					if(player.direction.ArrowUp) {
--						// Acá es donde debo poner la colisión con algún sprite
--						
--						player.frameX = 1;
--						if(player.y + 8 <= estrella.y + 16 && player.y + 8 > estrella.y && (player.x + 16 > estrella.x && player.x < estrella.x + 16)){
--							coin.play();
--							// Haz que la gema pase a otro lado.
--							contador += puntos;
--							randEstrella();
--						}
--
--						if(player.y + 8 <= 0) {return player.y = canvas.height - 16;}
--						if(mapaColisiones[Math.trunc((player.y) / 16)][Math.trunc((player.x + 8) / 16)] === 73){return player.movimiento = false;}
--						player.y -= paso;
--					}
--							
--					if(player.direction.ArrowDown){
--						
--						player.frameX = 0;
--						if(player.y + 16 >= estrella.y  && player.y < estrella.y && (player.x + 16 > estrella.x && player.x < estrella.x + 16)){
--							coin.play();
--							contador += puntos;
--							randEstrella();
--						}
--						
--						if(player.y + 16 >= canvas.height) {return player.y = -8;}
--						if(mapaColisiones[Math.trunc((player.y + 16 ) / 16)][Math.trunc((player.x + 8) / 16)] === 73){return player.movimiento = false;}
--						player.y += paso;
--					}
--
--					if(player.direction.ArrowLeft){
--						
--						player.frameX = 2;
--						if(player.x + 8 <= estrella.x + 16 && player.x + 8 > estrella.x && (player.y + 16 > estrella.y && player.y < estrella.y + 16)){
--							coin.play();
--							contador += puntos;
--							randEstrella();
--						}
--						if(player.x + 8 <= 0) {return player.x = canvas.width - 16;}
--						if(mapaColisiones[Math.trunc((player.y + 8) / 16)][Math.trunc((player.x) / 16)] === 73){return player.movimiento = false;}
--						player.x -= paso;
--					}
--							
--					if(player.direction.ArrowRight){
--						
--						player.frameX = 3;
--						if(player.x + 8 >= estrella.x  && player.x < estrella.x && (player.y + 16 > estrella.y && player.y < estrella.y + 16)){
--							coin.play();
--							contador += puntos;
--							randEstrella();
--						}
--						if(player.x + 16 >= canvas.width) {return player.x = -8;}
--						if(mapaColisiones[Math.trunc((player.y + 8) / 16)][Math.trunc((player.x + 16) / 16)] === 73){return player.movimiento = false;}
--						player.x += paso;
--					}
--				};
--
--
--				let [x,y,contador, puntos] = [0,0,0,1];
--				let paso = 1;
--				
--				// const marcador = (function () {
--				// 	let contador = 0; // private variable
--				// 	return {
--				// 		set setCount(valida){
--				// 			contador++;
--				// 		},
--				// 		get getCount(){
--				// 			return contador;
--				// 		}
--				// 	};
--				// }());
--
--				// Jugador principal
--				const player = new NPC(undefined, 16, 16, './Snake2.png', 3, 4 * 25, 4 * 25, 8, 1, 1, 100, 10);
--				const estrella = new NPC(undefined, 16, 16, './gema.png', 3, 4 * 57, 4 * 70, 10, 1, 0, null, undefined);
--
--				const randEstrella = ()=>{
--					if(contador >= 20){
--						puntos = 2;
--						estrella.npcImage.src = './gema2.png';
--					};
--							
--					if(contador >= 50){
--						puntos = 5;
--						estrella.npcImage.src = './gema3.png';
--					};
--
--					if(contador >= 100){
--						puntos = 10;
--						estrella.npcImage.src = './gema4.png';
--				
--					};
--
--					return estrella.x = Math.trunc(Math.random() * (canvas.width - 16)), estrella.y = Math.trunc(Math.random() * (canvas.height - 16)); 
--				};
--
--				// Objetcs
--
--				const bala = new NPC(undefined, 8, 8, './disparo.png', 3, 0, 0, 5, 1, 3, null);
--
--				function disparo(){
--					
--					if(player.life === null || bala.movimiento === true) return;
--					bala.movimiento = true;
--					if(player.direction.ArrowUp) {
--						// Acá es donde debo poner la colisión con algún sprite
--						
--						bala.frameX = 0;
--						bala.x = player.x + 4; // Bala centrada
--						bala.y = player.y - 4;
--						shoot.play();
--					}
--							
--					if(player.direction.ArrowDown){
--						
--						bala.frameX = 1;
--						bala.x = player.x + 2;
--						bala.y = player.y + 12;
--						shoot.play();
--					}
--
--					if(player.direction.ArrowLeft){
--						
--						bala.frameX = 3;
--						bala.x = player.x;
--						bala.y = player.y + 4;
--						shoot.play();
--					}
--							
--					if(player.direction.ArrowRight){
--						
--						bala.frameX = 2;
--						bala.x = player.x + 12;
--						bala.y = player.y + 4;
--						shoot.play();
--					}
--				
--				}
--
--				let npcActivos = [];
--
--				function shootHit(){
--					if(npcActivos.length !== 0) {
--						npcActivos.forEach(sprite => {
--
--							switch (bala.frameX) {
--								case 0: // Arriba
--									if((bala.y <= sprite.y + sprite.height && bala.y > sprite.y) && (bala.x + bala.width > sprite.x && bala.x < sprite.x + sprite.width)){
--										bala.y = player.y
--										bala.movimiento = false;
--										shoot.pause();
--										shoot.currentTime = 0;
--										sprite.life -= sprite.pain;
--										sprite.y -= 24;
--										hithurt.play();// Reproducir un sonido de golpe.
--										// console.log('le pegaste');
--									}
--
--									if(bala.y <= 0){
--										bala.y = player.y
--										bala.movimiento = false;
--										// console.log('murio la bala')
--										shoot.pause();
--										shoot.currentTime = 0;
--									}
--									bala.y -= bala.velocidad;
--									break;
--
--								case 1: // Abajo
--									if((bala.y + bala.height >= sprite.y && bala.y + bala.height < sprite.y + sprite.height) && (bala.x + bala.width > sprite.x && bala.x < sprite.x + sprite.width)){
--										bala.y = player.y
--										bala.movimiento = false;
--										shoot.pause();
--										shoot.currentTime = 0;
--										sprite.life -= sprite.pain;
--										sprite.y += 24;
--										hithurt.play();
--										// console.log('le pegaste');
--									}
--
--									if(bala.y >= canvas.height){
--										bala.y = player.y
--										bala.movimiento = false;
--										// console.log('murio la bala')
--										shoot.pause();
--										shoot.currentTime = 0;
--									}
--									bala.y += bala.velocidad;
--									break;
--									
--								case 2: // Derecha
--									if((bala.x + bala.width >= sprite.x && bala.x + bala.width < sprite.x + sprite.width) && (bala.y + bala.height > sprite.y && bala.y < sprite.y + sprite.height)){
--										bala.y = player.y
--										bala.movimiento = false;
--										shoot.pause();
--										shoot.currentTime = 0;
--										sprite.life -= sprite.pain;
--										sprite.x += 24;
--										hithurt.play();
--										// console.log('le pegaste');
--									}
--
--									if(bala.x >= canvas.width){
--										bala.y = player.x
--										bala.movimiento = false;
--										// console.log('murio la bala')
--										shoot.pause();
--										shoot.currentTime = 0;
--									}
--									bala.x += bala.velocidad;
--									break;
--
--								case 3: // Izquierda
--									if((bala.x <= sprite.x + sprite.width && bala.x > sprite.x) && (bala.y + bala.height > sprite.y && bala.y < sprite.y + sprite.height)){
--										bala.y = player.y
--										bala.movimiento = false;
--										shoot.pause();
--										shoot.currentTime = 0;
--										sprite.life -= sprite.pain;
--										sprite.x -= 24;
--										hithurt.play();
--										// console.log('le pegaste');
--									}
--
--									if(bala.x <= 0){
--										bala.y = player.x
--										bala.movimiento = false;
--										// console.log('murio la bala')
--										shoot.pause();
--										shoot.currentTime = 5;
--									}
--									bala.x -= bala.velocidad;
--									break;
--								default:
--									break;
--							};
--						});
--					} else {
--						switch (bala.frameX) {
--							case 0: // Arriba
--								
--								if(bala.y <= 0){
--									bala.y = player.y
--									bala.movimiento = false;
--									// console.log('murio la bala')
--									shoot.pause();
--									shoot.currentTime = 0;
--								}
--								bala.y -= bala.velocidad;
--								break;
--
--							case 1: // Abajo
--								
--								if(bala.y >= canvas.height){
--									bala.y = player.y
--									bala.movimiento = false;
--									// console.log('murio la bala')
--									shoot.pause();
--									shoot.currentTime = 0;
--								}
--								bala.y += bala.velocidad;
--								break;
--								
--							case 2: // Derecha
--								
--								if(bala.x >= canvas.width){
--									bala.y = player.x
--									bala.movimiento = false;
--									// console.log('murio la bala')
--									shoot.pause();
--									shoot.currentTime = 0;
--								}
--								bala.x += bala.velocidad;
--								break;
--
--							case 3: // Izquierda
--								
--								if(bala.x <= 0){
--									bala.y = player.x
--									bala.movimiento = false;
--									// console.log('murio la bala')
--									shoot.pause();
--									shoot.currentTime = 5;
--								}
--								bala.x -= bala.velocidad;
--								break;
--							default:
--								break;
--						};
--					}
--				}
--
--				// Slimes
--
--				const blueSlime = new NPC(undefined, 32, 32,'./Slime.png', 3, 4*12, 4*30, 7, 1, 0.4, undefined, 8);
--				const skull = new NPC(undefined, 32, 32, './Skull.png', 3, 4 * 10, 4 * 20, 6, 1, 0.6, undefined, 2);
--				// const owl = new NPC(undefined, 32, 32, './Slimes/Owl.png', 3, 4 * 50, 4 * 10, 15, 0.5, 0.2, null);
--				const mouse = new NPC(undefined, 16, 16, './Mouse.png', 3, 4 * 25, 4 * 25, 6, 1, 0.8, 100, 5);
--
--				/* Comportamiento de los slimes */
--
--				const damage = {
--					'': ()=>{player.life -= 2},
--					'fuego': ()=>{player.life -= 5},
--					'electrico': ()=>{player.life -= 10}
--				}
--
--				// Ataque de los slimes
--
--				const attack = (sprite, efecto='', empujeS = 8, empujeP = 4)=>{
--					// if( // Si se encuentra cerca del jugador.
--					// (player.x < sprite.x + (sprite.width * sprite.resolution) + 96) && 
--					// (player.x + (player.width * player.resolution) > sprite.x - 96) && 
--					// (player.y < sprite.y + (sprite.height * sprite.resolution) + 96) && 
--					// (player.y + (player.height * player.resolution) > sprite.y - 96)
--					// ){
--						sprite.slowmo = 5;
--						if(player.life <= 0) return;
--
--						if (player.x + (player.width * player.resolution) / 2 < sprite.x + (sprite.width * sprite.resolution) / 2){
--							sprite.x -= sprite.velocidad;
--							sprite.frameX = 2;   
--						};
--
--						if (player.x + (player.width * player.resolution) / 2 > sprite.x + (sprite.width * sprite.resolution) / 2){
--							sprite.x += sprite.velocidad;
--							sprite.frameX = 3;  
--						};
--
--						if(player.y + (player.height * player.resolution) / 2 > sprite.y + (sprite.height * sprite.resolution) / 2 && (player.x + (player.width * player.resolution) / 2 < (sprite.x + (sprite.width * sprite.resolution)/2)+72) && (player.x + (player.width * player.resolution) / 2 > (sprite.x + (sprite.width * sprite.resolution)/2)-72)){
--							sprite.y += sprite.velocidad;
--							sprite.frameX = 0;    
--						};
--
--						if((player.y + (player.height * player.resolution) / 2) + 12 < sprite.y + (sprite.height * sprite.resolution) / 2 && (player.x + (player.width * player.resolution) / 2 < (sprite.x + (sprite.width * sprite.resolution)/2)+72) && (player.x + (player.width * player.resolution) / 2 > (sprite.x + (sprite.width * sprite.resolution)/2)-72)){
--							sprite.y -= sprite.velocidad;
--							sprite.frameX = 1;  
--						};
--						
--						if ((player.y + 16 >= sprite.y && player.y + 8 < (sprite.y)) && (player.x + 8 < sprite.x + sprite.width * sprite.resolution && (player.x + player.width * player.resolution) -8 > sprite.x)) { // Hacia arriba
--							pain.play();
--							if(player.y - empujeP <= 0) {
--								player.y = canvas.height - 16;
--								return damage[efecto]();
--							}
--							damage[efecto]();
--							player.y -= empujeP;
--							
--						};
--
--						if ((player.y + 8 <= (sprite.y + sprite.height * sprite.resolution) && player.y + 16 > (sprite.y)) && (player.x + 8 < sprite.x + sprite.width * sprite.resolution && (player.x + player.width * player.resolution) -8 > sprite.x)) { // Hacia abajo
--							pain.play();
--							if(player.y + 16 + empujeP >= canvas.height) {
--								player.y = -8;
--								return damage[efecto]();
--							}
--							damage[efecto]();
--							player.y += empujeP;
--							
--						};
--
--
--						if ((player.x + 16 >= (sprite.x) && player.x + 8 <= (sprite.x + sprite.width * sprite.resolution)) && (player.y + 32 < sprite.y + sprite.width * sprite.resolution && (player.y + player.width * player.resolution) -8 > sprite.y)) { // Hacia izquierda
--							pain.play();
--							if(player.x - empujeP <= 0) {
--								player.x = canvas.width - 16;
--								return damage[efecto]();
--							}
--							damage[efecto]();
--							player.x -= empujeP;
--							
--						};
--
--						if ((player.x + 8 <= (sprite.x + sprite.width * sprite.resolution) && player.x + 16 > (sprite.x)) && (player.y + 8 < sprite.y + sprite.width * sprite.resolution && (player.y + player.width * player.resolution) -8 > sprite.y)) { // Hacia derecha
--							pain.play();
--							if(player.x + empujeP + 16 >= canvas.width) {
--								player.x = -8;
--								return damage[efecto]();
--							}
--							damage[efecto]();
--							player.x += empujeP;
--						};
--					// } else {
--					// 	sprite.random();
--					// }
--				
--				};
--
--				// Movimiento libre de un sprite
--
--				const freeMove = (sprite)=>{
--					if( // Si se encuentra cerca del jugador.
--					(player.x < sprite.x + (sprite.width * sprite.resolution) + 128) && 
--					(player.x + (player.width * player.resolution) > sprite.x - 128) && 
--					(player.y < sprite.y + (sprite.height * sprite.resolution) + 128) && 
--					(player.y + (player.height * player.resolution) > sprite.y - 128)
--					){
--						// Llamar una función que haga movimiento aleatorio.
--						sprite.random();
--					};
--					return;
--
--					// if(player.x + (player.width * player.resolution) > owl.x - 32 && owl.x >= player.x + (player.width * player.resolution)){
--					//     owl.x -= owl.velocidad;
--					// }
--
--					// if((player.y < owl.y + (owl.height * owl.resolution) + 32 && owl.y + (owl.height * owl.resolution) <= player.y)){
--					//     // Llamar una función que haga movimiento aleatorio.
--					//     owl.y += owl.velocidad;
--					// }
--
--					// if(player.y + (player.height * player.resolution) > owl.y - 32 && owl.y >= player.y + (player.height * player.resolution)){
--					//     owl.y -= owl.velocidad;
--					// }
--				};
--
--				function animacion(){ 
--					
--				if (controlAnim.checked){
--					ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
--					ctx.drawImage(mapa, x, y, mapa.width, mapa.height, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
--
--					// Acciones de los sprites
--					// attack(blueSlime);
--					// attack(skull, 'fuego', 0, 32, 16);
--					// attack(mouse, undefined, 8, 4);
--					// freeMove(owl);
--					if(player.movimiento && player.life !== 0) {
--						move();
--					};
--
--					if(bala.movimiento){ // Refactorizar para que la funcionalidad sea para cualquier npc.
--						bala.render();
--						shootHit();
--					}
--
--					
--					// if(!blueSlime.enfrente()) blueSlime.render();
--					// if(!mouse.enfrente(48)) mouse.render();
--					// if(!skull.enfrente()) skull.render();
--					player.render();
--					if(player.life === null){return;}
--					ctx.drawImage(foreground, x, y, mapa.width, mapa.height, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
--					// owl.render();
--					// if(blueSlime.enfrente()) blueSlime.render();
--					// if(mouse.enfrente(48)) mouse.render();
--					// if(skull.enfrente()) skull.render();
--					if(contador >= 5){
--						blueSlime.render();
--						attack(blueSlime, undefined, undefined, 10);
--						if(!npcActivos.includes(blueSlime)) npcActivos.push(blueSlime);
--					};
--
--					if(contador >= 30){
--						skull.render();
--						attack(skull, 'fuego', 0, 20);
--						if(!npcActivos.includes(skull)) npcActivos.push(skull);
--					};
--					
--					if(contador >= 50){
--						mouse.render();
--						attack(mouse);
--						if(!npcActivos.includes(mouse)) npcActivos.push(mouse);
--					};
--					
--					estrella.render();
--					ctx.font = '32px serif';
--					
--					ctx.fillStyle = 'black';
--					ctx.lineWidth = 1;
--					ctx.fillText(contador, 16, 32);
--
--					requestAnimationFrame(animacion); // El orden en que aparecen acá es lo que importa para que uno esté por encima del otro
--				
--					} else {
--						return;
--					}    
--					
--				}
--
--				controlMenu.addEventListener('click', ()=>{
--	
--					if(controlMenu.checked){
--						canvas.style = 'image-rendering: crisp-edges;';
--						ctx.imageSmoothingEnabled = false;
--						
--					} else {
--						canvas.style = 'image-rendering: none;';
--						ctx.imageSmoothingEnabled = true;
--						
--					};
--				})
--
--				controlAnim.addEventListener('click', ()=>{
--					if (controlAnim.checked){ 
--					animacion();
--					} else {
--						return;
--					};
--				})
--
--				document.addEventListener('keydown', (e)=>{
--					
--					// console.log(e.key)
--					if (!controlAnim.checked){return;}
--					e.preventDefault();
--					
--					if(e.key === ' '){
--						disparo();
--					};
--
--					if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown' && e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key){
--						return;
--					}
--					player.direction['ArrowLeft'] = false;
--					player.direction['ArrowUp'] = false;
--					player.direction['ArrowRight'] = false;
--					player.direction['ArrowDown'] = false;
--
--					player.movimiento = true;
--					player.direction[e.key] = true;
--
--				});
--
--				const dir = {
--						'ArrowUp': ()=>player.frameX = 1,
--						'ArrowDown': ()=>player.frameX = 0,
--						'ArrowLeft': ()=>player.frameX = 2,
--						'ArrowRight': ()=>player.frameX = 3,
--						'undefined' : ()=>player.frameX = 0,
--				}
--
--
--				// Controles
--
--				window.mobileCheck = function() {
--					let check = false;
--					(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
--					return check;
--				};
--
--				let [keyDown, keyMove, keyUp] = window.mobileCheck() ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup'];
--				
--				
--				const [a, b, up, down, left, right] = [document.querySelector('.A'), document.querySelector('.B'), document.querySelector('.ArrowUp'), document.querySelector('.ArrowDown'), document.querySelector('.ArrowLeft'), document.querySelector('.ArrowRight'),];
--				
--				a.addEventListener(keyDown, (e)=>{
--					disparo();
--				})
--
--				const pad = document.querySelector('.pad');
--				pad.addEventListener(keyDown, (e)=>{
--					if (!controlAnim.checked){return;}
--					e.preventDefault();
--	
--					if(e.target !== up && e.target !== down && e.target !== left && e.target !== right){
--						return;
--					}
--
--					// console.log(e.target.className)
--					player.direction['ArrowLeft'] = false;
--					player.direction['ArrowUp'] = false;
--					player.direction['ArrowRight'] = false;
--					player.direction['ArrowDown'] = false;
--
--					player.movimiento = true;
--					player.direction[e.target.className] = true;
--				});
--
--			}());
--
--		</script>
--	</body>
--</html>
++{{ define "main" }}
++{{ "<!-- Layout para el acerca de ... -->" | safeHTML }}
++<main>
++  <h2>{{ .Title }}</h2>
++	<iframe src="{{ .Params.iframe }}" frameborder="1"></iframe>
++</main>
++{{ end }}