Science Buddies: "Ask an Expert"

Posted: **Mon Sep 16, 2013 4:04 pm**

Hi, I posted a question earlier this month about getting javascript AI help,
It is starting to get more urgent.
I am programming different Tic tac toe AI's with different strategies, and seeing which one win's against the most humans.
I am currently stuck on getting the AI to work, and adding strategy.
I am following the game tutorial from this project: https://www.sciencebuddies.org/science- ... p014.shtml
I would love it if I could get professional guidance on this please
It would be cool if I could expand it to a working AI Tic Tac Toe game, but I would be Very Happy just to get help with a working tic tac toe game.
Thank you in advance

Here is my current code:

Code: Select all

<HTML> 
<HEAD> 

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'>
<TITLE>Tic Tac Toe!</TITLE> 

<SCRIPT TYPE="TEXT/JAVASCRIPT"> 
var xTurn = true; 
var gameOver = false; 
var numMoves = 0; 

function squareclicked(square) 

{ 
var value = square.value; 
var status = document.getElementById('status'); 

if(gameOver) 
{ 
alert("The game is already over."); 
return; 
} 

if(value != 'X' && value != 'O') 
{ 
if(xTurn) 
{ 
numMoves++; 
square.value = 'X'; 
xTurn = false; 
status.innerHTML = 'O\'s turn'; 
} 
else 
{ 
numMoves++; 
square.value = 'O'; 
xTurn = true; 
status.innerHTML = 'X\'s turn'; 
} 
} 
else 
alert('That square has already been played.'); 

var winner = checkWin(); 
if(!winner) 
{ 
 
if(numMoves == 9) 
status.innerHTML = 'Tie Game!'; 
} 
else 
gameOver = true; 

} 

function newgame() 
{ 
var status = document.getElementById('status'); 

xTurn = true; 
status.innerHTML = 'X\'s turn'; 
gameOver = false; 
numMoves = 0; 

for(var x = 0; x < 3; x++) 
{ 
for(var y = 0; y < 3; y++) 
{ 
document.getElementById(x + '_' + y).value = ' '; 
} 
} 
} 

function checkWin() 
{ 
var status = document.getElementById('status'); 
var val0; 
var val1; 
var val2; 

 
for(var y = 0; y < 3; y++) 
{ 
val0 = document.getElementById('0_'+y).value; 
val1 = document.getElementById('1_'+y).value; 
val2 = document.getElementById('2_'+y).value; 
if(val0 == 'X' && val1 == 'X' && val2 == 'X') 
{ 
status.innerHTML = "X WINS!"; 
return true; 
} 
else if(val0 == 'O' && val1 == 'O' && val2 == 'O') 
{ 
status.innerHTML = "O WINS!"; 
return true; 
} 
} 


for(var x = 0; x < 3; x++) 
{ 
val0 = document.getElementById(x + '_0').value; 
val1 = document.getElementById(x + '_1').value; 
val2 = document.getElementById(x + '_2').value; 
if(val0 == 'X' && val1 == 'X' && val2 == 'X') 
{ 
status.innerHTML = "X WINS!"; 
return true; 
} 
else if(val0 == 'O' && val1 == 'O' && val2 == 'O') 
{ 
status.innerHTML = "O WINS!"; 
return true; 
} 
} 


val0 = document.getElementById('0_0').value; 
val1 = document.getElementById('1_1').value; 
val2 = document.getElementById('2_2').value; 
if(val0 == 'X' && val1 == 'X' && val2 == 'X') 
{ 
status.innerHTML = "X WINS!"; 
return true; 
} 
else if(val0 == 'O' && val1 == 'O' && val2 == 'O') 
{ 
status.innerHTML = "O WINS!"; 
return true; 
} 


val0 = document.getElementById('2_0').value; 
val1 = document.getElementById('1_1').value; 
val2 = document.getElementById('0_2').value; 
if(val0 == 'X' && val1 == 'X' && val2 == 'X') 
{ 
status.innerHTML = "X WINS!"; 
return true; 
} 
else if(val0 == 'O' && val1 == 'O' && val2 == 'O') 
{ 
status.innerHTML = "O WINS!"; 
return true; 
} 

 
} 

