diff --git a/index.html b/index.html index e69de29b..130ed149 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,99 @@ + + + + + + Yu-Gi-Oh Jo-Ken-po Edition + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ Win : 0 | Lose : 0 +
+ + +
+ +
+ + +
+

Select a Card

+

+
+
+ + +
+
+ + +
+ + +
+
+
+ +
+ +
+ +
+
+
+ + +
+ +
+ + +
+ +
+
+
+ + + + + + + + diff --git a/src/scripts/engine.js b/src/scripts/engine.js index e69de29b..3285f867 100644 --- a/src/scripts/engine.js +++ b/src/scripts/engine.js @@ -0,0 +1,155 @@ +const state = { + player: { + score: 0, + hand: document.getElementById("player_card"), + field: document.getElementById("player-field-card"), + }, + computer: { + score: 0, + hand: document.getElementById("computer_card"), + field: document.getElementById("computer-field-card"), + }, + ui: { + scoreBox: document.getElementById("score_points"), + avatar: document.getElementById("card-image"), + name: document.getElementById("card-name"), + type: document.getElementById("card-type"), + button: document.getElementById("next"), + } +}; + +const cardData = [ + { id: 0, name: "Blue-Eyes White Dragon", type: "Paper", img: "./src/assets/icons/dragon.png", WinOf: [1], LoserOf: [2] }, + { id: 1, name: "Dark Magician", type: "Rock", img: "./src/assets/icons/magician.png", WinOf: [2], LoserOf: [0] }, + { id: 2, name: "Exodia the Forbidden One", type: "Scissors", img: "./src/assets/icons/exodia.png", WinOf: [0], LoserOf: [1] } +]; + +// Sorteia um ID de carta +function getRandomCardId() { + const randomIndex = Math.floor(Math.random() * cardData.length); + return cardData[randomIndex].id; +} + +// Cria uma carta na mão +function createCardImage(idCard, fieldSide) { + const cardImage = document.createElement("img"); + cardImage.setAttribute("height", "100px"); + cardImage.setAttribute("src", "./src/assets/icons/card-back.png"); + cardImage.setAttribute("data-card-id", idCard); + cardImage.classList.add("card"); + + if (fieldSide === state.player.hand.id) { + cardImage.addEventListener("mouseover", () => { + drawSelectCard(idCard); + }); + cardImage.addEventListener("click", () => { + setCardsField(idCard); + }); + } + return cardImage; +} + +// Quando jogador escolhe carta +function setCardsField(cardId) { + removeAllCardImages(); + + let computerCardId = getRandomCardId(); + + state.player.field.style.display = "block"; + state.computer.field.style.display = "block"; + + state.player.field.src = cardData[cardId].img; + state.computer.field.src = cardData[computerCardId].img; + + let duelResults = checkDuelResults(cardId, computerCardId); + + updateScore(); + drawButton(duelResults); +} + +// Verifica resultado do duelo +function checkDuelResults(playerCardId, computerCardId) { + let duelResults = "Empate"; + let playerCard = cardData[playerCardId]; + + if (playerCard.WinOf.includes(computerCardId)) { + duelResults = "Vitória"; + playerAudio("win"); + state.player.score++; + } else if (playerCard.LoserOf.includes(computerCardId)) { + duelResults = "Derrota"; + playerAudio("lose"); + state.computer.score++; + } + return duelResults; +} + +// Atualiza score +function updateScore() { + state.ui.scoreBox.innerText = `Win: ${state.player.score} | Lose: ${state.computer.score}`; +} + +// Mostra botão "Next" +function drawButton(duelResults) { + state.ui.button.innerText = duelResults; + state.ui.button.style.display = "block"; + + state.ui.button.addEventListener("click", () => { + initGame(); + }, { once: true }); +} + +// Remove cartas das mãos +function removeAllCardImages() { + state.computer.hand.innerHTML = ""; + state.player.hand.innerHTML = ""; +} + +// Mostra info da carta ao passar o mouse +function drawSelectCard(index) { + state.ui.avatar.src = cardData[index].img; + state.ui.name.innerText = cardData[index].name; + state.ui.type.innerText = "Attribute: " + cardData[index].type; +} + +// Desenha as cartas +function drawCards(cardNumber, fieldSide) { + for (let i = 0; i < cardNumber; i++) { + const randomIdCard = getRandomCardId(); + const cardImage = createCardImage(randomIdCard, fieldSide); + document.getElementById(fieldSide).appendChild(cardImage); + } +} + +// Áudio +function playerAudio(status) { + const audio = new Audio(`./src/assets/audios/${status}.wav`); + audio.play(); + + +} + + const bgm = document.getElementById("bgm") + + bgm.play() + + +// Reseta interface +function resetGameUI() { + state.ui.avatar.src = ""; + state.ui.name.innerText = "Select a Card"; + state.ui.type.innerText = ""; + state.player.field.style.display = "none"; + state.computer.field.style.display = "none"; + state.ui.button.style.display = "none"; +} + +// Inicia jogo +function initGame() { + resetGameUI(); + drawCards(5, state.player.hand.id); + drawCards(5, state.computer.hand.id); +} + + +initGame(); diff --git a/src/styles/main.css b/src/styles/main.css index e69de29b..2b93258b 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -0,0 +1,240 @@ + +body{ + cursor: url("../assets/cursor/yugicursor.png"), default; + margin: 0; + padding: 0; +} + +/* cursor especial para hover */ +button, +a, +img:hover, +button:hover, +a:hover{ + cursor: url("../assets/cursor/yamiyugicursorGLOW.png"), auto; +} + + + +/* ---------------- BACKGROUND ---------------- */ +.bg-video{ + position: absolute; + z-index: -2; + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + justify-content: center; +} + +.bg-video video{ + height: 100%; +} + +.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, 1) 100% + ); +} + +/* ---------------- LAYOUT ---------------- */ +.container{ + position: relative; + z-index: 3; + height: 100vh; + display: flex; +} + +.container__left{ + width: 35%; + min-width: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding: 1rem; +} + +.container__right{ + width: 65%; + padding: 1rem; +} + +.score_box{ + background-color: #fff; + padding: 20px; + text-align: center; +} + +.frame{ + border: 3px solid #000; + border-radius: 10px; +} + +.card_details{ + background-color: #fff; + padding: 1rem; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + height: auto; + width: 100%; +} + +#card-name{ + font-size: 0.8rem; + text-align: center; +} + +#card-type{ + font-size: 1rem; + text-align: center; +} + +.cardbox__container{ + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + align-items: center; + padding: 2rem; +} + +/* ---------------- DUEL ---------------- */ +.card-versus__container{ + display: flex; + flex-direction: row; + height: 300px; + justify-content: center; + align-items: center; + margin: 4rem 0; +} + +.versus-top, +.versus-bottom{ + display: flex; + align-items: center; + justify-content: center; +} + +.versus-bottom{ + margin-top: 1rem; +} + +.versus-result{ + margin-top: 1.5rem; + display: flex; + justify-content: center; +} + +#next{ + display: none; + padding: 0.8rem 1.5rem; + font-size: 1rem; + border-radius: 8px; +} + +/* ---------------- CARTAS ---------------- */ +.card-box{ + height: auto; + min-height: 8rem; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; /* para caber em telas pequenas */ + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.card-infield{ + height: 11.2rem; + width: 8rem; + border: 1px solid #fff; + border-radius: 8px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.card{ + transition: transform 0.2s; + max-width: 100px; +} + +.card:hover{ + transform: scale(1.2); +} + +/* ---------------- RESPONSIVIDADE ---------------- */ +@media (max-width: 1024px) { + .container { + flex-direction: column; + height: auto; + } + + .container__left, + .container__right { + width: 100%; + min-width: unset; + } + + .cardbox__container { + padding: 1rem; + } + + .card-versus__container { + flex-direction: column; + height: auto; + margin: 2rem 0; + } + + .versus-top, + .versus-bottom { + flex-direction: column; + } + + .card-infield { + margin-bottom: 1rem; + } +} + +@media (max-width: 600px) { + #card-name { + font-size: 0.7rem; + } + + #card-type { + font-size: 0.8rem; + } + + .score_box { + font-size: 0.9rem; + padding: 10px; + } + + .card { + max-width: 80px; + } + + .card-infield { + height: 9rem; + width: 6rem; + } + + #next { + font-size: 0.9rem; + padding: 0.6rem 1rem; + } +}