digitalinnovationone · Raposa-Dev · Nov 1, 2023 · Nov 1, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="./src/assets/favicon/Favicon.ico">
+    <link rel="stylesheet" href="./src/styles/style.css">
+    <link rel="stylesheet" href="./src/styles/containers_and_frames.css">
+    <link rel="stylesheet" href="./src/styles/buttons.css">
+    <script defer src="./src/scripts/main.js"></script>
+    <title>YU-GI-OH</title>
+</head>
+
+<body>
+    <audio id="bgm" loop>
+        <source src="./src/assets/audios/egyptian_duel.mp3" type="audio/mp3">
+    </audio>
+    <div class="bg-video">
+        <video class="video" autoplay loop muted>
+            <source src="./src/assets/video/yugi.mp4" type="video/mp4">
+        </video>
+    </div>
+    <div class="container">
+        <div class="container__left framed-golden-2">
+            <div class="score_box frame">
+                <span id="score_points">Win: 0 | Lose: 0</span>
+            </div>
+            <div class="menu__avatar">
+                <img id="card-image" />
+            </div>
+            <div class="card-details frame">
+                <p id="card-name">select</p>
+                <p id="card-type">a letter</p>
+            </div>
+        </div>
+        <div class="container__right">
+            <div class="card-box__container">
+                <div class="card-box framed" id="computer-cards"></div>
+                <div class="card-versus__container">
+                    <div class="versus-top">
+                        <div class="card-infield">
+                            <img id="player-field-card" height="180px" width="125px" />
+                        </div>
+                        <img height="100px" src="./src/assets/icons/millenium2.png">
+                        <div class="card-infield">
+                            <img id="computer-field-card" height="180px" width="125px" />
+                        </div>
+                    </div>
+                    <div class="versus-bottom">
+                        <button id="next-duel" class="rpgui-button" onclick="resetDuel()">
+                            GANHOU
+                        </button>
+                    </div>
+                </div>
+                <div class="card-box framed" id="player-cards"></div>
+            </div>
+        </div>    
+</body>
+
+</html>
diff --git a/readme.md b/readme.md
@@ -1,3 +1,4 @@
+
 # Yu-Gi-Oh | Jo-ken-po Edition
 
 Jogo de jokenpo que criei para explicar conceitos de lógica de programação aplicados a jogos