</SCRIPT> 

<style>


input[type=button] {
    color:#08233e;
background-color: #9999FF;
    font-family: 'Crafty Girls', cursive;
    font-size:70%;
   width: 100;
height:100;
    cursor:pointer;
font-size:25;
border:groove;
border-color: 000000;
font-weight:900;
}

input[type=button]:hover {
    background-color:#6666FF;
}


input[id="NEWGAME"] {
    color:#08233e;
background-color: #9999FF;
   width: 310;
height:60;
    cursor:pointer;
font-size:30;
font-family: 'Shadows Into Light', cursive;

}

input[id=NEWGAME]:hover {
    background-color:#6666FF;


}

#status{
font-family: 'Shadows Into Light', cursive;
font-size:30;
font-style:bold;
font-weight:900;
}

#stat{
background-color:#9999FF;
width:302;
height:50
}

#outline{
width:400;
height:530;
background-color:000000;

}


#header{
height:100;
width:800;
background-color:000000;
}
</style>
</HEAD> 

<BODY>

<div align="center">
<div id="outline">
<br>
<br>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
<br>
<br>
<INPUT TYPE="BUTTON" ID="0_0" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="1_0" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="2_0" VALUE=" " ONCLICK="squareclicked(this);"> 
<BR> 
<INPUT TYPE="BUTTON" ID="0_1" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="1_1" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="2_1" VALUE=" " ONCLICK="squareclicked(this);"> 
<BR> 
<INPUT TYPE="BUTTON" ID="0_2" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="1_2" VALUE=" " ONCLICK="squareclicked(this);"> 
<INPUT TYPE="BUTTON" ID="2_2" VALUE=" " ONCLICK="squareclicked(this);"> 
<br>

<div align="center">
<div id="stat"> 
<P ID="status">X's turn</P>
</div>
</div>
</div> 
 </div>


</BODY> 
</HTML>

Posted: **Wed Sep 18, 2013 6:42 pm**

PrestonRW,

The code you posted works as is for two human players.

What part are you puzzled by? As the procedure states, in order to set up an AI, you need to modify the program so that the program plays one of the letters, be it X or O. In other words, for example, the human always goes first and is therefore always the X. Whenever it is O's turn, the AI plays. You would need to create a function called "makeComputerMove" as stated in the procedure. It will have to have code similar to that in "checkWin" which checks to see what letters are in what buttons.

You can check to see if the human put an X in the center square, and if not, put an O there. That in itself would be a rule you would code in "makeComputerMove" and it becomes part of your AI. Play a few games with your friends and write down rules like that, then code them up in javascript and put them in there. You might need to pay attention to the order in which to check the rules, depending on what you come up with.

Please let us know if you have any more questions. I've added some indentation to your code to make it more readable:

Code: Select all

