Skip to content

Jogo de Cartas do Yu-Gi-Oh! #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Jogo de Cartas do Yu-Gi-Oh! #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
99 changes: 99 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yu-Gi-Oh Jo-Ken-po Edition</title>

<!-- Reset css -->
<link rel="stylesheet" href="/src/styles/reset.css">

<!-- Frameworks -->
<link rel="stylesheet" href="/src/styles/buttons.css">

<!-- Containers -->
<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=Press+Start+2P&display=swap" rel="stylesheet">

<!-- favicon -->
<link rel="icon" type="image/png" href="/src/assets/icons/millenium2.png"/>

<!-- Principal -->
<link rel="stylesheet" href="/src/styles/main.css">
</head>
<body>



<!-- Background com vídeo -->
<div class="bg-video">
<video autoplay muted loop>
<source src="/src/assets/video/yugi.mp4" type="video/mp4">
</video>
</div>

<div class="container">
<!-- Lado esquerdo -->
<div class="container__left framed-golden-2">
<!-- Score -->
<div class="score_box frame">
<span id="score_points">Win : 0 | Lose : 0</span>
</div>

<!-- Avatar da carta selecionada -->
<div class="menu_avatar">
<img id="card-image">
</div>

<!-- Detalhes da carta -->
<div class="card_details frame">
<p id="card-name">Select a Card</p>
<p id="card-type"></p>
</div>
</div>

<!-- Lado direito -->
<div class="container__right">
<div class="cardbox__container">

<!-- Área da mão do computador -->
<div class="card-box framed" id="computer_card"></div>

<!-- Campo de duelo -->
<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>

<!-- Botão centralizado -->
<div class="versus-result">
<button id="next" class="rpgui-button" style="display:none;">Próxima rodada</button>
</div>

<!-- Área da mão do jogador -->
<div class="card-box framed" id="player_card"></div>

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

<!-- Música de fundo -->
<audio id="bgm" >
<source src="./src/assets/audios/egyptian_duel.mp3" type="audio/mp3">
</audio>

<!-- Scripts -->
<script src="/src/scripts/engine.js" defer></script>
</body>
</html>
155 changes: 155 additions & 0 deletions src/scripts/engine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Loading