TicTacToe - Revision history

Ghenne at 23:02, 8 June 2016

2016-06-08T23:02:40Z

← Older revision		Revision as of 23:02, 8 June 2016
Line 1:		Line 1:
	In this tutorial, we walk you through making a Tic Tac Toe game from scratch. You will find this tutorial useful if you are new to programming and new to AppStudio. This tutorial uses JavaScript. You can download the source file for the completed app here [[File:TicTacToe.zip]]		In this tutorial, we walk you through making a Tic Tac Toe game from scratch. You will find this tutorial useful if you are new to programming and new to AppStudio. This tutorial uses JavaScript. You can download the source file for the completed app here [[File:TicTacToe.zip]]

	This tutorial can be used as a self study course or with ~~the guidance of~~ a teacher.		This tutorial can be used as a self study course or with a teacher.

Ghenne at 23:02, 8 June 2016

2016-06-08T23:02:24Z

← Older revision		Revision as of 23:02, 8 June 2016
Line 1:		Line 1:
	In this tutorial, we walk you through making a Tic Tac Toe game from scratch. You will find this tutorial useful if you are new to programming and new to AppStudio. This tutorial uses JavaScript. You can download the source file for the completed app here [[File:TicTacToe.zip]]		In this tutorial, we walk you through making a Tic Tac Toe game from scratch. You will find this tutorial useful if you are new to programming and new to AppStudio. This tutorial uses JavaScript. You can download the source file for the completed app here [[File:TicTacToe.zip]]

			This tutorial can be used as a self study course or with the guidance of a teacher.

Ghenne: /* Installing AppStudio */

2016-05-31T12:57:43Z

Installing AppStudio

