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