var round = [0, 0]; var p = []; var blue = ""; var red = ""; var g = false; var bluescore = 0; var redscore = 0; for (i=0;i<3;i++) { p[i] = new Array(3); for (j=0;j<3;j++) { p[i][j] = 0; } } function game(event) { if (g) { var e = event.currentTarget.id; var x = Number(e[1]); var y = Number(e[2]); if (p[x][y] == 0) { round[1]++; if ((round[0] + round[1]) % 2 == 1) { event.currentTarget.style.background = 'url("imgs/icons/' + blue + '.png") blue no-repeat'; event.currentTarget.style.backgroundSize = "86px 86px"; p[x][y] = -1; console.log("round: " + round[1] + " blue"); } else if ((round[0] + round[1]) % 2 == 0) { event.currentTarget.style.background = 'url("imgs/icons/' + red + '.png") red no-repeat'; event.currentTarget.style.backgroundSize = "86px 86px"; p[x][y] = 1; console.log("round: " + round[1] + " red"); } console.log("step: " + x + " " + y); check(); } } } function check() { var temp = 0; for (i=0;i<3;i++) { temp = p[i][0]; if (temp == p[i][1] && temp == p[i][2] && temp !=0) { gameover(temp); } temp = p[0][i]; if (temp == p[1][i] && temp == p[2][i] && temp != 0) { gameover(temp); } } temp = p[0][0]; if (temp == p[1][1] && temp == p[2][2] && temp != 0) { gameover(temp); } temp = p[0][2]; if (temp == p[1][1] && temp == p[2][0] && temp != 0) { gameover(temp); } if (round[1] == 9 && g == true) { gameover(0); } } function gameover(w) { g = false; console.log("victory: " + w); if (w == -1) { document.getElementById("bluegameover").innerHTML = "Victory!"; document.getElementById("bluegameover").style.color = "yellow"; document.getElementById("redgameover").innerHTML = "Defeat!"; document.getElementById("redgameover").style.color = "red"; bluescore++; document.getElementById("score").innerHTML = bluescore + " - " + redscore; document.getElementById("score").style.color = "yellow"; } if (w == 1) { document.getElementById("redgameover").innerHTML = "Victory!"; document.getElementById("redgameover").style.color = "yellow"; document.getElementById("bluegameover").innerHTML = "Defeat!"; document.getElementById("bluegameover").style.color = "red"; redscore++; document.getElementById("score").innerHTML = bluescore + " - " + redscore; document.getElementById("score").style.color = "yellow"; } if (w == 0) { document.getElementById("score").innerHTML = "Draw!"; document.getElementById("score").style.color = "orange"; } } function selectedblue(event) { if (blue == "") { a = String(event.currentTarget.id).split("-"); blue = a[1]; console.log("blue: " + blue); document.getElementById("blueheroselect").classList.remove("d-block"); document.getElementById("blueheroselect").classList.add("d-none"); document.getElementById("bluegameover").classList.remove("d-none"); document.getElementById("bluegameover").classList.add("d-block"); document.getElementById("bluegameover").style.backgroundImage = 'url("imgs/heroes/' + blue + '.png")'; startgame(); } } function selectedred(event) { if (red == "") { a = String(event.currentTarget.id).split("-"); red = a[1]; console.log("red: " + red); document.getElementById("redheroselect").classList.remove("d-block"); document.getElementById("redheroselect").classList.add("d-none"); document.getElementById("redgameover").classList.remove("d-none"); document.getElementById("redgameover").classList.add("d-block"); document.getElementById("redgameover").style.backgroundImage = 'url("imgs/heroes/' + red + '.png")'; startgame(); } } function startgame() { if ((red != "") && (blue != "")) { g = true; } } function newgame() { round[0]++; console.log("match: " + round[0]); round[1] = 0; document.getElementById("bluegameover").innerHTML = ""; document.getElementById("redgameover").innerHTML = ""; document.getElementById("score").innerHTML = bluescore + " - " + redscore; document.getElementById("score").style.color = "yellow"; for (i=0;i<3;i++) { for(j=0;j<3;j++) { p[i][j] = 0; document.getElementById("p" + String(i) + String(j)).style.backgroundImage = "none"; document.getElementById("p" + String(i) + String(j)).style.backgroundColor = "white"; } } g = true; }