← Older revision		Revision as of 12:57, 31 May 2016
Line 4:		Line 4:
	== Installing AppStudio ==		== Installing AppStudio ==

	If you haven't already installed AppStudio, download it from here [https://www.nsbasic.com/app/downloads/] and follow the installation instructions here [https://www.nsbasic.com/app/downloads/].		If you haven't already installed AppStudio, download it from here [https://www.nsbasic.com/app/downloads/] and follow the installation instructions here [https://www.nsbasic.com/app/downloads/]. The free demo will do everything you need for this tutorial.

	== Creating a New Project ==		== Creating a New Project ==

Ghenne at 13:24, 26 May 2016

2016-05-26T13:24:05Z

← Older revision		Revision as of 13:24, 26 May 2016
Line 1:		Line 1:
	In this tutorial, we walk you through making a Tic Tac Toe game from scratch. You will find this tutorial useful if you are new to programming and new to AppStudio. This tutorial uses JavaScript. You can download the source file for the completed app here [[File:~~tictactoe~~.zip]]		In this tutorial, we walk you through making a Tic Tac Toe game from scratch. You will find this tutorial useful if you are new to programming and new to AppStudio. This tutorial uses JavaScript. You can download the source file for the completed app here [[File:TicTacToe.zip]]

Ghenne at 13:23, 26 May 2016

2016-05-26T13:23:05Z

← Older revision		Revision as of 13:23, 26 May 2016
Line 1:		Line 1:
	In this tutorial, we walk you through making a Tic Tac Toe game from scratch. You will find this tutorial useful if you are new to programming and new to AppStudio. This tutorial uses JavaScript. You can download the source file for the completed app here [[File:tictactoe.~~nsx~~]]		In this tutorial, we walk you through making a Tic Tac Toe game from scratch. You will find this tutorial useful if you are new to programming and new to AppStudio. This tutorial uses JavaScript. You can download the source file for the completed app here [[File:tictactoe.zip]]

Ghenne: /* Designing the Game Form */

2016-05-25T10:47:05Z

Designing the Game Form

← Older revision		Revision as of 10:47, 25 May 2016
Line 32:		Line 32:
	== Designing the Game Form ==		== Designing the Game Form ==

	Let's now design the Tic Tac Toe board. From the toolbox, drag and drop another button. Set its id to btn11 to denote the button in the first row, first column. Set its height and width to 70 to make it a square. Erase its value to remove any text. Set its corners to "Round" instead of Square.		Let's now design the Tic Tac Toe board. From the toolbox, drag and drop another button. Set its id to btn11 to denote the button in the first row, first column. Set its height and width to 70 to make it a square. Erase its value to remove any text. Set its corners to "Round" instead of Square. Set the fontSize to 24.

	[[File:pic01.png]]<br>		[[File:pic01.png]]<br>
Line 55:		Line 55:

	[[File:pic3.png]]<br>		[[File:pic3.png]]<br>


	== Programming the Controls ==		== Programming the Controls ==

Aelsayed: /* Scopes */

2016-05-23T05:15:28Z

Scopes

← Older revision		Revision as of 05:15, 23 May 2016
Line 247:		Line 247:
	==== Scopes ====		==== Scopes ====

	Now is a good time to discuss scopes. In JavaScript, scopes of functions, loops, and if statements are defined using curly brackets. Look at the function changeState() in the picture below. We see that after the function header, there's an open curly bracket '{' and at the end, there's a closed curly bracket '}'. This tells AppStudio that the code lines between the two curly brackets should be executed when the function changeState() is called. For readability, we indent the code inside the function. In the image below, the scope of the function is in blue. Note that the code under the if statement if(last_state[i][j] == "") is indented twice. This is to indicate that this code is within the scope of this if statement and will be executed if the if condition was found to be true. The scope of this if statement is in red.		Now is a good time to discuss scopes. In JavaScript, scopes of functions, loops, and if statements are defined using curly brackets. Look at the function changeState() in the picture below. We see that after the function header, there's an open curly bracket '{' and at the end, there's a closed curly bracket '}'. This tells AppStudio that the code lines between the two curly brackets should be executed when the function changeState() is called. For readability, we indent the code inside the function. In the image below, the scope of the function is in blue. Note that the code under the if statement if(last_state[i][j] == "") is indented twice. This is to indicate that this code is within the scope of this if statement and will be executed if the if condition was found to be true. The scope of this if statement is in red. And so on.

	[[File:pic15.png]]		[[File:pic15.png]]

			Note that we can have nested if statements. That is, we can have if statements inside each other. But in JavaScript, we can't have nested functions. That is, we can't have a function definition inside another! But of course, we can call one function from another.

	For more about indenting and code formatting, read the section Formatting Your Code.		For more about indenting and code formatting, read the section Formatting Your Code.

Aelsayed: /* Scopes */

2016-05-23T05:09:02Z

Scopes

← Older revision		Revision as of 05:09, 23 May 2016
Line 250:		Line 250:

	[[File:pic15.png]]		[[File:pic15.png]]

			For more about indenting and code formatting, read the section Formatting Your Code.

	=== Next Player's turn ===		=== Next Player's turn ===

Aelsayed: /* X's and O's */

2016-05-23T05:07:28Z

X's and O's

← Older revision		Revision as of 05:07, 23 May 2016
Line 244:		Line 244:

	[[File:pic9.png]]		[[File:pic9.png]]

			==== Scopes ====

			Now is a good time to discuss scopes. In JavaScript, scopes of functions, loops, and if statements are defined using curly brackets. Look at the function changeState() in the picture below. We see that after the function header, there's an open curly bracket '{' and at the end, there's a closed curly bracket '}'. This tells AppStudio that the code lines between the two curly brackets should be executed when the function changeState() is called. For readability, we indent the code inside the function. In the image below, the scope of the function is in blue. Note that the code under the if statement if(last_state[i][j] == "") is indented twice. This is to indicate that this code is within the scope of this if statement and will be executed if the if condition was found to be true. The scope of this if statement is in red.

			[[File:pic15.png]]

	=== Next Player's turn ===		=== Next Player's turn ===

Aelsayed: /* The function init_board() */

2016-05-23T04:47:22Z

The function init_board()

@@ Line 176: / Line 176: @@
 As evident by its name, this function executes when frmPlay appears. For example, in our app, when we click on the Play button from frmStart, frmPlay appears and the function frmPlay.onshow() will be executed automatically. When the frmPlay appears, it is the start of a new game and we want it to be Player 1's turn. So we set the variable player to 1. We also want to make sure that the Tic Tac Toe board is completely empty. That is, if there are any X's and O's on the board, we want to replace them with empty strings. So we set each button's value property to an empty string like so:
-[[File:Pic7.png]]
+<pre>
 As you can see in the picture, the frmPlay.onshow function calls another function called init_board(). To understand the code in init_board(), first, note that the computer (or phone processor!) executes code sequentially. Meaning that it executes the first line in the function init_board() before moving on to the second line, then third, etc. In init board, we first set each of the buttons values to an empty text string.