Add files via upload

AqueleQueSemeiaOConhecimento · Nov 20, 2023 · 438f9e9 · 438f9e9
commit 438f9e9
Show file tree

Hide file tree

Showing 9 changed files with 336 additions and 0 deletions.
diff --git a/8bits.mp3 b/8bits.mp3
diff --git a/braind.gif b/braind.gif
diff --git a/giphy.gif b/giphy.gif
diff --git a/giphy1.gif b/giphy1.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jogo da Velha</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <button class="som" id="som"></button>
+    <div class="board">
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+    </div>
+
+    <div class="winning-message">
+        <p class="winning-text">Venceu!</p>
+        <button class="reiniciar">Reiniciar!</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,158 @@
+//sao as celulas
+const cellElements = document.querySelectorAll(".cell");
+
+//Aponta o proximo elemento que vai ser jogado, x ou circle
+const board = document.querySelector(".board");
+
+//Texto onde vai aparecer quem venceu e quem perdeu
+let texto = document.querySelector(".winning-text")
+
+//pegando botão da musica
+const btn_musica = document.getElementById("som")
+
+//Div que precisa de display flex pra aparecer no final
+const div = document.querySelector(".winning-message")
+
+//Empate
+const gif = "giphy.gif"
+
+//Vitória
+const gifVit = "giphy1.gif"
+
+//Botão de reiniciar o game
+const button = document.querySelector(".reiniciar")
+
+//Chamando aqui, mas é usada para verificar se é o turno de circle ou não
+let isCircleTurn;
+
+//imagens do jogo
+const somUp = "volume_up.png"
+const somOff = "volume_off.png"
+
+
+
+//Som do jogo
+const somzeira = new Audio("8bits.mp3")
+somzeira.loop=-1
+
+let variavelDeControle = true
+
+//Combinações da vitoria de um player
+const winningCombinations = [
+    [0,1,2],
+    [3,4,5],
+    [6,7,8],
+    [0,3,6],
+    [1,4,7],
+    [2,5,8],
+    [0,4,8],
+    [2,4,6]
+]
+
+//Função que permite evento de click so 1 vez por celula e inicia com X sendo o primeiro a jogar
+const startGame = () => {
+    isCircleTurn = false;
+    for(const cell of cellElements) {
+        cell.classList.remove("circle")
+        cell.classList.remove("x")
+        cell.removeEventListener("click", handleClick)
+        cell.addEventListener("click", handleClick, {once:true});
+    }
+    setClassHover();
+    div.classList.remove("classDisplayFlex")
+}
+
+//Função pra verificar empate
+const endGame = (isDraw) => {
+    if(isDraw) {texto.innerText = "Empate!"
+    texto.style.backgroundImage = "url('"+ gif +"')"
+}
+    else{
+        texto.innerText = isCircleTurn ? "O Venceu!" : "X Venceu!"
+        texto.style.backgroundImage = "url('"+ gifVit +"')"
+}
+    div.classList.add("classDisplayFlex")
+}
+
+
+//Função que vê se algum player ganhou
+const checkForWin = (player) => {
+    return winningCombinations.some(combination => {
+          return combination.every(index => {
+            return cellElements[index].classList.contains(player);
+          })      
+    })
+}
+
+const checkForDraw = () => {
+    return [...cellElements].every(cell => {
+        return cell.classList.contains("x") || cell.classList.contains("circle")
+    })
+}
+
+//Verifica se é vez de x ou circle jogar
+const placeMark = (cell, classToAdd) => {
+    cell.classList.add(classToAdd);
+}
+
+//Adiciona e remove class, ela foi chamada no startGame e swapTurns
+const setClassHover = () => {
+    board.classList.remove("circle")
+    board.classList.remove("x")
+    if(isCircleTurn){
+        board.classList.add("circle");
+    }
+    else{
+        board.classList.add("x");
+    }
+}
+
+//Adiciona e remove as classes do board para que o jogo ocorra
+const swapTurns = () => {
+    isCircleTurn = !isCircleTurn
+    setClassHover()
+}
+
+//Função que comanda quase tudo, ela pega os elementos e joga para outras função, ela faz coisas
+//como verificar vitória e empate, adicionar classes e por ai vai
+const handleClick = (el) => {
+    //Colocando a marca X ou circle
+    const cell = el.target;
+    const classToAdd = isCircleTurn ? "circle": "x";
+
+    placeMark(cell, classToAdd);
+
+    const isWin = checkForWin(classToAdd);
+
+    const isDraw = checkForDraw()
+    //Verifica empate ou vitoria
+    if(isWin){
+        endGame(false)
+    } else if(isDraw){
+        endGame(true)
+    }
+    else{
+        swapTurns();
+    }
+
+}
+
+//Chamando função startGame()
+startGame()
+
+//Reiniciar o game
+button.addEventListener("click", startGame)
+
+//Musica, da play na musica e muda a figurinha da musica/icone
+btn_musica.addEventListener("click", (evt) => {
+    if(variavelDeControle){
+        somzeira.play()
+        btn_musica.style.backgroundImage = "url('" + somUp + "')";
+    }
+    else{
+        somzeira.pause()
+        btn_musica.style.backgroundImage = "url('" + somOff + "')";
+    }
+    variavelDeControle = !variavelDeControle
+
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,149 @@
+* {
+    box-sizing: border-box;
+    margin:0;
+    padding: 0;
+}
+
+body{
+    height: 100vh;
+    width: 100vw;
+    background:linear-gradient(90deg, rgb(23, 25, 131)0%, rgb(99, 201, 167)100%);
+    background-image:url(braind.gif);
+}
+
+.board{
+    display: grid;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-content: center;
+    justify-items: center;
+    align-items: center;
+    grid-template-columns: repeat(3, auto);
+}
+
+.board.x .cell:not(.x):not(.circle):hover::after,
+.board.x .cell:not(.x):not(.circle):hover::before,
+.board.circle .cell:not(.x):not(.circle):hover::after,
+.board.circle .cell:not(.x):not(.circle):hover::before {
+    background: rgba(255, 255, 255, 0.3) !important;
+}
+
+.cell{
+    width: 100px;
+    height: 100px;
+    border: 2px solid white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.cell.x, .cell.circle {
+    cursor: not-allowed;
+}
+
+.cell:nth-child(1), .cell:nth-child(2), .cell:nth-child(3){
+    border-top: none;
+}
+
+.cell:nth-child(1), .cell:nth-child(4), .cell:nth-child(7){
+    border-left: none;
+}
+
+.cell:nth-child(3), .cell:nth-child(6), .cell:nth-child(9){
+    border-right: none;
+}
+
+.cell:nth-child(7), .cell:nth-child(8), .cell:nth-child(9){
+    border-bottom: none;
+}
+
+.cell.x::before,
+.cell.x::after,
+.board.x .cell:not(.x):not(.circle):hover::after,
+.board.x .cell:not(.x):not(.circle):hover::before {
+    content:"";
+    height: calc(100px * 0.15);
+    width: calc(100px * 0.9);
+    background: white;
+    position: absolute;
+}
+
+.cell.x::before,
+.board.x .cell:not(.x):not(.circle):hover::before{
+    transform: rotate(45deg);
+}
+
+.cell.x::after,
+.board.x .cell:not(.x):not(.circle):hover::after{
+    transform: rotate(-45deg);
+}
+
+
+.cell.circle::before,
+.cell.circle::after,
+.board.circle .cell:not(.x):not(.circle):hover::after,
+.board.circle .cell:not(.x):not(.circle):hover::before 
+{
+    content:"";
+    height: calc(100px * 0.9);
+    width: calc(100px * 0.9);
+    background: white;
+    position: absolute;
+    border-radius: 50%;
+}
+
+.winning-message {
+    display: none;
+    position: fixed;
+    top:0;
+    left:0;
+    right: 0;
+    bottom: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.8);
+    flex-direction: column;
+}
+
+.reiniciar{
+    font-size: 2.5rem;
+    background-color: rgba(65, 185, 131, 1);
+    padding: 10px 15px;
+    cursor: pointer;
+    border-radius: 5px;
+    border: none;
+    margin-top: 16px;
+    color: white;
+}
+
+.reiniciar:hover{
+    color: rgba(65, 185, 131, 1);
+    background-color: white;
+}
+
+.winning-text{
+    color:white;
+    font-size: 5rem;
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 300px;
+    width: 520px;
+}
+
+.classDisplayFlex{
+    display: flex !important;
+}
+
+.som{
+    width: 30px;
+    height: 30px;
+    position: fixed;
+    top: 75px;
+    left: 70px;
+    background-image: url(volume_off.png);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
diff --git a/volume_off.png b/volume_off.png
diff --git a/volume_up.png b/volume_up.png