Gente, sou estudante de TI e estou fazendo um jogo da velha, mas nao consigo deixar um do lado do outro, alguém pode me ajudar??? por favooor
abaixo está o codigo:
<!DOCTYPE html>
<html>
<head>
<title>Jogo da Velha (Em construção...)</title>
</head>
<link rel="stylesheet" type="text/css" href="jogoVelha.css">
<body>
<div id="conteudo">
<div id="zero" onclick="jogar(0)"></div>
<div id="um" onclick="jogar(1)"></div>
<div id="dois" onclick="jogar(2)"></div>
<div id="tres" onclick="jogar(3)"></div>
<div id="quatro" onclick="jogar(4)"></div>
<div id="cinco" onclick="jogar(5)"></div>
<div id="seis" onclick="jogar(6)"></div>
<div id="sete" onclick="jogar(7)"></div>
<div id="oito" onclick="jogar(8)"></div>
</div>
<script type="text/javascript">
var jogada=0;
var memoria = [0,0,0,0,0,0,0,0];
//var memoria2 = [0,0,0];
//exemplo de quem venceu
//if (memoria[0]==memoria[1] && memoria[1]==memoria[2]) {
//alert("Vencedor!");
//exemplo= X=10, O=1.
//Opcional!!
//}
function jogar(pos) {
jogada++; //jogadas=jogadas +1
var div;
if (pos==0) {
div="zero";
}
if (pos==1) {
div="um";
}
if (pos==2) {
div="dois";
}
if (pos==3) {
div="tres";
}
if (pos==4) {
div="quatro";
}
if (pos==5) {
div="cinco";
}
if (pos==6) {
div="seis";
}
if (pos==7) {
div="sete";
}
if (memoria[pos]==0) {
if (jogada%2==0) {
document.getElementById(div).innerHTML = "O";
}else{
document.getElementById(div).innerHTML = "X";
}
}else{
alert("Procure outra posição!!!");
jogada--;
}
memoria[pos]=1;
}
</script>
</body>
</html>
css
#conteudo{
width: 160px;
height: 160px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
background-color: gray;
margin-left: auto;
margin-right: auto;
color: white;
font-size: 60px;
text-align: center;
}
#zero{
width: 100%;
height: 80px;
background-color: orchid;
float: left;
}
#um{
width: 100%;
height: 80px;
background-color: violet;
float: left;
}
#dois{
width: 100%;
height: 80px;
background-color: plum;
float: left;
}
#tres{
width: 100%;
height: 80px;
background-color: mediumvioletred;
float: left;
}
#quatro{
width: 100%;
height: 80px;
background-color: deeppink;
float: left;
}
#cinco{
width: 100%;
height: 80px;
background-color: hotpink;
float: left;
}
#seis{
width: 100%;
height: 80px;
background-color: palevioletred;
float: left;
}
#sete{
width: 100%;
height: 80px;
background-color: lightpink;
float: left;
}
