This is what i have so far, the click functions work just fine. But im having some trouble in writing/coming up with how to write the win condition. This is the javascript and html i have currently. I expect my last if statement to change the player one score to 1 if 3 x's appear in the game. But nothing is happening
let playerOne = 'X'
let playerTwo = "O"
$('.square').click(function(){
if(turn === 1){
$(this).text(playerOne)
turn = 2
$('.turn').text('Player Two')
}
else {
$(this).text(playerTwo)
turn = 1
$('.turn').text('Player One')
}
})
if(playerOne === 3){
$('.score1') = 1
}`
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script defer src="app.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<header><h1>Tic Tac Toe!</h1></header>
<h2>Player One Score<span class = 'score1'> 0</span></h2>
<h2>Player Two Score<span class = 'score2'> 0</span></h2>
<h2>Turn: <span class = 'turn'> Player One</span></h2>
<div class = 'grid'>
<div class="row-1">
<div class="square"
id = '1'>
</div>
<div class="square"
id = '2'>
</div>
<div class="square"
id = '3'>
</div>
</div>
<div class="row-2">
<div class="square"
id = '4'>
</div>
<div class="square"
id = '5'>
</div>
<div class="square"
id = '6'>
</div>
</div>
<div class="row-3">
<div class="square"
id = '7'>
</div>
<div class="square"
id = '8'>
</div>
<div class="square"
id = '9'>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>`
Aucun commentaire:
Enregistrer un commentaire