<script type="TEXT/JAVASCRIPT">
    var xTurn = true;
    var gameOver = false;
    var numMoves = 0;

    function squareclicked(square){
        var value = square.value;
        var status = document.getElementById('status');
    
        if(gameOver){
            alert("The game is already over.");
            return;
        }
    
        if(value != 'X' && value != 'O'){
            if(xTurn){
                numMoves++;
                square.value = 'X';
                xTurn = false;
                status.innerHTML = 'O\'s turn';
            }
            else{
                numMoves++;
                square.value = 'O';
                xTurn = true;
                status.innerHTML = 'X\'s turn';
            }
        }
        else
            alert('That square has already been played.');
    
        var winner = checkWin();
        if(!winner){
            if(numMoves == 9)
                status.innerHTML = 'Tie Game!';
        }
        else
            gameOver = true;
    }

    function newgame(){
        var status = document.getElementById('status');
    
        xTurn = true;
        status.innerHTML = 'X\'s turn';
        gameOver = false;
        numMoves = 0;
    
        for(var x = 0; x < 3; x++){
            for(var y = 0; y < 3; y++){
                document.getElementById(x + '_' + y).value = ' ';
            }
        }
    }

    function checkWin(){
        var status = document.getElementById('status');
        var val0;
        var val1;
        var val2;
    
        for(var y = 0; y < 3; y++){
            val0 = document.getElementById('0_'+y).value;
            val1 = document.getElementById('1_'+y).value;
            val2 = document.getElementById('2_'+y).value;
            if(val0 == 'X' && val1 == 'X' && val2 == 'X'){
                status.innerHTML = "X WINS!";
                return true;
            }
            else if(val0 == 'O' && val1 == 'O' && val2 == 'O'){
                status.innerHTML = "O WINS!";
                return true;
            }
        }
    
        for(var x = 0; x < 3; x++){
            val0 = document.getElementById(x + '_0').value;
            val1 = document.getElementById(x + '_1').value;
            val2 = document.getElementById(x + '_2').value;
            if(val0 == 'X' && val1 == 'X' && val2 == 'X'){
                status.innerHTML = "X WINS!";
                return true;
            }
            else if(val0 == 'O' && val1 == 'O' && val2 == 'O'){
                status.innerHTML = "O WINS!";
                return true;
            }
        }
    
        val0 = document.getElementById('0_0').value;
        val1 = document.getElementById('1_1').value;
        val2 = document.getElementById('2_2').value;
        if(val0 == 'X' && val1 == 'X' && val2 == 'X'){
            status.innerHTML = "X WINS!";
            return true;
        }
        else if(val0 == 'O' && val1 == 'O' && val2 == 'O'){
            status.innerHTML = "O WINS!";
            return true;
        }
    
    
        val0 = document.getElementById('2_0').value;
        val1 = document.getElementById('1_1').value;
        val2 = document.getElementById('0_2').value;
        if(val0 == 'X' && val1 == 'X' && val2 == 'X'){
            status.innerHTML = "X WINS!";
            return true;
        }
        else if(val0 == 'O' && val1 == 'O' && val2 == 'O'){
            status.innerHTML = "O WINS!";
            return true;
        }
    }
</script>

Good luck!

Heinz Hemken

Posted: **Wed Sep 18, 2013 9:02 pm**

Thank you for the guidance on how to go about this, and the code edits.
I will revise the script, and try to get a working AI. If I have any more problems I will definitely ask

Posted: **Thu Sep 19, 2013 3:38 pm**

I am not sure how
var computerTurn = false;
computerTurn = !computerTurn
is supposed to tell when it is the AI's turn, Am I not putting it in the right spot?, or did I miss a code piece where it defines more?

The Alert in the code is to tell me that it is running the function at the right time, once I get it running I can probably get the code running right

Code: Select all

<script type="TEXT/JAVASCRIPT">
    var xTurn = true;
    var gameOver = false;
    var numMoves = 0;
 


    function squareclicked(square){
        var value = square.value;
        var status = document.getElementById('status');
    
        if(gameOver){
            alert("Game Over.");
            return;
        }
    
        if(value != 'X' && value != 'O'){
            if(xTurn){
                numMoves++;
                square.value = 'X';
                xTurn = false;
                status.innerHTML = 'O\'s turn';

            }


            else{
                numMoves++;
                square.value = 'O';
                xTurn = true;
                status.innerHTML = 'X\'s turn';
            }
        }
        else
            alert('That square has already been played.');
    
        var winner = checkWin();
        if(!winner){
            if(numMoves == 9)
                status.innerHTML = 'Tie Game!';
        }
        else
            gameOver = true;
    }

    function newgame(){
        var status = document.getElementById('status');
    
        xTurn = true;
        status.innerHTML = 'X\'s turn';
        gameOver = false;
        numMoves = 0;
    
        for(var x = 0; x < 3; x++){
            for(var y = 0; y < 3; y++){
                document.getElementById(x + '_' + y).value = ' ';
            }
        }
    }

    function checkWin(){
        var status = document.getElementById('status');
        var val0;
        var val1;
        var val2;
    
        for(var y = 0; y < 3; y++){
            val0 = document.getElementById('0_'+y).value;
            val1 = document.getElementById('1_'+y).value;
            val2 = document.getElementById('2_'+y).value;
            if(val0 == 'X' && val1 == 'X' && val2 == 'X'){
                status.innerHTML = "X WINS!";
                return true;
            }
            else if(val0 == 'O' && val1 == 'O' && val2 == 'O'){
                status.innerHTML = "O WINS!";
                return true;
            }
        }
    
        for(var x = 0; x < 3; x++){
            val0 = document.getElementById(x + '_0').value;
            val1 = document.getElementById(x + '_1').value;
            val2 = document.getElementById(x + '_2').value;
            if(val0 == 'X' && val1 == 'X' && val2 == 'X'){
                status.innerHTML = "X WINS!";
                return true;
            }
            else if(val0 == 'O' && val1 == 'O' && val2 == 'O'){
                status.innerHTML = "O WINS!";
                return true;
            }
        }
    
        val0 = document.getElementById('0_0').value;
        val1 = document.getElementById('1_1').value;
        val2 = document.getElementById('2_2').value;
        if(val0 == 'X' && val1 == 'X' && val2 == 'X'){
            status.innerHTML = "X WINS!";
            return true;
        }
        else if(val0 == 'O' && val1 == 'O' && val2 == 'O'){
            status.innerHTML = "O WINS!";
            return true;
        }
    
    
        val0 = document.getElementById('2_0').value;
        val1 = document.getElementById('1_1').value;
        val2 = document.getElementById('0_2').value;
        if(val0 == 'X' && val1 == 'X' && val2 == 'X'){
            status.innerHTML = "X WINS!";
            return true;
        }
        else if(val0 == 'O' && val1 == 'O' && val2 == 'O'){
            status.innerHTML = "O WINS!";
            return true;
        }
    }


