From: VladImpaler <fake@email.com>
Date: Mon, 24 Apr 2023 23:23:18 +0000 (-0600)
Subject: Added the first example of html5 based game, snake shoot!, as well as the layout... 
X-Git-Url: https://git.josue.xyz/?a=commitdiff_plain;h=65f3c3f663ff0982b6b50c2c31388ef16a0c79c9;p=salamandradevs.site%2F.git

Added the first example of html5 based game, snake shoot!, as well as the layout, pending to get it markdown for every listed game in the future
---

diff --git a/content/games/metroidvania.md b/content/games/metroidvania.md
deleted file mode 100644
index 6bd9bf7..0000000
--- a/content/games/metroidvania.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: METROIDVANIA
-description: Juego hecho colaborativamenteaslkdjfasdaasdfasdhfkajdshfkasjdhfkajsdhf ajd fkas dhfkja dhkfja sdhkfa ksdj fhakdsfkajds hfkasd
----
-
-Juego de snake hecho por @VladImpaler64
\ No newline at end of file
diff --git a/content/games/pacman.md b/content/games/pacman.md
deleted file mode 100644
index 03acf2d..0000000
--- a/content/games/pacman.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: PACMAN
-description: Juego hecho clásico de pacman, atrapa los fantasmas
-image: images/games/pato.svg
----
-Juego de snake hecho por @VladImpaler64
\ No newline at end of file
diff --git a/content/games/snake.md b/content/games/snake.md
index d2dbe4a..d048246 100644
--- a/content/games/snake.md
+++ b/content/games/snake.md
@@ -1,6 +1,5 @@
 ---
 title: SNAKE GAME
-description: Juego hecho colaborativamente
----
-
-Juego de snake hecho por @VladImpaler64
\ No newline at end of file
+description: Juego de la viborita con disparos, hecho por @VladImpaler64
+image: /images/games/pato.svg
+---
\ No newline at end of file
diff --git a/content/games/snake/Explosion 69 (2).wav b/content/games/snake/Explosion 69 (2).wav
new file mode 100644
index 0000000..2ec91aa
Binary files /dev/null and b/content/games/snake/Explosion 69 (2).wav differ
diff --git a/content/games/snake/Hit_hurt 176 (1).wav b/content/games/snake/Hit_hurt 176 (1).wav
new file mode 100644
index 0000000..256b2a5
Binary files /dev/null and b/content/games/snake/Hit_hurt 176 (1).wav differ
diff --git a/content/games/snake/Hit_hurt 192 (2).wav b/content/games/snake/Hit_hurt 192 (2).wav
new file mode 100644
index 0000000..93cdc52
Binary files /dev/null and b/content/games/snake/Hit_hurt 192 (2).wav differ
diff --git a/content/games/snake/Mouse.png b/content/games/snake/Mouse.png
new file mode 100644
index 0000000..93154a3
Binary files /dev/null and b/content/games/snake/Mouse.png differ
diff --git a/content/games/snake/Pickup_coin 10.wav b/content/games/snake/Pickup_coin 10.wav
new file mode 100644
index 0000000..560e15a
Binary files /dev/null and b/content/games/snake/Pickup_coin 10.wav differ
diff --git a/content/games/snake/Skull.png b/content/games/snake/Skull.png
new file mode 100644
index 0000000..f2f8751
Binary files /dev/null and b/content/games/snake/Skull.png differ
diff --git a/content/games/snake/Slime.png b/content/games/snake/Slime.png
new file mode 100644
index 0000000..df633b1
Binary files /dev/null and b/content/games/snake/Slime.png differ
diff --git a/content/games/snake/Snake2.png b/content/games/snake/Snake2.png
new file mode 100644
index 0000000..f279c4a
Binary files /dev/null and b/content/games/snake/Snake2.png differ
diff --git a/content/games/snake/disparo.png b/content/games/snake/disparo.png
new file mode 100644
index 0000000..9959228
Binary files /dev/null and b/content/games/snake/disparo.png differ
diff --git a/content/games/snake/foreground.png b/content/games/snake/foreground.png
new file mode 100644
index 0000000..ee98e73
Binary files /dev/null and b/content/games/snake/foreground.png differ
diff --git a/content/games/snake/gema.png b/content/games/snake/gema.png
new file mode 100644
index 0000000..a997005
Binary files /dev/null and b/content/games/snake/gema.png differ
diff --git a/content/games/snake/gema2.png b/content/games/snake/gema2.png
new file mode 100644
index 0000000..010a777
Binary files /dev/null and b/content/games/snake/gema2.png differ
diff --git a/content/games/snake/gema3.png b/content/games/snake/gema3.png
new file mode 100644
index 0000000..7870490
Binary files /dev/null and b/content/games/snake/gema3.png differ
diff --git a/content/games/snake/gema4.png b/content/games/snake/gema4.png
new file mode 100644
index 0000000..ee6d566
Binary files /dev/null and b/content/games/snake/gema4.png differ
diff --git a/content/games/snake/lifebar.png b/content/games/snake/lifebar.png
new file mode 100644
index 0000000..e0e3080
Binary files /dev/null and b/content/games/snake/lifebar.png differ
diff --git a/content/games/snake/map2.png b/content/games/snake/map2.png
new file mode 100644
index 0000000..3fe8628
Binary files /dev/null and b/content/games/snake/map2.png differ
diff --git a/themes/droda/layouts/games/single.html b/themes/droda/layouts/games/single.html
new file mode 100644
index 0000000..9ab9acb
--- /dev/null
+++ b/themes/droda/layouts/games/single.html
@@ -0,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 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>
\ No newline at end of file