Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 83 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Reset CSS -->
<link rel="stylesheet" href="./src/styles/reset.css">
<!-- Framework -->
<link rel="stylesheet" href="./src/styles/buttons.css">
<link rel="stylesheet" href="./src/styles/containers_and_frames.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!-- FavIcon -->
<link rel="shortcut icon" href="./src/assets/favicon/Favicon.ico" type="image/x-icon">
<!-- Main Style -->
<link rel="stylesheet" href="./src/styles/main.css">

<title>Yu-Gi-Oh Jo-ken-po Edition</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">Selecione</p>
<p id="card-type">Uma Carta</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-botton">
<button id="next-duel" class="rpgui-button" onclick="resetduel()">
GANHOU!
</button>
</div>
</div>
<div class="card-box framed" id="player-cards">

</div>
</div>
</div>
</div>





<script src="./src/scripts/engine.js" defer></script>
</body>

</html>
229 changes: 229 additions & 0 deletions src/scripts/engine.js
Original file line number Diff line number Diff line change
@@ -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();
});
Loading