// As trocas de imagens e informações são capturadas pelo dataset que está no HTML
const personagens = document.querySelectorAll('.character');

personagens.forEach((personagem) => {
   personagem.addEventListener('mouseenter', () => {
   ...
   }
   personagem.addEventListener('click', () => {
   ...
   }

}

// API conectado com fetch, dependendo do personagem escolhido a api irá buscar as informações dos personagens
switch (personagem.dataset.number) {
           case '01':
               var idCharacterAPI = 1009189;
               break;
...
fetch(`https://gateway.marvel.com/v1/public/characters/${idCharacterAPI}?`).then((responde) => {
           return responde.json();
       }).then((jsonParsed) => {

// Quando os dois jogadores selecionarem seus personagens o resultado é armazenado no localStorage
var seletedPlayerOne = document.querySelector('.seleted');
var seletedPlayerTwo = document.querySelector('.second-player_seleted');

seletedPlayerOne = seletedPlayerOne.dataset.name;
seletedPlayerTwo = seletedPlayerTwo.dataset.name;

// Mandar os personagens selecionados para o game 
if (typeof (Storage) === 'function') {
        localStorage.setItem('PlayerOne', seletedPlayerOne);
        localStorage.setItem('PlayerTwo', seletedPlayerTwo);
} else {
        alert('Infelizmente o seu navegador não suporta localStorage, por favor tente usar outro!')
}

// Redirecionar para a página do jogo
window.location.href = "src/pages/game.html";

//Informações dos personagens
{
       nome: 'Viúva Negra',
       sprites: {
           idle: {
               imgSrc: '../imagens/game/bw/bw_idle.png',
               framesMax: 11
           },
           run: {
               imgSrc: '../imagens/game/bw/bw_run.png',
               framesMax: 6
           },
           jump: {
               imgSrc: '../imagens/game/bw/bw_jump.png',
               framesMax: 4
           },
           fall: {
               imgSrc: '../imagens/game/bw/bw_fall.png',
               framesMax: 5
           },
           attack1: {
               imgSrc: '../imagens/game/bw/bw_attack1.png',
               framesMax: 6
           },
         ...
   },

 // CANVAS HTML
const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d'); 

canvas.width = 1024
canvas.height = 567
c.fillRect(0, 0, canvas.width, canvas.height)
  

 // Jogador número um
const player = new Fighter({
    position: {
        x: 200,
        y: 400
    },
    velocity: {
        x: 0,
        y: 0
    },
    color: '#FE2C54',
    offset: {
        x: 0,
        y: 0
    },
    imgSrc: spritesPlayerOne[0].imgSrc,
    framesMax: spritesPlayerOne[0].framesMax,
    framesHold: 10,
    scale: 1.8,
    offset: { //onde ele vai estar no background
        x: 215,
        y: 147
    },
    sprites: {
        idle: spritesPlayerOne[0],
  ...
  

 // Classes e seus métodos
class Fighter extends Sprite {
    constructor({ position, velocity, color, imgSrc, scale = 1, framesMax = 1, offset = { x: 0, y: 0 }, sprites, framesHold = 8, attackBox = { offset: {}, width: undefined, height: undefined } }) {
        super({ position, imgSrc, scale, framesMax, offset, framesHold })

        this.velocity = velocity
        this.width = 50
        this.height = 150
        this.lastKey // THREE TASK - mover o inimigo
        this.attackBox = { //FOURTH TASK - braço para atacar
            position: {
                x: this.position.x,
                y: this.position.y
            },
  ...
   attacks() {
      this.switchSprite('attack1')
      this.isAttacking = true
   }
   ...