var computerTurn = false;
computerTurn = !computerTurn

if(computerTurn)
    {
      makeComputerMove();
    }



   function makeComputerMove(){
      alert('Computer Turn!')
   }


</script>

Posted: **Mon Sep 23, 2013 4:41 pm**

PrestonRW,

I'm sure you can figure it out. In the original game, the code keeps track of whether it's X's turn or not to decide what letter to put on a clicked button. The change that is needed is to execute the AI move right after X makes a move instead of letting a human play an O.

Hint: makeComputerMove() should probably be called somewhere in squareclicked() with a few additional small modifications.

Good luck!

.

Posted: **Fri Dec 06, 2013 9:30 am**

Hello again,
I think I am close at getting the AI's done.
In my project I am testing which AI win's the most, the one I am having the most trouble with is actually the random placing AI.
Would I use a random() variable, or is there a better way to get the desired result.
Thanks again,
Preston

Posted: **Fri Dec 06, 2013 2:54 pm**

PrestonRW,

Yes, when people want to do something randomly, they use the random() function to get a box index or whatever. I would expect this AI to be a poorer player than ones with cleverly thought out rules, though.

Good luck!

Posted: **Fri Jan 10, 2014 1:13 am**

So I guess I wasn't as well off on the AI's as I thought,
how much does the checkwin function need to be altered?
I just cant seem to set it to work correctly.

Posted: **Fri Jan 10, 2014 5:21 am**

https://www.sciencebuddies.org/science- ... 28&t=11742

^^^
can some1 answer my questions on that link plz!

Posted: **Fri Jan 10, 2014 11:14 am**

PrestonRW,

How much do you need to modify it? That's the part that's up to you! That's the creative part, where you figure out how to convert your ideas into code. In this project, I suggest you google for examples of what other people have done and try to improve on them or do things differently. We can't really tell you what you have to do, the point of the project is for you to express your own ideas and understanding in the code. There's no set formula for that. Does that make sense?

Good luck, and let your ideas flow!

Posted: **Fri Jan 10, 2014 1:58 pm**

arnlan,

This is the wrong forum to ask about a project in an unrelated topic. Please keep trying in the original forum.

Good luck!

Posted: **Sun Jan 12, 2014 10:27 am**

hhemken wrote:arnlan,

This is the wrong forum to ask about a project in an unrelated topic. Please keep trying in the original forum.

Good luck!

I need it in 2 days!! No one is answering.

Science Buddies: "Ask an Expert"

AI Help, starting to get more urgent

AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent

Re: AI Help, starting to get more urgent