From 9c14d187b6238e42cc1ebf3dbcac673b8c8c093d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Neto?= Date: Thu, 21 Nov 2024 20:40:22 -0300 Subject: [PATCH] created content from index.html, main.css and engine.js files --- index.html | 83 +++++++++++++++ src/scripts/engine.js | 229 ++++++++++++++++++++++++++++++++++++++++++ src/styles/main.css | 143 ++++++++++++++++++++++++++ 3 files changed, 455 insertions(+) diff --git a/index.html b/index.html index e69de29b..36698e45 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + Yu-Gi-Oh Jo-ken-po Edition + + + + + + +
+ +
+
+
+
+ Win : 0 | lose : 0 +
+
+ +
+
+

Selecione

+

Uma Carta

+
+
+
+
+
+ +
+
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/src/scripts/engine.js b/src/scripts/engine.js index e69de29b..ecc50770 100644 --- a/src/scripts/engine.js +++ b/src/scripts/engine.js @@ -0,0 +1,229 @@ +const state = { + score: { + playerScore: 0, + computerScore: 0, + scoreBox: document.getElementById("score_points"), + }, + cardSprites: { + avatar: document.getElementById("card-image"), + name: document.getElementById("card-name"), + type: document.getElementById("card-type"), + }, + playerSides: { + player1: "player-cards", + player1BOX: document.querySelector("#player-cards"), + computer: "computer-cards", + computerBOX: document.querySelector("#computer-cards"), + }, + fieldCards: { + player: document.getElementById("player-field-card"), + computer: document.getElementById("computer-field-card"), + }, + actions: { + button: document.getElementById("next-duel"), + }, +}; + +const pathImages = "./src/assets/icons/" + +const cardData = [ + { + id: 0, + name: "Blue Eyes White Dragon", + type: "Paper", + img: `${pathImages}dragon.png`, + WinOf: [1], + LoseOf: [2], + }, + + { + id: 1, + name: "Dark Magician", + type: "Rock", + img: `${pathImages}magician.png`, + WinOf: [2], + LoseOf: [0], + }, + + { + id: 2, + name: "Exodia", + type: "Scissors", + img: `${pathImages}exodia.png`, + WinOf: [0], + LoseOf: [1], + }, +]; + +async function getRandomCardId() { + const randomIndex = Math.floor(Math.random() * cardData.length); + return cardData[randomIndex].id; +} + +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 === state.playerSides.player1) { + cardImage.addEventListener("mouseover", () => { + drawSelectCard(randomIdCard); + }); + + cardImage.addEventListener("click", () => { + setCardsField(cardImage.getAttribute("data-id")); + }); + } + + return cardImage; +} + +async function setCardsField(cardId) { + await removeAllCardsImages(); + + let computerCardId = await getRandomCardId(); + + await showHiddenCardFieldsImages(true); + + await hiddenCardDetails(); + + await drawCardsInField(cardId, computerCardId); + + let duelResults = await checkDuelResults(cardId, computerCardId); + + await updateScore(); + await drawButton(duelResults); +} + +async function drawCardsInField(cardId, computerCardId) { + state.fieldCards.player.src = cardData[cardId].img; + state.fieldCards.computer.src = cardData[computerCardId].img; +} + +function showHiddenCardFieldsImages(value) { + + if(value === true) { + state.fieldCards.player.style.display = "block"; + state.fieldCards.computer.style.display = "block"; + } + + if(value === false) { + state.fieldCards.player.style.display = "none"; + state.fieldCards.computer.style.display = "none"; + } +} + +function hiddenCardDetails() { + state.cardSprites.avatar.src = ""; + state.cardSprites.name.innerText = ""; + state.cardSprites.type.innerText = ""; +} + +async function drawButton(text) { + state.actions.button.innerText = text.toUpperCase(); + state.actions.button.style.display = "block"; +} + +async function updateScore() { + state.score.scoreBox.innerText = `Win: ${state.score.playerScore} | lose: ${ state.score.computerScore}`; +} + +async function checkDuelResults(playerCardId, computerCardId) { + let duelResults = "draw"; + let playerCard = cardData[playerCardId]; + + if (playerCard.WinOf.includes(computerCardId)) { + duelResults = "win"; + state.score.playerScore++; + } + + if (playerCard.LoseOf.includes(computerCardId)) { + duelResults = "lose"; + state.score.computerScore++; + } + + await playAudio(duelResults) + + return duelResults; + +} + +async function removeAllCardsImages() { + let { computerBOX, player1BOX } = state.playerSides; + let imgElements = computerBOX.querySelectorAll("img"); + + imgElements.forEach((img) => img.remove()); + imgElements = player1BOX.querySelectorAll("img"); + imgElements.forEach((img) => img.remove()); +} + +async function drawSelectCard(index) { + state.cardSprites.avatar.src = cardData[index].img; + state.cardSprites.name.innerText = cardData[index].name; + state.cardSprites.type.innerText = "Attribute : " + cardData[index].type; +} + +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); + } +} + +async function resetDuel() { + state.cardSprites.avatar.src = ""; + state.cardSprites.name.innerText = ""; + state.cardSprites.type.innerText = ""; + + state.actions.button.style.display = "none"; + + state.fieldCards.player.style.display = "none"; + state.fieldCards.computer.style.display = "none"; + + await removeAllCardsImages(); + + drawCards(5, state.playerSides.player1); + drawCards(5, state.playerSides.computer); + + updateScore(); + +} + +state.actions.button.addEventListener("click", () => { + resetDuel(); +}) + +async function playAudio(status) { + const audio = new Audio(`./src/assets/audios/${status}.wav`); + try { + await audio.play(); + } catch(error) { + console.error("Erro ao reproduzir a música de fundo"); + } +} + +function init() { + + showHiddenCardFieldsImages(false); + + drawCards(5, state.playerSides.player1); + drawCards(5, state.playerSides.computer); + + updateScore(); + + const bgm = document.getElementById("bgm"); + try { + bgm.play(); + } catch (error) { + console.error("Erro ao reproduzir a música de fundo") + } +} + +document.addEventListener("DOMContentLoaded", () => { + init(); +}); \ No newline at end of file diff --git a/src/styles/main.css b/src/styles/main.css index e69de29b..9ff06cb0 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -0,0 +1,143 @@ +body { + cursor: url("../assets/cursor/yugicursor.png"), default; +} + +button, a, img:hover, button:hover, a:hover { + cursor: url("../assets/cursor/yamiyugicursorGLOW.png"), auto; +} + +.bg-video { + position: absolute; + z-index: -2; + width: 100vw; + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; +} + +.bg-video .video { + width: 100vw; + height: 100vh; + object-fit: cover; +} + +.bg-video::after { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 1) 0%, + rgba(0, 0, 0, 0.8) 50%, + rgba(0, 0, 0, 0.4) 100% + ); +} + +.container { + position: relative; + z-index: 3; + display: flex; + height: 100vh; +} + +.container__left { + width: 35%; + min-width: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} + +.container__right { + width: 65%; +} + +.score_box { + background-color: #fff; + padding: 30px; +} + +.frame { + border: 3px solid #000; + border-radius: 5px; +} + +.card_details { + background-color: #fff; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + height: 6rem; + width: 100%; +} + +#card-name { + font-size: 0.8rem; +} + +#card-type { + font-size: 1rem; +} + +.card-box__container { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0.3rem; +} + +.card-versus__container { + display: flex; + flex-direction: column; + justify-items: center; + align-content: center; + padding-top: 0.1rem; + height: 300px; +} + +.versus-top, .versus-botton { + display: flex; + align-items: center; + justify-content: center; +} + +.versus-botton { + margin-top: 1rem; +} + +#next-duel { + display: none; +} + +.card-box { + height: 9rem; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} + +.card-infield { + height: 11.2rem; + width: 8rem; + border: 1px solid #fff; + border-radius: 8px; +} + +.card { + transition: transform 0.2s; +} + +.card:hover { + transform: scale(1.2); +} +