Web/owheroes/tictactoe.js

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;
}