Skip to content

agregue un título #14

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
Bredalis wants to merge 5 commits into
base: master
Choose a base branch
from
Open

agregue un título #14

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
f16c3e6
Detalles ingresados en el juego
Bredalis Dec 12, 2023
61b3373
Se modifico el script
Feb 24, 2024
7c8899f
Se ha limpiado el codigo
Mar 30, 2024
e1731c8
Se le agrego un titulo
Jun 10, 2024
c1a31b3
Create README.md
Bredalis Jun 11, 2024
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Welcome to the Tic-Tac-Toe game repository! This project implements the classic Tic-Tac-Toe game using JS, HTML and CSS. It is a simple but fun game that can be played between two players.
6 changes: 4 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/128/5319/5319398.png" type="image/x-icon">
<script src="script.js" defer></script>
<title>Document</title>
<title>Tic-Tac-Toe</title>
</head>
<body>
<h1>✨ Tic Tac Toe ✨</h1>
<div class="board" id="board">
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
Expand All @@ -22,7 +24,7 @@
</div>
<div class="winning-message" id="winningMessage">
<div data-winning-message-text></div>
<button id="restartButton">Restart</button>
<button id="restartButton">Reiniciar</button>
</div>
</body>
</html>
29 changes: 15 additions & 14 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const X_CLASS = 'x'
const CIRCLE_CLASS = 'circle'

const X_CLASS = "x"
const CIRCLE_CLASS = "circle"
const WINNING_COMBINATIONS = [
[0, 1, 2],
[3, 4, 5],
Expand All @@ -10,27 +11,27 @@ const WINNING_COMBINATIONS = [
[0, 4, 8],
[2, 4, 6]
]
const cellElements = document.querySelectorAll('[data-cell]')
const board = document.getElementById('board')
const winningMessageElement = document.getElementById('winningMessage')
const restartButton = document.getElementById('restartButton')
const winningMessageTextElement = document.querySelector('[data-winning-message-text]')
const cellElements = document.querySelectorAll("[data-cell]")
const board = document.getElementById("board")
const winningMessageElement = document.getElementById("winningMessage")
const restartButton = document.getElementById("restartButton")
const winningMessageTextElement = document.querySelector("[data-winning-message-text]")
let circleTurn

startGame()

restartButton.addEventListener('click', startGame)
restartButton.addEventListener("click", startGame)

function startGame() {
circleTurn = false
cellElements.forEach(cell => {
cell.classList.remove(X_CLASS)
cell.classList.remove(CIRCLE_CLASS)
cell.removeEventListener('click', handleClick)
cell.addEventListener('click', handleClick, { once: true })
cell.removeEventListener("click", handleClick)
cell.addEventListener("click", handleClick, { once: true })
})
setBoardHoverClass()
winningMessageElement.classList.remove('show')
winningMessageElement.classList.remove("show")
}

function handleClick(e) {
Expand All @@ -49,11 +50,11 @@ function handleClick(e) {

function endGame(draw) {
if (draw) {
winningMessageTextElement.innerText = 'Draw!'
winningMessageTextElement.innerText = "Empate!"
} else {
winningMessageTextElement.innerText = `${circleTurn ? "O's" : "X's"} Wins!`
winningMessageTextElement.innerText = `${circleTurn ? "O" : "X"} Gana!`
}
winningMessageElement.classList.add('show')
winningMessageElement.classList.add("show")
}

function isDraw() {
Expand Down
13 changes: 12 additions & 1 deletion styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,19 @@
--mark-size: calc(var(--cell-size) * .9);
}

* {
font-family: monospace;
}

body {
margin: 0;
background-color: #c7f9cc;
}

h1 {
font-size: 80px;
text-align: center;
margin-bottom: -120px;
}

.board {
Expand Down Expand Up @@ -109,7 +120,7 @@ body {
.board.circle .cell:not(.x):not(.circle):hover::after {
width: calc(var(--mark-size) * .7);
height: calc(var(--mark-size) * .7);
background-color: white;
background-color: #c7f9cc;
}

.winning-message {
Expand Down