I'm trying to make a game of the old one in js, however I can not check if the filled-in index is different from 1 or 2. Any solution? I'm trying to give return in the array but it looks like it will not.
Code: link
Error in chrome:
tictactoe.js: 99 Uncaught TypeError: Can not set property 'innerHTML' of null
at playIA (tictactoe.js: 99)
at tictactoe.js: 10
I noticed 3 errors in your code:
In these comparisons if(v[1] != 1 || v[1] != 2) you could only if(!v[0]) { to check if it is empty. Or you should use the && operator instead of || :
if(v[1] != 1 && v[1] != 2)
The operator || which means ou , you are saying that it can be 1 or 2, then if it is empty or 1, it will validate, if it is 2 it will also validate.
Another similar error is in this if :
if(v[randomIA] != 1 || v[randomIA] != 2) {
v[randomIA] = 2;
You would have to use if(!v[randomIA]) { or if(v[randomIA] != 1 && v[randomIA] != 2) { . And the value in v[randomIA] = 2; should, by logic, be the random value:
v[randomIA] = randomIA;
Another problem is in generating a random number:
randomIA = Math.floor(Math.random() * (9 + 1));
You are generating numbers from 0 to 9. Since the id s of div s ranges from 0 to 8, remove + 1 , because it is generating 9 and JavaScript returns the error quoted by no find the element of id="q9" , which does not exist.
Correcting these problems, the code seems to work perfectly. See (I've even added borders for easy viewing):
var q;
var i;
var vez = Math.floor(Math.random() * (2) + 1); // 1 para player / 2 para IA
var randomIA;
var posicaoOcupada;
var fimJogo = 0;
var flag = 0;
var v = new Array(9); // 1 para player / 2 para IA
if(vez == 2)
jogarIA();
function jogar(q) {
posicaoOcupada = false;
switch(q) {
case 0:
if(!v[0]) {
v[0] = 1;
}
else
posicaoOcupada = true;
break;
case 1:
if(!v[1]) {
v[1] = 1;
}
else
posicaoOcupada = true;
break;
case 2:
if(!v[2]) {
v[2] = 1;
}
else
posicaoOcupada = true;
break;
case 3:
if(!v[3]) {
v[3] = 1;
}
else
posicaoOcupada = true;
break;
case 4:
if(!v[4]) {
v[4] = 1;
}
else
posicaoOcupada = true;
break;
case 5:
if(!v[5]) {
v[5] = 1;
}
else
posicaoOcupada = true;
break;
case 6:
if(!v[6]) {
v[6] = 1;
}
else
posicaoOcupada = true;
break;
case 7:
if(!v[7]) {
v[7] = 1;
}
else
posicaoOcupada = true;
break;
case 8:
if(!v[8]) {
v[8] = 1;
}
else
posicaoOcupada = true;
break;
}
if(posicaoOcupada == true){
document.getElementById("alerta").style.display = "";
}else if(posicaoOcupada == false) {
document.getElementById("q" + q).innerHTML = "X";
jogarIA();
}
return v[q];
}
var randomLinha;
var randomColuna;
function jogarIA() {
flag = 0;
while(flag == 0) {
randomIA = Math.floor(Math.random() * (9));
if(!v[randomIA]) {
v[randomIA] = randomIA;
flag = 1;
}
else
flag = 0;
}
document.getElementById("q" + randomIA).innerHTML = "O";
return v[randomIA];
}
function mostrarIndex() {
document.getElementById("index").style.display = "";
document.getElementById("tutorial").style.display = "none";
document.getElementById("jogar").style.display = "none";
document.getElementById("liIndex").style.backgroundColor = "#DDD";
document.getElementById("liTutorial").style.backgroundColor = "#EEE";
document.getElementById("liJogar").style.backgroundColor = "#EEE";
window.location.href = "";
}
function mostrarTutorial() {
document.getElementById("index").style.display = "none";
document.getElementById("tutorial").style.display = "";
document.getElementById("jogar").style.display = "none";
document.getElementById("liIndex").style.backgroundColor = "#EEE";
document.getElementById("liTutorial").style.backgroundColor = "#DDD";
document.getElementById("liJogar").style.backgroundColor = "#EEE";
window.location.href = "#tutorial";
}
function mostrarJogar() {
document.getElementById("index").style.display = "none";
document.getElementById("tutorial").style.display = "none";
document.getElementById("jogar").style.display = "";
document.getElementById("liIndex").style.backgroundColor = "#EEE";
document.getElementById("liTutorial").style.backgroundColor = "#EEE";
document.getElementById("liJogar").style.backgroundColor = "#DDD";
}button {
color: #777;
background-color: #EEE;
border: 1px #EEE solid;
}
button:hover {
color: #000;
background-color: #DDD;
border: 1px #CCC solid;
}
ul#navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #EEE;
border: 1px #DDD solid;
}
li {
float: left;
}
li a {
color: #777;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #DDD;
color: #000;
transition-duration: 0.4s;
text-decoration: none;
}
#main {
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
width: 550px;
min-height: 500px;
border: 1px #CCC solid;
background-color: #F5F5F5;
}
#logoDiv {
background-image: url("../src/logo.png");
height: 200px;
border-bottom: 1px #CCC solid;
}
#headerDiv {
border-bottom: 1px #CCC solid;
}
#bodyDiv {
margin: 10px;
}
#q{
width: 246px;
height: 246px;
display: flex;
margin: 0 auto;
flex-wrap: wrap;
align-content: flex-start;
background: url("../src/grid.png");
}
.quadrado{
width: 80px;
height: 80px;
margin: 0px;
padding: 0px;
cursor:pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
border: 1px solid #000;
}<div class="container">
<div id="main">
<div id="logoDiv"></div>
<div id="headerDiv">
<ul id="navbar">
<li id="liIndex" style="background-color: #CCC;"><a href="javascript:mostrarIndex();" id="indexNavbar">Página Inicial</a></li>
<li id="liTutorial"><a href="javascript:mostrarTutorial();" id"tutorialNavbar">Tutorial</a></li>
<li id="liJogar"><a href="javascript:mostrarJogar();" id="jogoNavbar">Jogar</a></li>
</ul>
</div>
<div id="bodyDiv">
<article id="index">
<p>Bem vindo <span id="mostrarNome"></span> ao Jogo da Velha, descubra quais são as palavras antes que suas tentativas acabem.</p>
<p>Caso não saiba jogar, clique na aba <b>Tutorial</b> para aprender. Caso já saiba, clique em <b>Jogar</b> para começar a diversão.</p>
</article>
<article id="tutorial" style="display: none;">
<p>Nesse tópico, você verá como jogar o Jogo da Forca.</p/=>
</article>
<article id="jogar" style="display: none;" align: "center">
<p id="placar" class="text-center"><b>Placar:</b><br><span id="placarPlayer">0</span> vs IA <span id="placarIA">0</span></p>
<div id="q" class="text-center">
<div id="q0" class="quadrado" onClick="jogar(0);"></div>
<div id="q1" class="quadrado" onClick="jogar(1);"></div>
<div id="q2" class="quadrado" onClick="jogar(2);"></div>
<div id="q3" class="quadrado" onClick="jogar(3);"></div>
<div id="q4" class="quadrado" onClick="jogar(4);"></div>
<div id="q5" class="quadrado" onClick="jogar(5);"></div>
<div id="q6" class="quadrado" onClick="jogar(6);"></div>
<div id="q7" class="quadrado" onClick="jogar(7);"></div>
<div id="q8" class="quadrado" onClick="jogar(8);"></div>
</div>
<p id="alerta" class="text-center" style="display: none;"><i class="fa fa-exclamation-triangle"></i> Posição ocupada, tente outra!</p>
</article>
</div>
</div>
</div>