themes/droda/layouts/games/single.html

   1 <!DOCTYPE html>
   2         <html lang="es">
   3         <head>
   4                 <meta charset="UTF-8">
   5                 <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7                 <title>Snake Shoot!</title>
   8                 <style>
   9
  10                         * {
  11                                 padding: 0;
  12                                 margin: 0;
  13                                 box-sizing: border-box;
  14                         }
  15
  16                         html {
  17                                 width: 100%;
  18                                 height: 100%;
  19                                 font-size: 1vh;
  20                         }
  21
  22                         body {
  23                                 width: 100%;
  24                                 height: 100%;
  25
  26                                 background: rgb(185, 128, 4);
  27
  28                                 overflow: hidden;
  29                         }
  30
  31                         .contenedor-gameboy {
  32                                 display: flex;
  33                                 flex-direction: column;
  34                                 width: 100%;
  35                                 height: 100%;
  36                                 position: relative;
  37                         }
  38
  39                         canvas {
  40                                 display: block;
  41                                 width: 100vw;
  42                                 height: 100vw;
  43                                 max-height: 70vh;
  44                                 max-width: 70vh;
  45                                 margin: 0 auto;
  46
  47                                 border: 3rem solid black;
  48                                 border-width: 1.5rem 1.5rem 3rem 1.5rem;
  49                                 background-color: rgb(57, 60, 61);
  50
  51                         }
  52
  53                         .contenedor-gameboy span {
  54                                 display: flex;
  55                                 width: 100%;
  56                                 flex-direction: row;
  57                                 gap: 2vh;
  58                                 align-items: center;
  59
  60                                 margin: 0 auto 5vh auto;
  61                                 position: absolute;
  62                                 inset: calc(100vh - 25vh) 0 0 0;
  63
  64                                 max-width: 75vh;
  65                         }
  66
  67                         .pad {
  68                                 position: relative;
  69                                 width: 50%;
  70                                 height: 25vh;
  71                                 font-size: 2.5rem;
  72                         }
  73
  74                         .actionAB {
  75                                 position: relative;
  76                                 width: 50%;
  77                                 height: 25vh;
  78                                 font-size: 2.5rem;
  79                         }
  80
  81                         #controlStart {
  82                                 display: none;
  83                         }
  84
  85                         #controlSelect {
  86                                 display: none;
  87                         }
  88
  89                         .lbl-control {
  90                                 display: inline-block;
  91                                 position: relative;
  92                                 width: 6.5rem;
  93                                 height: 2.5rem;
  94                                 inset: 55% 0%;
  95
  96                                 border-radius: 15rem;
  97                                 background-color: rgb(119, 112, 5);
  98
  99                                 cursor: pointer;
 100                                 user-select: none;
 101                         }
 102
 103                         .lbl-control::after {
 104                                 position: absolute;
 105                                 content: '';
 106                                 inset: 0.4rem 1rem;
 107
 108                                 width: 3rem;
 109                                 height: 1.5rem;
 110
 111                                 border-radius: 15rem;
 112                                 background-color: rgb(45, 49, 7);
 113
 114                         }
 115
 116                         .lbl-controlSelect {
 117                                 display: inline-block;
 118                                 position: relative;
 119                                 width: 6.5rem;
 120                                 height: 2.5rem;
 121                                 inset: 55% 85%;
 122
 123                                 border-radius: 15rem;
 124                                 background-color: rgb(119, 112, 5);
 125
 126                                 cursor: pointer;
 127                                 user-select: none;
 128                         }
 129
 130                         .lbl-controlSelect::after {
 131                                 position: absolute;
 132                                 content: '';
 133                                 inset: 0.4rem 1rem;
 134
 135                                 width: 3rem;
 136                                 height: 1.5rem;
 137
 138                                 border-radius: 15rem;
 139                                 background-color: rgb(45, 49, 7);
 140                         }
 141
 142                         #controlStart:checked~ .lbl-control::after{
 143                                 inset: 0.4rem 2.6rem;
 144                         }
 145
 146                         #controlSelect:checked~ .lbl-controlSelect::after{
 147                                 inset: 0.4rem 2.6rem;
 148                         }
 149
 150                         /* Controles */
 151
 152                         .A, .B, .ArrowUp, .ArrowDown, .ArrowLeft, .ArrowRight {
 153                                 position: absolute;
 154                                 width: 8rem;
 155                                 height: 8rem;
 156
 157                                 border-radius: 50%;
 158                                 background-color: rgb(165, 16, 65);
 159                         }
 160
 161                         .ArrowUp {
 162                                 inset: 10% 25%;
 163                         }
 164                         .ArrowUp::after{
 165                                 content: '';
 166                                 position: absolute;
 167                                 inset: 20% 13%;
 168                                 width: 0;
 169                                 height: 0;
 170                                 border-left: 2.5rem solid transparent;
 171                                 border-right: 2.5rem solid transparent;
 172
 173                                 border-bottom: 2.5rem solid rgb(36, 1, 33);
 174                         }
 175                         .ArrowDown {
 176                                 inset: 60% 25%;
 177                         }
 178                         .ArrowDown::after{
 179                                 content: '';
 180                                 position: absolute;
 181                                 inset: 35% 13%;
 182                                 width: 0;
 183                                 height: 0;
 184                                 border-left: 2.5rem solid transparent;
 185                                 border-right: 2.5rem solid transparent;
 186
 187                                 border-top: 2.5rem solid rgb(36, 1, 33);
 188                         }
 189                         .ArrowLeft {
 190                                 inset: 35% calc(25% - 6.5rem);
 191                         }
 192                         .ArrowLeft::after{
 193                                 content: '';
 194                                 position: absolute;
 195                                 inset: 15% 25%;
 196                                 width: 0;
 197                                 height: 0;
 198                                 border-top: 2.5rem solid transparent;
 199                                 border-bottom: 2.5rem solid transparent;
 200
 201                                 border-right:2.5rem solid rgb(36, 1, 33);
 202                         }
 203                         .ArrowRight {
 204                                 inset: 35% calc(25% + 6.5rem);
 205                         }
 206                         .ArrowRight::after{
 207                                 content: '';
 208                                 position: absolute;
 209                                 inset: 15% 35%;
 210                                 width: 0;
 211                                 height: 0;
 212                                 border-top: 2.5rem solid transparent;
 213                                 border-bottom: 2.5rem solid transparent;
 214
 215                                 border-left: 2.5rem solid rgb(36, 1, 33);
 216                         }
 217                         .A {
 218                                 inset: 25% calc(90% - 6.5rem);
 219                         }
 220                         .A::after {
 221                                 content: 'A';
 222                                 color: rgb(36, 1, 33);
 223                                 position: absolute;
 224                                 inset:0 14%;
 225                                 font-weight: 700;
 226                                 font-size: 4.4rem;
 227
 228                         }
 229                         .B {
 230                                 inset: 40% calc(60% - 6.5rem);
 231                         }
 232                         .B::after {
 233                                 content: 'B';
 234                                 color: rgb(36, 1, 33);
 235                                 position: absolute;
 236                                 inset: 0 18%;
 237                                 font-weight: 700;
 238                                 font-size: 4.4rem;
 239
 240                         }
 241
 242                         @media (max-width: 55vh) {
 243
 244                                 canvas {
 245                                         min-width: 45vh;
 246                                         min-height: 45vh;
 247                                         margin: 0 auto;
 248
 249                                         border: none;
 250                                         background-color: rgb(57, 60, 61);
 251
 252                                 }
 253
 254                                 .lbl-controlSelect {
 255                                         inset: -35% 55%;
 256                                 }
 257                                 .lbl-control {
 258                                         inset: -35% -20%;
 259                                 }
 260                                 .A {
 261                                         inset: 25% calc(80% - 6.5rem);
 262                                 }
 263                                 .B {
 264                                         inset: 40% calc(40% - 6.5rem);
 265                                 }
 266                                 .ArrowUp {
 267                                 inset: 10% 35%;
 268                                 }
 269
 270                                 .ArrowDown {
 271                                         inset: 60% 35%;
 272                                 }
 273
 274                                 .ArrowLeft {
 275                                         inset: 35% calc(35% - 6.5rem);
 276                                 }
 277
 278                                 .ArrowRight {
 279                                         inset: 35% calc(35% + 6.5rem);
 280                                 }
 281
 282                         }
 283
 284                         @media (min-width: calc(75vh + 60vh)){
 285                                 body {
 286                                         background: rgb(185, 128, 4);
 287                                 }
 288
 289                                 .contenedor-gameboy {
 290                                         flex-direction: row;
 291                                         gap: 1rem;
 292                                 }
 293
 294                                 canvas {
 295                                         display: block;
 296                                         position: relative;
 297                                         width: 100vw;
 298                                         height: 100vw;
 299                                         max-height: 75vh;
 300                                         max-width: 75vh;
 301                                         min-width: 45vh;
 302                                         min-height: 45vh;
 303                                         margin: 0 auto;
 304
 305                                         inset: 10vh 0 0 0;
 306                                 }
 307
 308                                 .contenedor-gameboy span {
 309                                         display: flex;
 310                                         flex-direction: row;
 311                                         gap: 2vh;
 312                                         align-items: stretch;
 313
 314                                         margin: 0;
 315                                         position: absolute;
 316                                         inset: calc(100vh - 25vh) 0 0 0;
 317
 318                                         min-width: 55vh;
 319                                         max-width: 100vw;
 320                                 }
 321                                 .A {
 322                                         inset: 35% 80%;
 323                                 }
 324                                 .B {
 325                                         inset: 50% 65%;
 326                                 }
 327
 328                         }
 329                 </style>
 330
 331         </head>
 332         <body>
 333
 334                 <span class="contenedor-gameboy">
 335
 336
 337                         <canvas></canvas>
 338                         <span>
 339                                 <div class="pad">
 340                                         <div class="ArrowUp"></div>
 341                                         <div class="ArrowDown"></div>
 342                                         <div class="ArrowLeft"></div>
 343                                         <div class="ArrowRight"></div>
 344                                         <input type="checkbox" id="controlSelect"><label for="controlSelect" class="lbl-controlSelect" title="On/Off de menú"><br>Select</label>
 345                                 </div>
 346
 347                                 <div class="actionAB">
 348                                         <div class="A"></div>
 349                                         <div class="B"></div>
 350                                         <input type="checkbox" id="controlStart"><label for="controlStart" class="lbl-control" title="On/Off de animación"><br>&nbsp;Start</label>
 351                                 </div>
 352                         </span>
 353
 354                 </span>
 355
 356                 <script>
 357                         'use strict';
 358                         (function(){
 359                                 const colisiones = [
 360                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 361                                 0, 0, 0, 0, 0, 0, 73, 73, 73, 73, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 362                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 363                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 73, 73, 73, 0, 0, 0, 0, 0,
 364                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 365                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
 366                                 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
 367                                 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
 368                                 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
 369                                 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
 370                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
 371                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0,
 372                                 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 373                                 0, 73, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 374                                 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 375                                 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 376                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 377                                 0, 0, 0, 73, 73, 73, 73, 73, 73, 73, 73, 73, 73, 0, 0, 0, 0, 0, 0, 0,
 378                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 379                                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
 380                                 ];
 381
 382                                 let i = 0;
 383                                 let mapaColisiones = [];
 384
 385                                 while (i < colisiones.length){
 386
 387                                         mapaColisiones.push(colisiones.slice(i, i + 20)); // Se modifica el corte dependiendo del ancho del ancho
 388                                         i += 20;
 389                                 }
 390
 391                                 const controlAnim = document.querySelector('#controlStart');
 392                                 const controlMenu = document.querySelector('#controlSelect');
 393                                 const canvas = document.querySelector('canvas');
 394                                 const CANVAS_WIDTH = canvas.width = 320;
 395                                 const CANVAS_HEIGHT = canvas.height = 320;
 396                                 const ctx = canvas.getContext('2d');
 397
 398                                 const mapa = new Image();
 399                                 mapa.src = './map2.png';
 400                                 const foreground = new Image();
 401                                 foreground.src = './foreground.png';
 402
 403                                 // SFX
 404                                 const coin = new Audio('./Pickup_coin 10.wav');
 405                                 coin.volume = 0.08;
 406                                 const pain = new Audio('./Hit_hurt 192 (2).wav');
 407                                 pain.volume = 0.05;
 408                                 const shoot = new Audio('./Explosion 69 (2).wav');
 409                                 shoot.volume = 0.1;
 410                                 const hithurt = new Audio('./Hit_hurt 176 (1).wav');
 411                                 hithurt.volume = 0.2;
 412                                 // NPC
 413
 414                                 class NPC{
 415                                         constructor(start = 0, width, height, path = '', frames = 7, x = 0, y= 0, slowmo = 6, resolution = 1, velocidad = 2, life = 100, pain=2){
 416                                                 this.npcImage = new Image();
 417                                                 this.src = this.npcImage.src = path;
 418                                                 this.lifeImge = new Image();
 419                                                 this.lifeSrc = this.lifeImge.src = './lifebar.png';
 420                                                 this.width = width;
 421                                                 this.height = height;
 422                                                 this.resolution = resolution; // Este valor sólo puede ser entero o un entero con 0.5 de decimal
 423                                                 this.frameX = start;
 424                                                 this.frameY = 0;
 425                                                 this.gameFrame = 0;
 426                                                 this.slowmotion = slowmo;
 427                                                 this.controlF = frames;
 428                                                 this.x = x;
 429                                                 this.y = y;
 430                                                 this.efecto = {
 431                                                         activo: false,
 432                                                         estado: ''
 433                                                 };
 434                                                 this.movimiento = false;
 435                                                 this.direction = {
 436                                                         'Last': undefined,
 437                                                         'ArrowUp': false,
 438                                                         'ArrowDown': false,
 439                                                         'ArrowLeft': false,
 440                                                         'ArrowRight': false
 441                                                 };
 442                                                 this.collision = false;
 443                                                 this.velocidad = velocidad;
 444                                                 this.life = life;
 445                                                 this.reload = false;
 446                                                 this.pain = pain;
 447                                                 this.hit = {
 448                                                         '0': (empuje)=>{
 449                                                                 if(player.frameX === 6 || player.frameX === 1 || player.direction.Last === 'ArrowUp') {
 450                                                                         this.life -= this.pain;
 451                                                                         return this.y -= empuje;
 452                                                                 }
 453                                                         },
 454                                                         '1': (empuje)=>{
 455                                                                 if(player.frameX === 4 || player.frameX === 0 || player.direction.Last === 'ArrowDown') {
 456                                                                         this.life -= this.pain;
 457                                                                         return this.y += empuje;
 458                                                                 }
 459                                                         },
 460                                                         '3': (empuje)=>{
 461                                                                 if(player.frameX === 8 || player.frameX === 3 || player.direction.Last === 'ArrowLeft') {
 462                                                                         this.life -= this.pain;
 463                                                                         return this.x -= empuje;
 464                                                                 }
 465                                                         },
 466                                                         '2': (empuje)=>{
 467                                                                 if(player.frameX === 7 || player.frameX === 2 || player.direction.Last === 'ArrowRight') {
 468                                                                         this.life -= this.pain;
 469                                                                         return this.x += empuje;
 470                                                                 }
 471                                                         },
 472                                                         'undefined': ()=> {return;},
 473                                                         ' ': ()=>{return;}
 474                                                 };
 475                                                 this.fx = undefined;
 476                                                 this.offsetMapX = 0;
 477                                                 this.offsetMapY = 0;
 478                                         }
 479
 480                                         hitbox(vel, empuje){
 481
 482                                                 if(player.x - 24 < this.x + 16 && player.y + 88 > this.y && player.x + 88 > this.x && player.y - 20 < this.y + 16){
 483
 484                                                         if(this.life && !player.efecto.activo){
 485                                                                                 this.velocidad = vel;
 486                                                                                 player.reload = true;
 487                                                                                 this.hit[this.frameX](empuje);
 488                                                                                 return setTimeout(() => {
 489                                                                                         player.reload = false;
 490                                                                                 }, 400);
 491                                                                         };
 492                                                                 return;
 493                                                 } else {return setTimeout(() => {
 494                                                         player.fx = undefined
 495                                                         player.reload = false;
 496                                                 }, 700)};
 497                                         }
 498
 499                                         enfrente(lineaMedia = 32){ // Para renderizar adelante o atrás de un sprite
 500                                                 if(this.y >= player.y + lineaMedia) return true;
 501                                                 else return false;
 502                                         }
 503
 504                                         colision(x = player.x, y = player.y, objetivo = player){ // Esto es para los sprites que no atacan y puedan pararse ante colisiones.
 505
 506
 507                                                 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) {
 508                                                         return true;
 509                                                 } else {
 510                                                         return false;
 511                                                 }
 512                                         }
 513
 514                                         random(){
 515                                                 if(this.colision()) {return;}
 516                                                 // Acá es donde los sprites se quedan quietos si se encuentran con el jugador.
 517
 518                                                 this.slowmotion = 7;
 519                                                 if(this.gameFrame % 30 === 0){
 520                                                         switch (Math.trunc(Math.random() * 10 / 2)) {
 521                                                                 case 0:
 522                                                                         this.frameX = 2;
 523                                                                         this.x -= 2;
 524                                                                         if(player.frameX === 1) this.y -= 2;
 525
 526                                                                         break;
 527                                                                 case 1:
 528                                                                         this.frameX = 3;
 529                                                                         this.x += 2;
 530                                                                         if(player.frameX === 0) this.y += 2;
 531
 532                                                                         break;
 533                                                                 case 2:
 534                                                                         this.frameX = 0;
 535                                                                         this.y += 2;
 536                                                                         if(player.frameX === 3) this.x += 2;
 537
 538                                                                         break;
 539                                                                 case 3:
 540                                                                         this.frameX = 1;
 541                                                                         this.y -= 2;
 542                                                                         if(player.frameX === 2) this.x -= 2
 543
 544                                                                         break;
 545                                                                 case 4:
 546                                                                         // this.frameX = 4; // Falta hacer el estado de espera
 547                                                                         break;
 548                                                                 default:
 549                                                                         break;
 550                                                         }
 551                                                 }
 552
 553                                         };
 554
 555                                         render() {
 556
 557                                                 /*
 558                                                 Img - Imagen para renderizar
 559                                                 Posición en X de la imagen
 560                                                 Posición en Y de la imagen
 561                                                 Ancho de la imagen que se utilizará
 562                                                 Largo de la imagen que se utilizará
 563                                                 Posición en X del canvas que se renderizará
 564                                                 Posición en Y del canvas que se renderizará
 565                                                 Ancho que ocupará
 566                                                 Largo que ocupará
 567                                                 */
 568
 569                                                 if(this.life <= 0 && this.life !== null){ // Bloque que se encarga de no renderizar más el sprite cuando no tiene vida
 570                                                         this.x, this.y = undefined;
 571                                                         this.life = null;
 572
 573                                                         if(this === player){
 574                                                                 controlAnim.checked = false;
 575                                                                 ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
 576                                                                 return ctx.fillText(`Score: ${contador}`, CANVAS_WIDTH / 2 - 48, CANVAS_WIDTH / 2 - 16);
 577                                                         }
 578
 579                                                         if(this !== player) { // Se le agrega vida extra al jugador una vez que ha matado al sprite
 580                                                                 player.life += 5;
 581                                                                 contador += this.velocidad * 10;
 582                                                                 if(player.life > 100) player.life = 100;
 583                                                                 setTimeout(()=>{
 584                                                                         this.life = 100;
 585                                                                         this.x = Math.trunc(Math.random() * (canvas.width - 16));
 586                                                                         this.y = Math.trunc(Math.random() * (canvas.height - 16));
 587                                                                 }, this.pain * 1000);
 588                                                                 // player.fx = renderFx.bind(corazon);
 589                                                         };
 590                                                         return setTimeout(() => {
 591                                                                 this.fx = undefined;
 592                                                         }, 2000);
 593                                                 } else if (this.life !== null){
 594                                                         ctx.font = '12px serif';
 595                                                         ctx.strokeText(this.life, this.x + this.width - this.offsetMapX, this.y - this.offsetMapY);
 596                                                 };
 597
 598                                                 if(this.efecto.activo){ // Bloque para renderizar los efectos de un estado provocado por slime (fuego, electrico, empuje normal)
 599                                                         this.slowmotion = 4;
 600                                                         switch (this.efecto.estado) {
 601                                                                 case 'electrico':
 602                                                                         this.frameX = 9;
 603                                                                         break;
 604                                                                 case 'fuego':
 605                                                                         this.frameX = 5;
 606                                                                         break;
 607                                                                 default:
 608                                                                         break;
 609                                                         }
 610                                                 }
 611
 612
 613                                                 // Bloque para visualizar la barra de vida
 614
 615                                                 if(this.life === 100) ctx.drawImage(this.lifeImge, 0, 0, 106, 8, this.x - this.offsetMapX, this.y - 6 - this.offsetMapY, this.width, 4);
 616                                                 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);
 617                                                 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);
 618                                                 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);
 619                                                 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);
 620                                                 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);
 621                                                 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);
 622                                                 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);
 623                                                 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);
 624                                                 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);
 625
 626
 627                                                 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);
 628
 629                                                 // Renderizar la estrella.
 630
 631
 632
 633                                                 // 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.
 634                                                 if(this.fx !== undefined) {
 635                                                         this.fx();
 636                                                 };
 637
 638
 639                                                 if (this.gameFrame % this.slowmotion === 0) {
 640                                                         if (this.frameY < this.controlF) { // Control de los frames
 641                                                                 this.frameY++;
 642                                                         } else {
 643                                                                 this.frameY = 0;
 644                                                         };
 645                                                 };
 646
 647                                                 this.gameFrame++;
 648
 649
 650
 651                                         };
 652                                 };
 653
 654                                 const move = ()=>{
 655                                         if(player.life === null) return;
 656                                         player.slowmotion = 6;
 657                                         if(player.direction.ArrowUp) {
 658                                                 // Acá es donde debo poner la colisión con algún sprite
 659
 660                                                 player.frameX = 1;
 661                                                 if(player.y + 8 <= estrella.y + 16 && player.y + 8 > estrella.y && (player.x + 16 > estrella.x && player.x < estrella.x + 16)){
 662                                                         coin.play();
 663                                                         // Haz que la gema pase a otro lado.
 664                                                         contador += puntos;
 665                                                         randEstrella();
 666                                                 }
 667
 668                                                 if(player.y + 8 <= 0) {return player.y = canvas.height - 16;}
 669                                                 if(mapaColisiones[Math.trunc((player.y) / 16)][Math.trunc((player.x + 8) / 16)] === 73){return player.movimiento = false;}
 670                                                 player.y -= paso;
 671                                         }
 672
 673                                         if(player.direction.ArrowDown){
 674
 675                                                 player.frameX = 0;
 676                                                 if(player.y + 16 >= estrella.y  && player.y < estrella.y && (player.x + 16 > estrella.x && player.x < estrella.x + 16)){
 677                                                         coin.play();
 678                                                         contador += puntos;
 679                                                         randEstrella();
 680                                                 }
 681
 682                                                 if(player.y + 16 >= canvas.height) {return player.y = -8;}
 683                                                 if(mapaColisiones[Math.trunc((player.y + 16 ) / 16)][Math.trunc((player.x + 8) / 16)] === 73){return player.movimiento = false;}
 684                                                 player.y += paso;
 685                                         }
 686
 687                                         if(player.direction.ArrowLeft){
 688
 689                                                 player.frameX = 2;
 690                                                 if(player.x + 8 <= estrella.x + 16 && player.x + 8 > estrella.x && (player.y + 16 > estrella.y && player.y < estrella.y + 16)){
 691                                                         coin.play();
 692                                                         contador += puntos;
 693                                                         randEstrella();
 694                                                 }
 695                                                 if(player.x + 8 <= 0) {return player.x = canvas.width - 16;}
 696                                                 if(mapaColisiones[Math.trunc((player.y + 8) / 16)][Math.trunc((player.x) / 16)] === 73){return player.movimiento = false;}
 697                                                 player.x -= paso;
 698                                         }
 699
 700                                         if(player.direction.ArrowRight){
 701
 702                                                 player.frameX = 3;
 703                                                 if(player.x + 8 >= estrella.x  && player.x < estrella.x && (player.y + 16 > estrella.y && player.y < estrella.y + 16)){
 704                                                         coin.play();
 705                                                         contador += puntos;
 706                                                         randEstrella();
 707                                                 }
 708                                                 if(player.x + 16 >= canvas.width) {return player.x = -8;}
 709                                                 if(mapaColisiones[Math.trunc((player.y + 8) / 16)][Math.trunc((player.x + 16) / 16)] === 73){return player.movimiento = false;}
 710                                                 player.x += paso;
 711                                         }
 712                                 };
 713
 714
 715                                 let [x,y,contador, puntos] = [0,0,0,1];
 716                                 let paso = 1;
 717
 718                                 // const marcador = (function () {
 719                                 //      let contador = 0; // private variable
 720                                 //      return {
 721                                 //              set setCount(valida){
 722                                 //                      contador++;
 723                                 //              },
 724                                 //              get getCount(){
 725                                 //                      return contador;
 726                                 //              }
 727                                 //      };
 728                                 // }());
 729
 730                                 // Jugador principal
 731                                 const player = new NPC(undefined, 16, 16, './Snake2.png', 3, 4 * 25, 4 * 25, 8, 1, 1, 100, 10);
 732                                 const estrella = new NPC(undefined, 16, 16, './gema.png', 3, 4 * 57, 4 * 70, 10, 1, 0, null, undefined);
 733
 734                                 const randEstrella = ()=>{
 735                                         if(contador >= 20){
 736                                                 puntos = 2;
 737                                                 estrella.npcImage.src = './gema2.png';
 738                                         };
 739
 740                                         if(contador >= 50){
 741                                                 puntos = 5;
 742                                                 estrella.npcImage.src = './gema3.png';
 743                                         };
 744
 745                                         if(contador >= 100){
 746                                                 puntos = 10;
 747                                                 estrella.npcImage.src = './gema4.png';
 748
 749                                         };
 750
 751                                         return estrella.x = Math.trunc(Math.random() * (canvas.width - 16)), estrella.y = Math.trunc(Math.random() * (canvas.height - 16));
 752                                 };
 753
 754                                 // Objetcs
 755
 756                                 const bala = new NPC(undefined, 8, 8, './disparo.png', 3, 0, 0, 5, 1, 3, null);
 757
 758                                 function disparo(){
 759
 760                                         if(player.life === null || bala.movimiento === true) return;
 761                                         bala.movimiento = true;
 762                                         if(player.direction.ArrowUp) {
 763                                                 // Acá es donde debo poner la colisión con algún sprite
 764
 765                                                 bala.frameX = 0;
 766                                                 bala.x = player.x + 4; // Bala centrada
 767                                                 bala.y = player.y - 4;
 768                                                 shoot.play();
 769                                         }
 770
 771                                         if(player.direction.ArrowDown){
 772
 773                                                 bala.frameX = 1;
 774                                                 bala.x = player.x + 2;
 775                                                 bala.y = player.y + 12;
 776                                                 shoot.play();
 777                                         }
 778
 779                                         if(player.direction.ArrowLeft){
 780
 781                                                 bala.frameX = 3;
 782                                                 bala.x = player.x;
 783                                                 bala.y = player.y + 4;
 784                                                 shoot.play();
 785                                         }
 786
 787                                         if(player.direction.ArrowRight){
 788
 789                                                 bala.frameX = 2;
 790                                                 bala.x = player.x + 12;
 791                                                 bala.y = player.y + 4;
 792                                                 shoot.play();
 793                                         }
 794
 795                                 }
 796
 797                                 let npcActivos = [];
 798
 799                                 function shootHit(){
 800                                         if(npcActivos.length !== 0) {
 801                                                 npcActivos.forEach(sprite => {
 802
 803                                                         switch (bala.frameX) {
 804                                                                 case 0: // Arriba
 805                                                                         if((bala.y <= sprite.y + sprite.height && bala.y > sprite.y) && (bala.x + bala.width > sprite.x && bala.x < sprite.x + sprite.width)){
 806                                                                                 bala.y = player.y
 807                                                                                 bala.movimiento = false;
 808                                                                                 shoot.pause();
 809                                                                                 shoot.currentTime = 0;
 810                                                                                 sprite.life -= sprite.pain;
 811                                                                                 sprite.y -= 24;
 812                                                                                 hithurt.play();// Reproducir un sonido de golpe.
 813                                                                                 // console.log('le pegaste');
 814                                                                         }
 815
 816                                                                         if(bala.y <= 0){
 817                                                                                 bala.y = player.y
 818                                                                                 bala.movimiento = false;
 819                                                                                 // console.log('murio la bala')
 820                                                                                 shoot.pause();
 821                                                                                 shoot.currentTime = 0;
 822                                                                         }
 823                                                                         bala.y -= bala.velocidad;
 824                                                                         break;
 825
 826                                                                 case 1: // Abajo
 827                                                                         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)){
 828                                                                                 bala.y = player.y
 829                                                                                 bala.movimiento = false;
 830                                                                                 shoot.pause();
 831                                                                                 shoot.currentTime = 0;
 832                                                                                 sprite.life -= sprite.pain;
 833                                                                                 sprite.y += 24;
 834                                                                                 hithurt.play();
 835                                                                                 // console.log('le pegaste');
 836                                                                         }
 837
 838                                                                         if(bala.y >= canvas.height){
 839                                                                                 bala.y = player.y
 840                                                                                 bala.movimiento = false;
 841                                                                                 // console.log('murio la bala')
 842                                                                                 shoot.pause();
 843                                                                                 shoot.currentTime = 0;
 844                                                                         }
 845                                                                         bala.y += bala.velocidad;
 846                                                                         break;
 847
 848                                                                 case 2: // Derecha
 849                                                                         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)){
 850                                                                                 bala.y = player.y
 851                                                                                 bala.movimiento = false;
 852                                                                                 shoot.pause();
 853                                                                                 shoot.currentTime = 0;
 854                                                                                 sprite.life -= sprite.pain;
 855                                                                                 sprite.x += 24;
 856                                                                                 hithurt.play();
 857                                                                                 // console.log('le pegaste');
 858                                                                         }
 859
 860                                                                         if(bala.x >= canvas.width){
 861                                                                                 bala.y = player.x
 862                                                                                 bala.movimiento = false;
 863                                                                                 // console.log('murio la bala')
 864                                                                                 shoot.pause();
 865                                                                                 shoot.currentTime = 0;
 866                                                                         }
 867                                                                         bala.x += bala.velocidad;
 868                                                                         break;
 869
 870                                                                 case 3: // Izquierda
 871                                                                         if((bala.x <= sprite.x + sprite.width && bala.x > sprite.x) && (bala.y + bala.height > sprite.y && bala.y < sprite.y + sprite.height)){
 872                                                                                 bala.y = player.y
 873                                                                                 bala.movimiento = false;
 874                                                                                 shoot.pause();
 875                                                                                 shoot.currentTime = 0;
 876                                                                                 sprite.life -= sprite.pain;
 877                                                                                 sprite.x -= 24;
 878                                                                                 hithurt.play();
 879                                                                                 // console.log('le pegaste');
 880                                                                         }
 881
 882                                                                         if(bala.x <= 0){
 883                                                                                 bala.y = player.x
 884                                                                                 bala.movimiento = false;
 885                                                                                 // console.log('murio la bala')
 886                                                                                 shoot.pause();
 887                                                                                 shoot.currentTime = 5;
 888                                                                         }
 889                                                                         bala.x -= bala.velocidad;
 890                                                                         break;
 891                                                                 default:
 892                                                                         break;
 893                                                         };
 894                                                 });
 895                                         } else {
 896                                                 switch (bala.frameX) {
 897                                                         case 0: // Arriba
 898
 899                                                                 if(bala.y <= 0){
 900                                                                         bala.y = player.y
 901                                                                         bala.movimiento = false;
 902                                                                         // console.log('murio la bala')
 903                                                                         shoot.pause();
 904                                                                         shoot.currentTime = 0;
 905                                                                 }
 906                                                                 bala.y -= bala.velocidad;
 907                                                                 break;
 908
 909                                                         case 1: // Abajo
 910
 911                                                                 if(bala.y >= canvas.height){
 912                                                                         bala.y = player.y
 913                                                                         bala.movimiento = false;
 914                                                                         // console.log('murio la bala')
 915                                                                         shoot.pause();
 916                                                                         shoot.currentTime = 0;
 917                                                                 }
 918                                                                 bala.y += bala.velocidad;
 919                                                                 break;
 920
 921                                                         case 2: // Derecha
 922
 923                                                                 if(bala.x >= canvas.width){
 924                                                                         bala.y = player.x
 925                                                                         bala.movimiento = false;
 926                                                                         // console.log('murio la bala')
 927                                                                         shoot.pause();
 928                                                                         shoot.currentTime = 0;
 929                                                                 }
 930                                                                 bala.x += bala.velocidad;
 931                                                                 break;
 932
 933                                                         case 3: // Izquierda
 934
 935                                                                 if(bala.x <= 0){
 936                                                                         bala.y = player.x
 937                                                                         bala.movimiento = false;
 938                                                                         // console.log('murio la bala')
 939                                                                         shoot.pause();
 940                                                                         shoot.currentTime = 5;
 941                                                                 }
 942                                                                 bala.x -= bala.velocidad;
 943                                                                 break;
 944                                                         default:
 945                                                                 break;
 946                                                 };
 947                                         }
 948                                 }
 949
 950                                 // Slimes
 951
 952                                 const blueSlime = new NPC(undefined, 32, 32,'./Slime.png', 3, 4*12, 4*30, 7, 1, 0.4, undefined, 8);
 953                                 const skull = new NPC(undefined, 32, 32, './Skull.png', 3, 4 * 10, 4 * 20, 6, 1, 0.6, undefined, 2);
 954                                 // const owl = new NPC(undefined, 32, 32, './Slimes/Owl.png', 3, 4 * 50, 4 * 10, 15, 0.5, 0.2, null);
 955                                 const mouse = new NPC(undefined, 16, 16, './Mouse.png', 3, 4 * 25, 4 * 25, 6, 1, 0.8, 100, 5);
 956
 957                                 /* Comportamiento de los slimes */
 958
 959                                 const damage = {
 960                                         '': ()=>{player.life -= 2},
 961                                         'fuego': ()=>{player.life -= 5},
 962                                         'electrico': ()=>{player.life -= 10}
 963                                 }
 964
 965                                 // Ataque de los slimes
 966
 967                                 const attack = (sprite, efecto='', empujeS = 8, empujeP = 4)=>{
 968                                         // if( // Si se encuentra cerca del jugador.
 969                                         // (player.x < sprite.x + (sprite.width * sprite.resolution) + 96) &&
 970                                         // (player.x + (player.width * player.resolution) > sprite.x - 96) &&
 971                                         // (player.y < sprite.y + (sprite.height * sprite.resolution) + 96) &&
 972                                         // (player.y + (player.height * player.resolution) > sprite.y - 96)
 973                                         // ){
 974                                                 sprite.slowmo = 5;
 975                                                 if(player.life <= 0) return;
 976
 977                                                 if (player.x + (player.width * player.resolution) / 2 < sprite.x + (sprite.width * sprite.resolution) / 2){
 978                                                         sprite.x -= sprite.velocidad;
 979                                                         sprite.frameX = 2;
 980                                                 };
 981
 982                                                 if (player.x + (player.width * player.resolution) / 2 > sprite.x + (sprite.width * sprite.resolution) / 2){
 983                                                         sprite.x += sprite.velocidad;
 984                                                         sprite.frameX = 3;
 985                                                 };
 986
 987                                                 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)){
 988                                                         sprite.y += sprite.velocidad;
 989                                                         sprite.frameX = 0;
 990                                                 };
 991
 992                                                 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)){
 993                                                         sprite.y -= sprite.velocidad;
 994                                                         sprite.frameX = 1;
 995                                                 };
 996
 997                                                 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
 998                                                         pain.play();
 999                                                         if(player.y - empujeP <= 0) {
1000                                                                 player.y = canvas.height - 16;
1001                                                                 return damage[efecto]();
1002                                                         }
1003                                                         damage[efecto]();
1004                                                         player.y -= empujeP;
1005
1006                                                 };
1007
1008                                                 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
1009                                                         pain.play();
1010                                                         if(player.y + 16 + empujeP >= canvas.height) {
1011                                                                 player.y = -8;
1012                                                                 return damage[efecto]();
1013                                                         }
1014                                                         damage[efecto]();
1015                                                         player.y += empujeP;
1016
1017                                                 };
1018
1019
1020                                                 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
1021                                                         pain.play();
1022                                                         if(player.x - empujeP <= 0) {
1023                                                                 player.x = canvas.width - 16;
1024                                                                 return damage[efecto]();
1025                                                         }
1026                                                         damage[efecto]();
1027                                                         player.x -= empujeP;
1028
1029                                                 };
1030
1031                                                 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
1032                                                         pain.play();
1033                                                         if(player.x + empujeP + 16 >= canvas.width) {
1034                                                                 player.x = -8;
1035                                                                 return damage[efecto]();
1036                                                         }
1037                                                         damage[efecto]();
1038                                                         player.x += empujeP;
1039                                                 };
1040                                         // } else {
1041                                         //      sprite.random();
1042                                         // }
1043
1044                                 };
1045
1046                                 // Movimiento libre de un sprite
1047
1048                                 const freeMove = (sprite)=>{
1049                                         if( // Si se encuentra cerca del jugador.
1050                                         (player.x < sprite.x + (sprite.width * sprite.resolution) + 128) &&
1051                                         (player.x + (player.width * player.resolution) > sprite.x - 128) &&
1052                                         (player.y < sprite.y + (sprite.height * sprite.resolution) + 128) &&
1053                                         (player.y + (player.height * player.resolution) > sprite.y - 128)
1054                                         ){
1055                                                 // Llamar una función que haga movimiento aleatorio.
1056                                                 sprite.random();
1057                                         };
1058                                         return;
1059
1060                                         // if(player.x + (player.width * player.resolution) > owl.x - 32 && owl.x >= player.x + (player.width * player.resolution)){
1061                                         //     owl.x -= owl.velocidad;
1062                                         // }
1063
1064                                         // if((player.y < owl.y + (owl.height * owl.resolution) + 32 && owl.y + (owl.height * owl.resolution) <= player.y)){
1065                                         //     // Llamar una función que haga movimiento aleatorio.
1066                                         //     owl.y += owl.velocidad;
1067                                         // }
1068
1069                                         // if(player.y + (player.height * player.resolution) > owl.y - 32 && owl.y >= player.y + (player.height * player.resolution)){
1070                                         //     owl.y -= owl.velocidad;
1071                                         // }
1072                                 };
1073
1074                                 function animacion(){
1075
1076                                 if (controlAnim.checked){
1077                                         ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
1078                                         ctx.drawImage(mapa, x, y, mapa.width, mapa.height, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
1079
1080                                         // Acciones de los sprites
1081                                         // attack(blueSlime);
1082                                         // attack(skull, 'fuego', 0, 32, 16);
1083                                         // attack(mouse, undefined, 8, 4);
1084                                         // freeMove(owl);
1085                                         if(player.movimiento && player.life !== 0) {
1086                                                 move();
1087                                         };
1088
1089                                         if(bala.movimiento){ // Refactorizar para que la funcionalidad sea para cualquier npc.
1090                                                 bala.render();
1091                                                 shootHit();
1092                                         }
1093
1094
1095                                         // if(!blueSlime.enfrente()) blueSlime.render();
1096                                         // if(!mouse.enfrente(48)) mouse.render();
1097                                         // if(!skull.enfrente()) skull.render();
1098                                         player.render();
1099                                         if(player.life === null){return;}
1100                                         ctx.drawImage(foreground, x, y, mapa.width, mapa.height, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
1101                                         // owl.render();
1102                                         // if(blueSlime.enfrente()) blueSlime.render();
1103                                         // if(mouse.enfrente(48)) mouse.render();
1104                                         // if(skull.enfrente()) skull.render();
1105                                         if(contador >= 5){
1106                                                 blueSlime.render();
1107                                                 attack(blueSlime, undefined, undefined, 10);
1108                                                 if(!npcActivos.includes(blueSlime)) npcActivos.push(blueSlime);
1109                                         };
1110
1111                                         if(contador >= 30){
1112                                                 skull.render();
1113                                                 attack(skull, 'fuego', 0, 20);
1114                                                 if(!npcActivos.includes(skull)) npcActivos.push(skull);
1115                                         };
1116
1117                                         if(contador >= 50){
1118                                                 mouse.render();
1119                                                 attack(mouse);
1120                                                 if(!npcActivos.includes(mouse)) npcActivos.push(mouse);
1121                                         };
1122
1123                                         estrella.render();
1124                                         ctx.font = '32px serif';
1125
1126                                         ctx.fillStyle = 'black';
1127                                         ctx.lineWidth = 1;
1128                                         ctx.fillText(contador, 16, 32);
1129
1130                                         requestAnimationFrame(animacion); // El orden en que aparecen acá es lo que importa para que uno esté por encima del otro
1131
1132                                         } else {
1133                                                 return;
1134                                         }
1135
1136                                 }
1137
1138                                 controlMenu.addEventListener('click', ()=>{
1139
1140                                         if(controlMenu.checked){
1141                                                 canvas.style = 'image-rendering: crisp-edges;';
1142                                                 ctx.imageSmoothingEnabled = false;
1143
1144                                         } else {
1145                                                 canvas.style = 'image-rendering: none;';
1146                                                 ctx.imageSmoothingEnabled = true;
1147
1148                                         };
1149                                 })
1150
1151                                 controlAnim.addEventListener('click', ()=>{
1152                                         if (controlAnim.checked){
1153                                         animacion();
1154                                         } else {
1155                                                 return;
1156                                         };
1157                                 })
1158
1159                                 document.addEventListener('keydown', (e)=>{
1160
1161                                         // console.log(e.key)
1162                                         if (!controlAnim.checked){return;}
1163                                         e.preventDefault();
1164
1165                                         if(e.key === ' '){
1166                                                 disparo();
1167                                         };
1168
1169                                         if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown' && e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key){
1170                                                 return;
1171                                         }
1172                                         player.direction['ArrowLeft'] = false;
1173                                         player.direction['ArrowUp'] = false;
1174                                         player.direction['ArrowRight'] = false;
1175                                         player.direction['ArrowDown'] = false;
1176
1177                                         player.movimiento = true;
1178                                         player.direction[e.key] = true;
1179
1180                                 });
1181
1182                                 const dir = {
1183                                                 'ArrowUp': ()=>player.frameX = 1,
1184                                                 'ArrowDown': ()=>player.frameX = 0,
1185                                                 'ArrowLeft': ()=>player.frameX = 2,
1186                                                 'ArrowRight': ()=>player.frameX = 3,
1187                                                 'undefined' : ()=>player.frameX = 0,
1188                                 }
1189
1190
1191                                 // Controles
1192
1193                                 window.mobileCheck = function() {
1194                                         let check = false;
1195                                         (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);
1196                                         return check;
1197                                 };
1198
1199                                 let [keyDown, keyMove, keyUp] = window.mobileCheck() ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup'];
1200
1201
1202                                 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'),];
1203
1204                                 a.addEventListener(keyDown, (e)=>{
1205                                         disparo();
1206                                 })
1207
1208                                 const pad = document.querySelector('.pad');
1209                                 pad.addEventListener(keyDown, (e)=>{
1210                                         if (!controlAnim.checked){return;}
1211                                         e.preventDefault();
1212
1213                                         if(e.target !== up && e.target !== down && e.target !== left && e.target !== right){
1214                                                 return;
1215                                         }
1216
1217                                         // console.log(e.target.className)
1218                                         player.direction['ArrowLeft'] = false;
1219                                         player.direction['ArrowUp'] = false;
1220                                         player.direction['ArrowRight'] = false;
1221                                         player.direction['ArrowDown'] = false;
1222
1223                                         player.movimiento = true;
1224                                         player.direction[e.target.className] = true;
1225                                 });
1226
1227                         }());
1228
1229                 </script>
1230         </body>
1231 </html>