diff --git a/src/scripts/engine.js b/src/scripts/engine.js
@@ -0,0 +1,149 @@
+const state = {
+    score: {
+        playerScore: 0,
+        computerScore: 0,
+        scoreBox: document.getElementById("score_points"),
+    },
+    cardSprite: {
+        avatar: document.getElementById("card-image"),
+        name: document.getElementById("card-name"),
+        type: document.getElementById("card-type"),
+    },
+    fieldCards: {
+        player: document.getElementById("player-field-card"),
+        computer: document.getElementById("computer-field-card"),
+    },
+    button: document.getElementById("next-duel"),
+};  
+const player = {
+    player1: "player-cards",
+    computer: "computer-cards",
+};  
+const cardData = [
+    {
+        id: 0,
+        name: "Blue Eyes White Dragon",
+        type: "Paper",
+        img: "./src/assets/icons/dragon.png",
+        WinOf: [1],
+        LoseOf: [2],
+    },
+    {
+        id: 1,
+        name: "Dark Magician",
+        type: "Rock",
+        img: "./src/assets/icons/magician.png",
+        WinOf: [2],
+        LoseOf: [0],
+    },
+    {
+        id: 2,
+        name: "Exodia",
+        type: "Scissors",
+        img: "./src/assets/icons/exodia.png",
+        WinOf: [0],
+        LoseOf: [1],
+    },
+];
+
+async function getRandomCardId() {
+    const randomIndex = Math.floor(Math.random() * cardData.length);
+    return cardData[randomIndex].id;
+}
+
+async function setCardsField(cardId) {
+    await RemoveAllCardImages();  
+    let computerCardId = await getRandomCardId();
+    state.fieldCards.player.style.display = "block";
+    state.fieldCards.computer.style.display = "block";
+    state.fieldCards.player.src = cardData[cardId].img;
+    state.fieldCards.computer.src = cardData[computerCardId].img;
+    let duelResults = await checkDuelResults(cardId, computerCardId);
+    await updateScore();
+    await drawButton(duelResults);
+}  
+async function checkDuelResults(playerCardId, computerCardId) {
+    let playerCard = cardData[playerCardId];
+    let duelResults = "Empate";
+
+    if (playerCard.WinOf.includes(computerCardId)) {
+    duelResults = "Ganhou";
+    await playAudio("win");
+    state.score.playerScore++;
+    }
+    if (playerCard.LoseOf.includes(computerCardId)) {
+    duelResults = "Perdeu";
+    await playAudio("lose");
+    state.score.computerScore++;
+    }
+return duelResults;
+}
+
+async function createCardImage(randomIdCard, fieldSide) {
+    const cardImage = document.createElement("img");
+    cardImage.setAttribute("height", "100px");
+    cardImage.setAttribute("src", "./src/assets/icons/card-back.png");
+    cardImage.setAttribute("data-id", randomIdCard);
+    cardImage.classList.add("card");
+    if (fieldSide === player.player1) {
+    cardImage.addEventListener("click", () => {
+        setCardsField(cardImage.getAttribute("data-id"));
+    });
+    cardImage.addEventListener("mouseover", () => {
+        drawSelectCard(randomIdCard);
+    });
+    cardImage.setAttribute("src", "./src/assets/icons/card-back.png");
+    } 
+    return cardImage;
+}
+
+async function RemoveAllCardImages() {
+    let cards = document.querySelector(".card-box.framed#computer-cards");
+    let imgElements = cards.querySelectorAll("img");
+    imgElements.forEach((img) => img.remove());
+    cards = document.querySelector(".card-box.framed#player-cards");
+    imgElements = cards.querySelectorAll("img");
+    imgElements.forEach((img) => img.remove());
+}
+async function drawCards(cardNumbers, fieldSide) {
+    for (let i = 0; i < cardNumbers; i++) {
+    const randomIdCard = await getRandomCardId();
+    const cardImage = await createCardImage(randomIdCard, fieldSide);
+    document.getElementById(fieldSide).appendChild(cardImage);
+    }  
+}
+
+function drawSelectCard(index) {
+    state.cardSprite.avatar.src = cardData[index].img;
+    state.cardSprite.name.innerText = cardData[index].name;
+    state.cardSprite.type.innerText = "Attribute: " + cardData[index].type;
+}
+
+async function drawButton(text) {
+    state.button.innerText = text;
+    state.button.style.display = "block";
+}
+async function resetDuel() {
+    state.cardSprite.avatar.src = "";
+    state.button.style.display = "none";
+    state.fieldCards.player.style.display = "none";
+    state.fieldCards.computer.style.display = "none";
+    drawCards(5, player.player1);
+    drawCards(5, player.computer);
+}  
+async function playAudio(status) {
+    const audio = new Audio(`./src/assets/audios/${status}.wav`);
+    audio.play();
+}
+
+async function updateScore() {
+    state.score.scoreBox.innerText = `Win: ${state.score.playerScore} | Lose: ${state.score.computerScore}`;
+}  
+function init() {
+    drawCards(5, player.player1);
+    drawCards(5, player.computer);
+    const bgm = document.getElementById("bgm");
+    bgm.play();
+}
+
+init();
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -0,0 +1,171 @@
+// Armazenando os elementos do DOM em variáveis para evitar a busca repetida
+const scoreBox = document.getElementById("score_points");
+const avatar = document.getElementById("card-image");
+const name = document.getElementById("card-name");
+const type = document.getElementById("card-type");
+const playerFieldCard = document.getElementById("player-field-card");
+const computerFieldCard = document.getElementById("computer-field-card");
+const nextDuelButton = document.getElementById("next-duel");
+
+const state = {
+    score: {
+        playerScore: 0,
+        computerScore: 0,
+        scoreBox,
+    },
+    cardSprite: {
+        avatar,
+        name,
+        type,
+    },
+    fieldCards: {
+        player: playerFieldCard,
+        computer: computerFieldCard,
+    },
+    button: nextDuelButton,
+};  
+
+const player = {
+    player1: "player-cards",
+    computer: "computer-cards",
+};  
+
+const cardData = [
+    {
+        id: 0,
+        name: "Blue Eyes White Dragon",
+        type: "Paper",
+        img: "./src/assets/icons/dragon.png",
+        WinOf: [1],
+        LoseOf: [2],
+    },
+    {
+        id: 1,
+        name: "Dark Magician",
+        type: "Rock",
+        img: "./src/assets/icons/magician.png",
+        WinOf: [2],
+        LoseOf: [0],
+    },
+    {
+        id: 2,
+        name: "Exodia",
+        type: "Scissors",
+        img: "./src/assets/icons/exodia.png",
+        WinOf: [0],
+        LoseOf: [1],
+    },
+];
+
+function getRandomCardId() {
+    return Promise.resolve(Math.floor(Math.random() * cardData.length));
+}
+
+function setCardsField(cardId) {
+    return RemoveAllCardImages()
+      .then(() => getRandomCardId())
+      .then((computerCardId) => {
+          state.fieldCards.player.style.display = "block";
+          state.fieldCards.computer.style.display = "block";
+          state.fieldCards.player.src = cardData[cardId].img;
+          state.fieldCards.computer.src = cardData[computerCardId].img;
+          return checkDuelResults(cardId, computerCardId);
+      })
+      .then((duelResults) => {
+          updateScore();
+          drawButton(duelResults);
+      });
+}
+
+function checkDuelResults(playerCardId, computerCardId) {
+    let playerCard = cardData[playerCardId];
+    let duelResults = "Empate";
+
+    if (playerCard.WinOf.includes(computerCardId)) {
+      duelResults = "Ganhou";
+      playAudio("win");
+      state.score.playerScore++;
+    }
+
+    if (playerCard.LoseOf.includes(computerCardId)) {
+      duelResults = "Perdeu";
+      playAudio("lose");
+      state.score.computerScore++;
+    }
+
+    return Promise.resolve(duelResults);
+}
+
+function createCardImage(randomIdCard, fieldSide) {
+    const cardImage = document.createElement("img");
+    cardImage.setAttribute("height", "100px");
+    cardImage.setAttribute("src", "./src/assets/icons/card-back.png");
+    cardImage.setAttribute("data-id", randomIdCard);
+    cardImage.classList.add("card");
+
+    if (fieldSide === player.player1) {
+      cardImage.addEventListener("click", () => setCardsField(cardImage.getAttribute("data-id")));
+      cardImage.addEventListener("mouseover", () => drawSelectCard(randomIdCard));
+      cardImage.setAttribute("src", "./src/assets/icons/card-back.png");
+    }
+
+    return Promise.resolve(cardImage);
+}
+
+function RemoveAllCardImages() {
+  let cards = document.querySelector(".card-box.framed#computer-cards");
+  let imgElements = cards.querySelectorAll("img");
+  imgElements.forEach((img) => img.remove());
+
+  cards = document.querySelector(".card-box.framed#player-cards");
+  imgElements = cards.querySelectorAll("img");
+  imgElements.forEach((img) => img.remove());
+
+  return Promise.resolve();
+}
+
+function drawCards(cardNumbers, fieldSide) {
+  for (let i = 0; i < cardNumbers; i++) {
+      getRandomCardId()
+          .then((randomIdCard) => createCardImage(randomIdCard, fieldSide))
+          .then((cardImage) => document.getElementById(fieldSide).appendChild(cardImage));
+  }
+}
+
+function drawSelectCard(index) {
+  state.cardSprite.avatar.src = cardData[index].img;
+  state.cardSprite.name.innerText = cardData[index].name;
+  state.cardSprite.type.innerText = "Attribute: " + cardData[index].type;
+}
+
+function drawButton(text) {
+  state.button.innerText = text;
+  state.button.style.display = "block";
+}
+
+function resetDuel() {
+  state.cardSprite.avatar.src = "";
+  state.button.style.display = "none";
+  state.fieldCards.player.style.display = "none";
+  state.fieldCards.computer.style.display = "none";
+  drawCards(5, player.player1);
+  drawCards(5, player.computer);
+}
+
+function playAudio(status) {
+  const audio = new Audio(`./src/assets/audios/${status}.wav`);
+  audio.play();
+}
+
+function updateScore() {
+  state.score.scoreBox.innerText = `Win: ${state.score.playerScore} | Lose: ${state.score.computerScore}`;
+}
+
+function init() {
+  drawCards(5, player.player1);
+  drawCards(5, player.computer);
+  const bgm = document.getElementById("bgm");
+  bgm.play();
+}
+
+init();
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@

		# Yu-Gi-Oh \| Jo-ken-po Edition

		Jogo de jokenpo que criei para explicar conceitos de lógica de programação aplicados a jogos
Expand Down