Skip to content

lab Criando um Jogo de Cartas do Yu-Gi-Oh! com JavaScript e CSS #22

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 5 commits into
base: main
Choose a base branch
from
Open

lab Criando um Jogo de Cartas do Yu-Gi-Oh! com JavaScript e CSS #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2884337
test
BrunaSilva701 Aug 21, 2025
6856dbb
test
BrunaSilva701 Aug 21, 2025
f994352
text2
BrunaSilva701 Aug 21, 2025
d987099
add html
BrunaSilva701 Aug 24, 2025
5423bb9
final
BrunaSilva701 Aug 27, 2025
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
76 changes: 76 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!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</title>

<link rel="stylesheet" href="src/styles/buttons.css">
<link rel="stylesheet" href="src/styles/containers_and_frames.css">
<link rel="stylesheet" href="src/styles/main.css">
<link rel="stylesheet" href="src/styles/reset.css">

<!-- fontes -->
<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="shortcut icon" href="src/assets/favicon/Favicon.ico" class="favicon" type="image/x-icon">

</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>
<div class="card-box__container framed" id="computer-card"></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="computere-field-card" height="180px" width="125px">
</div>
</div>

<div class="vesus-bottom">
<button id="next-duel" class="rpgui-button" onclick="resetDuel()">GANHOU</button>
</div>
</div>

<div class="card-box__container framed" id="player-cards"></div>
</div>
</div>

<script crs="./scr/srcipts/engine.js" defer></script>
</body>
</html>
208 changes: 208 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,208 @@
const state ={ //objeto de objetos
score:{
playerScore: 0,
computerScore: 0,
scoreBox: document.getElementById ("score_points")
},
cardSprites:{
avatar: documente.getElementById ("card_image"),
name: documente.getElementById ("card-name"),
type: documente.getElementById ("card_type"),
},
fieldCards:{
player: documente.getElementById ("player-field-card"),
computer: documente.getElementById ("computer-field-card"),
},
playerSides: {
player1: "player-cards",
player1BOX: document.querySelector("#player-cards"),
computer: "computer-cards",
computerBOX: document.querySelector("#computer-cards")
},
actions:{
button:document.getElementById("next-duel"),
},
};

const playerSides = {
player1: "player-cards",
computer: "computer-cards",
}
const pathImages = "./src/assets/icons";

const cardData =[ //O pedra, papel ou tesoura
{
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: "Exodian",
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 creatCardImage(IdCard, fieldSide){
const cardImage = document.createElement("img");
cardImage.setAttribute("height", "100px");
cardImage.setAttribute("src", "./src/assets/icons/card-back.png");
cardImage.setAttribute("data-id", IdCard);
cardImage.classList.add("card");


if(fieldSide === playerSides.player1){
cardImage.addEventListener("mouseover", ()=>{
drawSelectCard(IdCard);


cardImage.addEventListener("click", ()=> {
setCardsField(cardImage.getAttribute("data-id"));
});
});
}


return cardImage;
}

async function setCardsField(cardId){
await removeAllCardsImage(); //remove todas a cartas antes

let computerCardId = await getRandomCardId(); //sorteia carta aleatoria para o computador

await showhiddenCardFieldImages(true)

await hiddenCardDetails();

state.fieldCards.player.src = cardData[cardId].img;
state.fieldCards.computer.src = cardData[computerCardId].img;

let duelResults = await checkDuelResults(cardId, computerCardId); //checa os resultados comparando os id's das cartas

await updateScore();
await drawButton(duelResults)
}

async function showhiddenCardFieldImages (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"
}
}
async function hiddenCardDetails() {
state.cardSprites.avatar.src = "";
state.cardSprites.name.innerText = "";
state.cardSprites.type.innerText = "";
}

async function drawButton(text){
state.actions.button.innerText = text
state.actions.button.style.display = "block";
}

async function updateScore(){
state.score.scoreBox.innerText = `Win: ${state.score.playerScore} | Lose ${state.score.computercore}`
}

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 removeAllCardsImage(){
let cards = state.playerSides.computerBOX; //recupera as cartas do jogador
let imgElements = cards.querySelectorAll("img") //pega cada uma das imagens
imgElements.forEach((img) => img.remove()); //remove a carta do jogador

cards = state.playerSides.playerBOX;
imgElements = cards.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 creatCardImage(randomIdcard, fieldSide);

documente.getElementById(fieldSide).appendChild(cardImage)
}
}

//resetar duelo
async function resetDuel() {
state.cardSprites.avatar.src = "";
state.actions.button.style.display = "none";

state.fieldCards.player.style.display = "none"
state.fieldCards.computer.style.display = "none"

init();
}

//audio para se perder ou ganhar
async function playAudio(status) {
const audio = new Audio(`./src/assets/audios/${status}.wav`)
audio.play();
}

function init(){
showhiddenCardFieldImages(false)

//quantas cartas vai sacar
drawCards(5, "playerSides.player1");
drawCards(5, "playerSides.computer");

//tocar musica de fundo
const bgm = document.getElementById("bgm");
bgm.play();
}

init();
Loading