I\'m trying to get the game to work properly but, the \"illegal move\" alert is
ID: 3686195 • Letter: I
Question
I'm trying to get the game to work properly but, the "illegal move" alert is appearing on every move. Please help resolve error.
<!DOCTYPE html>
<html>
<head>
<title>Greg's Gambits | Greg's 15</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<script>
//declare and initialize variables
var cells;
var swapped;
function setup()
{
//debugger;
// create function to load array and call placeNumbers()
/*cells = new Array([document.getElementById("cell00"),
document.getElementById("cell01"),
document.getElementById("cell02"),
document.getElementById("cell03"),
document.getElementById("cell10"),
document.getElementById("cell11"),
document.getElementById("cell12"),
document.getElementById("cell13"),
document.getElementById("cell20"),
document.getElementById("cell21"),
document.getElementById("cell22"),
document.getElementById("cell23"),
document.getElementById("cell30"),
document.getElementById("cell31"),
document.getElementById("cell32"),
document.getElementById("cell33")]);*/
//console.log(cells);
placeNumbers();
}
function placeNumbers()
{
// create function to place random numbers in the cells
var numbers = new Array();
for (var i=0; i<=16; i++)
numbers[i] = i;
var randomLoc;
var temp;
for (i=0; i < 16; i++)
{
randomLoc = Math.floor(Math.random()* 15 + 1);
temp = numbers[i];
numbers[i] = numbers[randomLoc];
numbers[randomLoc] = temp;
}
i = 0;
for (var rows = 0; rows < 4; rows++)
{
for (var cols = 0; cols < 4; cols++)
{
//alert(numbers[i]);
if(numbers[i] != 0){
document.getElementById("cell"+rows+''+cols).innerHTML = numbers[i];
//cells[rows][cols].innerHTML = numbers[i];
}else{
document.getElementById("cell"+rows+''+cols).innerHTML = " ";
//cells[rows][cols].innerHTML = " ";
}
++i;
}
}
}
function doClick(row, col)
{
// create the function that will check, each time a cell is clicked, if
// the move is legal and will, if it is not legal, display an alert
// if the move is legal, the function should call the swap() function
// it should also check to see if this move is a winner, i.e., call checkWinner()
var top = row - 1;
var bottom = row + 1;
var left = col - 1;
var right = col + 1;
swapped = false;
var current_col = document.getElementById("cell"+row+''+col);
var current_top = document.getElementById("cell"+top+''+col);
var current_right = document.getElementById("cell"+row+''+right);
var current_bottom = document.getElementById("cell"+bottom+''+col);
var current_left = document.getElementById("cell"+row+''+left);
if(top != -1 && current_top.innerHTML == "")
swap(current_col, current_top);
else if(right != 4 && current_right.innerHTML == "")
swap(current_col, current_right);
else if(bottom != 4 && current_bottom.innerHTML == "")
swap(current_col, current_bottom);
else if(left != -1 && current_left.innerHTML == "")
swap(current_col, current_left);
else
alert("Illegal move.");
checkWinner();
}
function swap(firstCell, secondCell)
{
// create function to swap values
swapped = true;
secondCell.innerHTML = firstCell.innerHTML;
firstCell.innerHTML = "";
}
function checkWinner()
{
// create function to check if the last move made makes this a win
// display winning message if it is a winner
var win = true;
for (var i = 0; i < 4; i++)
{
for (var j = 0; j < 4; j++)
{
if (!(document.getElementById("cell"+i+''+j).innerHTML == i*4 + j + 1))
if (!(i == 3 && j + 3))
win = false;
}
}
if (win)
{
alert("Congratulations! You Won!");
if (window.prompt("Play again?", "yes"))
placeNumbers();
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" class="floatleft" alt="" />
<h1 id="logo"><em>Greg's 15</em></h1>
<p> </p>
<div id="nav">
<p>
<a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="signin.html">Sign In</a>
<a href="contact.html">Contact Us</a>
</p>
</div>
<div id="content">
<p>
<input type="button" value="Start the game" />
</p>
<p>You can move any number into an empty spot by moving up, down,right, or left. Diagonal moves are not allowed. The object is to get all the numbers into correct order, from 1 through 15 with the empty space at the end. </p>
<table>
<!-- create the 4 X 4 table with a call, in each cell, to the doClick(x,x) function -->
<tr>
<td><span id="cell00"></span> </td>
<td><span id="cell01"></span> </td>
<td><span id="cell02"></span> </td>
<td><span id="cell03"></span> </td>
</tr>
<tr>
<td><span id="cell10"></span> </td>
<td><span id="cell11"></span> </td>
<td><span id="cell12"></span> </td>
<td><span id="cell13"></span> </td>
</tr>
<tr>
<td><span id="cell20"></span> </td>
<td><span id="cell21"></span> </td>
<td><span id="cell22"></span> </td>
<td><span id="cell23"></span> </td>
</tr>
<tr>
<td><span id="cell30"></span> </td>
<td><span id="cell31"></span> </td>
<td><span id="cell32"></span> </td>
<td><span id="cell33"></span> </td>
</tr>
</table>
</div>
<div id="footer">
Copyright © 2013 Greg's Gambits<br />
<a href="mailto:dakins1@cougarmail.collin.edu">dakins1@cougarmail.collin.edu</a>
</div>
</div>
</body>
</html>
Explanation / Answer
Solution:
This Code will work use it
<!DOCTYPE html>
<html>
<head>
<title>Greg's Gambits | Greg's 15</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<script>
//declare and initialize variables
var cells;
var swapped;
function setup()
{
debugger;
// create function to load array and call placeNumbers()
cells = new Array([document.getElementById("cell00"),
document.getElementById("cell01"),
document.getElementById("cell02"),
document.getElementById("cell03"),
document.getElementById("cell10"),
document.getElementById("cell11"),
document.getElementById("cell12"),
document.getElementById("cell13"),
document.getElementById("cell20"),
document.getElementById("cell21"),
document.getElementById("cell22"),
document.getElementById("cell23"),
document.getElementById("cell30"),
document.getElementById("cell31"),
document.getElementById("cell32"),
document.getElementById("cell33")]);
placeNumbers();
}
function placeNumbers()
{
// create function to place random numbers in the cells
var numbers = new Array();
for (var i=0; i<=16; i++)
numbers[i] = i;
var randomLoc;
var temp;
for (i=0; i < 16; i++)
{
randomLoc = Math.floor(Math.random()* 15 + 1);
temp = numbers[i];
numbers[i] = numbers[randomLoc];
numbers[randomLoc] = temp;
}
i = 0;
for (var rows = 0; rows < 4; rows++)
{
for (var cols = 0; cols < 4; cols++)
{
if(numbers[i] != 0)
cells[rows][cols].innerHTML = numbers[i];
else
cells[rows][cols].innerHTML = " ";
++i;
}
}
}
function doClick(row, col)
{
// create the function that will check, each time a cell is clicked, if
// the move is legal and will, if it is not legal, display an alert
// if the move is legal, the function should call the swap() function
// it should also check to see if this move is a winner, i.e., call checkWinner()
var top = row - 1;
var bottom = row + 1;
var left = col - 1;
var right = col + 1;
swapped = false;
if(top != -1 && cells[top][col].innerHTML == "")
swap(cells[row][col], cells[top][col]);
else if(right != 4 && cells[row][right].innerHTML == "")
swap(cells[row][col], cells[row][right]);
else if(bottom != 4 && cells[bottom][col].innerHTML == "")
swap(cells[row][col], cells[bottom][col]);
else if(left != -1 && cells[row][left].innerHTML == "")
swap(cells[row][col], cells[row][left]);
else
alert("Illegal move.");
checkWinner();
}
function swap(firstCell, secondCell)
{
// create function to swap values
swapped = true;
secondCell.innerHTML = firstCell.innerHTML;
firstCell.innerHTML = "";
}
function checkWinner()
{
// create function to check if the last move made makes this a win
// display winning message if it is a winner
var win = true;
for (var i = 0; i < 4; i++)
{
for (var j = 0; j < 4; j++)
{
if (!(cells[i][j].innerHTML == i*4 + j + 1))
if (!(i == 3 && j + 3))
win = false;
}
}
if (win)
{
alert("Congratulations! You Won!");
if (window.prompt("Play again?", "yes"))
placeNumbers();
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" class="floatleft" alt="" />
<h1 id="logo"><em>Greg's 15</em></h1>
<p> </p>
<div id="nav">
<p>
<a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="signin.html">Sign In</a>
<a href="contact.html">Contact Us</a>
</p>
</div>
<div id="content">
<p>
<input type="button" value="Start the game" /></p>
<p>You can move any number into an empty spot by moving up, down,right, or left. Diagonal moves are not allowed. The object is to get all the numbers into correct order, from 1 through 15 with the empty space at the end. </p>
<table>
<!-- create the 4 X 4 table with a call, in each cell, to the doClick(x,x) function -->
<tr>
<td><span id="cell00"></span> </td>
<td><span id="cell01"></span> </td>
<td><span id="cell02"></span> </td>
<td><span id="cell03"></span> </td>
</tr>
<tr>
<td><span id="cell10"></span> </td>
<td><span id="cell11"></span> </td>
<td><span id="cell12"></span> </td>
<td><span id="cell13"></span> </td>
</tr>
<tr>
<td><span id="cell20"></span> </td>
<td><span id="cell21"></span> </td>
<td><span id="cell22"></span> </td>
<td><span id="cell23"></span> </td>
</tr>
<tr>
<td><span id="cell30"></span> </td>
<td><span id="cell31"></span> </td>
<td><span id="cell32"></span> </td>
<td><span id="cell33"></span> </td>
</tr>
</table>
</div>
<div id="footer">
Copyright © 2013 Greg's Gambits<br />
<a href="mailto:dakins1@cougarmail.collin.edu">dakins1@cougarmail.collin.edu</a>
</div>
</div>
</body>
</html>