I was developing a Reversi (Othello) game and I faced a scenario which I was going to detect empty places on the board. I wrote it but it's not exact.
var IsUserTurn = true;
var Empty;
function InsertBlack(x, y) {
var Temp1 = document.createElement("img");
Temp1.setAttribute("src", "http://www.uploadhosting.co/uploads/151.238.149.6/Black.png");
Temp1.style.position = "absolute";
var Temp3 = (x * 50) - 50;
var Temp4 = (y * 50) - 50;
Temp1.style.left = Temp3 + "px";
Temp1.style.top = Temp4 + "px";
var Temp2 = document.getElementById("panel");
Temp2.style.position = "relative";
Temp2.appendChild(Temp1);
}
function InsertWhite(x, y) {
var Temp1 = document.createElement("img");
Temp1.setAttribute("src", "http://www.uploadhosting.co/uploads/151.238.149.6/White.png");
Temp1.style.position = "absolute";
var Temp3 = (x * 50) - 50;
var Temp4 = (y * 50) - 50;
Temp1.style.left = Temp3 + "px";
Temp1.style.top = Temp4 + "px";
var Temp2 = document.getElementById("panel");
Temp2.style.position = "relative";
Temp2.appendChild(Temp1);
}
function SetClickEventListenerForPanel() {
var Temp1 = document.getElementById("panel");
if (Temp1.addEventListener) {
Temp1.addEventListener("click", PanelClickProcessor);
} else if (Temp1.attachEvent) {
Temp1.attachEvent("onclick", PanelClickProcessor);
}
}
function SetBooleanVariableStatus() {
if (IsUserTurn === true) {
document.getElementById("Boolean").innerHTML = "User's turn";
} else {
document.getElementById("Boolean").innerHTML = "Computer's turn";
}
}
function IsEmpty(x, y) {
var Temp1 = document.getElementsByTagName("img");
var i;
var xx, yy;
xx = (x * 50) - 50 + ("px");
yy = (y * 50) - 50 + ("px");
for (i = 0; i < Temp1.length; i++) {
if (Temp1[i].style.left != xx && Temp1[i].style.top != yy) {
Empty = true;
} else {
Empty = false;
break;
}
}
return Empty;
}
function Convert(data) {
if (data <= 50) {
return 1;
}
if (data <= 100) {
return 2;
}
if (data <= 150) {
return 3;
}
if (data <= 200) {
return 4;
}
if (data <= 250) {
return 5;
}
if (data <= 300) {
return 6;
}
if (data <= 350) {
return 7;
}
if (data <= 400) {
return 8;
}
}
function PanelClickProcessor(e) {
var X = e.pageX - this.offsetLeft;
var Y = e.pageY - this.offsetTop;
var xtocall, ytocall;
xtocall = Convert(X);
ytocall = Convert(Y);
alert(IsEmpty(xtocall, ytocall));
}
InsertBlack(4, 4);
InsertWhite(5, 4);
InsertWhite(4, 5);
InsertBlack(5, 5);
SetClickEventListenerForPanel();
SetBooleanVariableStatus();
DEMO: http://jsfiddle.net/huL3qoa3
When you click anywhere on the board, an alert will be shown that, if the position is empty or not. It is not working well, what's the problem?
You should use the ||
operator instead of the &&
operator when you compare the coordinates:
if (Temp1[i].style.left != xx || Temp1[i].style.top != yy) {