September 8, 2018
Some Tic-Tac-Toe Fun
Comments
(3)
September 8, 2018
Some Tic-Tac-Toe Fun
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 99 posts
Followers: 154 people
(3)

This post was inspired by the question at the following link.

https://elearning.adobe.com/2018/09/help-javascript-noobie-javascript-adobe-captivate/

I went ahead and worked up a tic-tac-toe game that I hope may be helpful not only for the original poster but  for any others as well that may be trying this.


A couple differences –

1.  Sounds like original poster was jumping between slides – My interaction is all on a single slide.
2.  I got the impression that the original poster was creating a sort of “Hollywood Squares” type game where right or wrong answers to questions dictate whether a box gets the ‘X’ or ‘O’. My game is just straight up Tic-Tac-Toe. I chose to add a way to track the score as well for added value.

A Few Initial Considerations –
1.  There are a total of 16 winning combinations. Eight for ‘X’ and eight for ‘O’.
2.  There are a total of 8 lines to draw for a winning game.
3.  We need to keep track of whose turn it is.
4.  There are three states for each box. (Blank, X, and O)
5. When the game is over. The game board needs to stop functioning until a new game is started.


The Variables –

I used a total of 21 variables.
One for each square labeled box1, box2, box3, etc.  –  in order to track if a box had already been selected. (9)
One for each square labeled a1Choice, b1Choice, c1Choice, etc  –  in order to track whether an ‘X’ or an ‘O’ was placed there. (9)
One called playerTurn to determine whether an ‘X’ or an ‘O’ gets placed when a box is clicked. (1)
One called score1 for displaying the score for player 1. (1)
One called score2 for displaying the score for player 2. (1)

The States – 
Each square is named a1 through c3 and has three states. Blank is normal, ‘X’ is called drawX, and ‘O’ is called drawO.
The player 1 and player 2 tags have two states each. One for red and one for green.
The win line that is drawn is named winLine and has 9 states. Normal is duplicated. The other eight are placed across the game board and named for the squares they cross. (i.e.  a1a2a3)

Each box is a button that executes JavaScript on success.

The Code –
The JavaScript that is used for every box needs to perform the same functions as follows in order…
1.  Check if the square already has an ‘X’ or ‘O’ in it. Each box has a value of zero to begin. When a box is clicked the first time the variable is set to 1 and a player check is done.
2.  The player check looks at the playerTurn variable to see if it is set as 1 or 2. If it is 1 we draw an ‘X’. If it is 2 we draw an ‘O’.
3.  The playerTurn variable is changed
4.  The choice variable for the square is  set to 1 for an ‘X’ and 2 for an ‘O’. The default is zero at game start.
5.  The states for the player tags switch between red and green.
6.  A series of conditional statements are run to look for a win.
7.  If there is a winner – we display the win line and change the state to reflect the direction of the win, increment the score, and disable the boxes.

The ‘New Game’ button simply resets all the variables and states to their initial value with the exception of the scores and re-enables the boxes.
The ‘Reset Scores’ only changes the score1 and score2 variables back to 0.
Here is a look at the code on the upper left square (box1). Please note that the first portion changes a bit to reflect the box being clicked on. I am sure there is an easier way to shorten this but I am a bit of a beginner in this myself.

if (window.box1==0) {
box1=1;

if (window.playerTurn==1) {
cp.changeState(“a1″,”drawX”);
playerTurn=2;
a1Choice=1;
cp.changeState(“player1″,”Normal”);
cp.changeState(“player2″,”myTurn”);
}

else if (window.playerTurn==2) {
cp.changeState(“a1″,”drawO”);
playerTurn=1;
a1Choice=2;
cp.changeState(“player1″,”myTurn”);
cp.changeState(“player2″,”Normal”);
}

}

function disableAll() {
cp.disable(“a1”);
cp.disable(“a2”);
cp.disable(“a3”);
cp.disable(“b1”);
cp.disable(“b2”);
cp.disable(“b3”);
cp.disable(“c1”);
cp.disable(“c2”);
cp.disable(“c3”);
}

if ((window.a1Choice==1) && (window.b1Choice==1) && (window.c1Choice==1)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a1b1c1″);
score1=(++score1);
disableAll();
}

