2
Hey I am making a tic tac toe game, im new to javascript, and when i make the game with 'buttons' and 'x' and 'o' it works perfectly, but i also made some pics and i can get the pics to show up, but i am unable to get the alerts to come up, and i cannot figure out how to make it so it wont allow you to click on the same block more then once.
this is my complete code (with the gifs i am trying to use) .. any help at all would be appreaciated
[HTML]<html>
<title>new x-o's </title>
<head>
<!-- starts making X and O's on the IMAGEs / change player turn -->
<SCRIPT TYPE='TEXT/JAVASCRIPT'>
var xTurn = true;
function squareclicked(square)
// squareclicked is a function that is called whenever a IMAGE is clicked.
{
var status = document.getElementById('status');
var src = square.src;
{
if(src != 'boxx.gif' && src != 'boxo.gif')
{
if(xTurn)
{
numMoves++;
square.src = 'boxx.gif';
xTurn = false;
status.innerHTML = 'O\'s turn';
}
else
{
numMoves++;
square.src = 'boxo.gif';
xTurn = true;
status.innerHTML = 'X\'s turn';
}
}
else
alert('That square has already been played.');
if(gameOver)
{
alert('The game is already over.');
return;
}
}
var winner = checkWin();
if(!winner)
{
//check to see if there is a tie
if(numMoves == 9)
status.innerHTML = 'Tie Game!';
}
else
gameOver = true;
}
</script>
<!-- END making X and O's on IMAGEs / change player turn / GAMEOVER CHECK / TIE GAME CHECK-->
<!-- START CHECK WINNER FUNCTION -->
<SCRIPT TYPE='TEXT/JAVASCRIPT'>
var gameOver = false;
var numMoves = 0;
function checkWin()
{
var status = document.getElementById('status');
var val0;
var val1;
var val2;
// check columns
for(var y = 0; y < 3; y++)
{
val0 = document.getElementById('0_'+y).src;
val1 = document.getElementById('1_'+y).src;
val2 = document.getElementById('2_'+y).src;
if(val0 == 'boxx.gif' && val1 == 'boxx.gif' && val2 == 'boxx.gif')
{
status.innerHTML = 'X WINS!';
return true;
}
else if(val0 == 'boxo.gif' && val1 == 'boxo.gif' && val2 == 'boxo.gif')
{
status.innerHTML = 'O WINS!';
return true;
}
}
// check rows
for(var x = 0; x < 3; x++)
{
val0 = document.getElementById(x + '_0').src;
val1 = document.getElementById(x + '_1').src;
val2 = document.getElementById(x + '_2').src;
if(val0 == 'boxx.gif' && val1 == 'boxx.gif' && val2 == 'boxx.gif')
{
status.innerHTML = 'X WINS!';
return true;
}
else if(val0 == 'boxo.gif' && val1 == 'boxo.gif' && val2 == 'boxo.gif')
{
status.innerHTML = 'O WINS!';
return true;
}
}
// check top left to lower right diagonal
val0 = document.getElementById('0_0').src;
val1 = document.getElementById('1_1').src;
val2 = document.getElementById('2_2').src;
if(val0 == 'boxx.gif' && val1 == 'boxx.gif' && val2 == 'boxx.gif')
{
status.innerHTML = 'X WINS!';
return true;
}
else if(val0 == 'boxo.gif' && val1 == 'boxo.gif' && val2 == 'boxo.gif')
{
status.innerHTML = 'O WINS!';
return true;
}
// check lower left to top right diagonal
val0 = document.getElementById('2_0').src;
val1 = document.getElementById('1_1').src;
val2 = document.getElementById('0_2').src;
if(val0 == 'boxx.gif' && val1 == 'boxx.gif' && val2 == 'boxx.gif')
{
status.innerHTML = 'X WINS!';
return true;
}
else if(val0 == 'boxo.gif' && val1 == 'boxo.gif' && val2 == 'boxo.gif')
{
status.innerHTML = 'O WINS!';
return true;
}
// no winner yet return false;
}
</script>
<!-- END CHECK WINNER FUNCTION -->
<!-- NEW GAME FUNCTION -->
<SCRIPT TYPE='TEXT/JAVASCRIPT'>
function newgame()
{
var status = document.getElementById('status');
numMoves = 0;
gameOver = false;
xTurn = true;
status.innerHTML = 'Player 1 [X] GO!';
for(var x = 0; x < 3; x++)
{
for(var y = 0; y < 3; y++)
{
document.getElementById(x + '_' + y).src = 'box.gif';
}
}
}
</script>
<!-- END NEW GAME FUNCTION -->
</head>
<body bgcolor='#FFFFFF' link='#' alink='#' vlink='#'>
<h1 align='center'>Tic Tac Toe</h1>
<CENTER>
<P ID='status'>Player 1 [X] GO!</P>
<INPUT TYPE='IMAGE' ID='0_0' src='box.gif' ONCLICK='squareclicked(this);'>
<INPUT TYPE='IMAGE' ID='1_0' src='box.gif' ONCLICK='squareclicked(this);'>
<INPUT TYPE='IMAGE' ID='2_0' src='box.gif' ONCLICK='squareclicked(this);'>
<BR>
<INPUT TYPE='IMAGE' ID='0_1' src='box.gif' ONCLICK='squareclicked(this);'>
<INPUT TYPE='IMAGE' ID='1_1' src='box.gif' ONCLICK='squareclicked(this);'>
<INPUT TYPE='IMAGE' ID='2_1' src='box.gif' ONCLICK='squareclicked(this);'>
<BR>
<INPUT TYPE='IMAGE' ID='0_2' src='box.gif' ONCLICK='squareclicked(this);'>
<INPUT TYPE='IMAGE' ID='1_2' src='box.gif' ONCLICK='squareclicked(this);'>
<INPUT TYPE='IMAGE' ID='2_2' src='box.gif' ONCLICK='squareclicked(this);'>
<BR>
<INPUT TYPE='BUTTON' ID='NEWGAME' value='New Game' ONCLICK='newgame();'>
</CENTER>
</body>
</html>[/HTML]
