JAVASCRIPT - Tic Tac Toe

Tic Tac Toe

Compatibilidad: Ms Internet Explorer, Netscape
El famoso juego tic tac toe.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

</HEAD>
<BODY BGCOLOR="#FFFFFF">

<SCRIPT LANGUAGE="LiveScript">
<!---Copyright 1996 Chris Englmeier
<!---http://www.geocities.com/SiliconValley/Heights/2052/
<!---Feel free to use this script as long as these copyright line remain as is
        <!-- 
		step = 0;
		diff=3;
		// change board when button is clicked
        function clear_all(form) {
			step = 0;
			for (i=0;i<9; ++i) {
				position="a"+i;
				form[position].value="";
			}
		}
		// change board when button is clicked
        function clickit(field) {
		if (step == -1) {alert("Reset to play again"); return;}

position=field.name.substring(1,2,1);
        position = 'a'+position;
		if (field.form[position].value !="") {alert("Can't go there"); return;}
        field.form[position].value="X";
        if (eval_pos(field.form)) {
			field.form.output.value="You Win!"; 
			step = -1;
			return;
		}
        position=get_move(field.form);
        field.form.output.value='I moved to ' + position.substring(1,2,1);
		if (position=="") {
			field.form.output.value="No Winner."; 
			step = -1;

return;
		}
        field.form[position].value="O";
        if (eval_pos(field.form)) {
			field.form.output.value="You Lose!";
			step = -1;
		}
        }

// see if there is a winner
        function eval_pos(form) {
   		if ((form.a0.value!="" && 
			form.a0.value==form.a3.value && form.a0.value==form.a6.value)||

(form.a0.value!="" 
			&& form.a0.value==form.a1.value && form.a0.value==form.a2.value) ||
   		   (form.a0.value!="" 
			&& form.a0.value==form.a4.value && form.a0.value==form.a8.value) ||
   		   (form.a1.value!="" 
			&& form.a1.value==form.a4.value && form.a1.value==form.a7.value) ||
   		   (form.a2.value!="" 
			&& form.a2.value==form.a5.value && form.a2.value==form.a8.value) ||
   		   (form.a2.value!="" 
			&& form.a2.value==form.a4.value && form.a2.value==form.a6.value) ||
   		   (form.a3.value!="" 
			&& form.a3.value==form.a4.value && form.a3.value==form.a5.value) ||
   		   (form.a6.value!="" 
			&& form.a6.value==form.a7.value && form.a6.value==form.a8.value))
			return true;
		else	
           return false;
        }

function f(a) {
		if (a == "") return "."; else return a;
		}

// get position for move.
        function comp_move(form,player,weight,depth) {

var cost;
			var bestcost=-2;
			var position;
			var newplayer;
			if (player=="X") newplayer="O"; else newplayer="X";
			if (depth==diff) return 0;

if (eval_pos(form)) return 1;
			for (var i=0; i<9; ++i) {
				position='a'+i;
				if (form[position].value != "")
					continue;
				form[position].value=player;
				cost = comp_move(form,newplayer, -weight, depth+1);
				if (cost > bestcost) {
					bestcost=cost;
					if (cost==1) i=9;
				}
				form[position].value="";
			}
			if (bestcost==-2) bestcost=0;
			return(-bestcost);
		}

// get position for move.
        function get_move(form) {
			var cost;
			var bestcost=-2;
			bestmove="";
			// don't think about first move.
			if (step++ == 0)
				if (form.a4.value=="") 
					return "a4";
				else 
				if (form.a0.value=="") 
					return "a0";

for (var i=0; i<9; ++i) {
				localposition='a'+i;
				if (form[localposition].value != "")
					continue;
				form[localposition].value="O";
				cost=comp_move(form,"X", -1, 0);
				if (cost > bestcost) {
					if (cost==1) i=9;
					bestmove=localposition;
					bestcost=cost;
				}
				form[localposition].value="";
			}
			return bestmove;
        }

// complain if user attempts to change board
        function complain(field) {
			field.form.output.focus(); // put focus eleswhere
			alert("Don't change the game fields directly!");
        }
	//a href="http://www.ucsd.edu/
        // the end -->
      </SCRIPT>
</HEAD>

<H1> A JavaScript Tic Tac Toe Game </H1>
	Click on the button next to each position to put an X there. 
<hr>
    <FORM>

Message: <INPUT NAME="output" TYPE="text"><BR>
    <BR>
	Difficulty: <SELECT NAME="difficulty" 
		OnChange="diff=form.difficulty[form.difficulty.selectedIndex].value;">
	<OPTION VALUE=1> Very Easy
	<OPTION VALUE=2> Easy
	<OPTION VALUE=3 SELECTED> Medium
	<OPTION VALUE=4> Hard (may think a long time)
	</SELECT>
	<BR><INPUT TYPE="button" VALUE="Computer Moves First" OnClick="
		if (!step++) this.form.a4.value='O';">

</FORM>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de los script de esta sección]