if ((window.a1Choice==2) && (window.b1Choice==2) && (window.c1Choice==2)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a1b1c1″);
score2=(++score2);
disableAll();
}

if ((window.a2Choice==1) && (window.b2Choice==1) && (window.c2Choice==1)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a2b2c2″);
score1=(++score1);
disableAll();
}

if ((window.a2Choice==2) && (window.b2Choice==2) && (window.c2Choice==2)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a2b2c2″);
score2=(++score2);
disableAll();
}

if ((window.a3Choice==1) && (window.b3Choice==1) && (window.c3Choice==1)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a3b3c3″);
score1=(++score1);
disableAll();
}

if ((window.a3Choice==2) && (window.b3Choice==2) && (window.c3Choice==2)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a3b3c3″);
score2=(++score2);
disableAll();
}

if ((window.a1Choice==1) && (window.a2Choice==1) && (window.a3Choice==1)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a1a2a3″);
score1=(++score1);
disableAll();
}

if ((window.a1Choice==2) && (window.a2Choice==2) && (window.a3Choice==2)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a1a2a3″);
score2=(++score2);
disableAll();
}

if ((window.b1Choice==1) && (window.b2Choice==1) && (window.b3Choice==1)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”b1b2b3″);
score1=(++score1);
disableAll();
}

if ((window.b1Choice==2) && (window.b2Choice==2) && (window.b3Choice==2)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”b1b2b3″);
score2=(++score2);
disableAll();
}

if ((window.c1Choice==1) && (window.c2Choice==1) && (window.c3Choice==1)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”c1c2c3″);
score1=(++score1);
disableAll();
}

if ((window.c1Choice==2) && (window.c2Choice==2) && (window.c3Choice==2)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”c1c2c3″);
score2=(++score2);
disableAll();
}

if ((window.a1Choice==1) && (window.b2Choice==1) && (window.c3Choice==1)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a1b2c3″);
score1=(++score1);
disableAll();
}

if ((window.a1Choice==2) && (window.b2Choice==2) && (window.c3Choice==2)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a1b2c3″);
score2=(++score2);
disableAll();
}

if ((window.a3Choice==1) && (window.b2Choice==1) && (window.c1Choice==1)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a3b2c1″);
score1=(++score1);
disableAll();
}

if ((window.a3Choice==2) && (window.b2Choice==2) && (window.c1Choice==2)) {
cp.show(“winner”);
cp.show(“winLine”);
cp.changeState(“winLine”,”a3b2c1″);
score2=(++score2);
disableAll();
}

Here is the working game. Enjoy and let me know if you have any questionsl

Play
3 Comments
2018-09-09 08:54:39
2018-09-09 08:54:39

Thanks Greg ‘JavaScript’.  You know me probably as ‘Shared/Advanced Actions’ freak. It has been a while that I would love to collaborate with a JS guru to create some articles comparing a workflow with advanced/shared actions with the JS workflow. Reason: I am convinced that depending on the goal, there will mostly be a ‘winner’ but am not sure that it will always be JS nor Actions. What do you think? It would be interesting for many users to see that type of comparison.

Like
(1)
(2)
>
Lieve Weymeis
's comment
2018-09-09 17:09:24
2018-09-09 17:09:24
>
Lieve Weymeis
's comment

I agree that this would be interesting for many to see. Personally, I like using it for pragmatic reasons, one of which, is the ability to see everything that is happening in one place. I can read through the JavaScript like a book and have an understanding of what is happening. That is more difficult to do if you have to click through multiple views of an advanced conditional action.

While I do not consider myself a JavaScript guru – I would be willing to try working through some comparisons. Do you have some specific things in mind?

Like
>
Lieve Weymeis
's comment
2018-09-09 17:43:10
2018-09-09 17:43:10
>
Lieve Weymeis
's comment

When using the Preview window for an action, I also read it as a book…..too few users know about all the functionality of advanced/shared actions.

Thanks for agreeing.  Let us both reflect on some possibilities., which can be done with advanced/shared actions.  Some workflows do need JS anuyway.

Like
Add Comment