Tic Tac Toe: Getting Started

1. Tic Tac Toe: Getting Started • In this project we will be creating a simple Tic Tac Toe game where a person can try to defeat the computer. The game will be stored in our online web folder. To access the online web folder, you will need the ftp address and your account name. For example, Scott Bunin would log in to ftp://ftp.scottbunin.com with account name scottbunin and password as their capitalized first initial and student number.

2. Windows Explorer for FTp • We can access online web folders using FTP which stands for File Transfer Protocol. Click the windows key and computer to bring up an explorer window. Then, type in the address bar: ftp.scottbunin.com. It will prompt you for a login name and password. The teacher will give you your login info.

3. How to log in to your ftp folder • This class requires a lot of files to be posted to the Internet. Your login name will be your first and last name. For example, Scott Bunin would log in as scottbunin. Your password will be the first initial of your first name in capital letters and your student number. For example, S1234567890. The server requires a capital letter and a number. Be sure to practice logging in before you move on.

4. Declaring a responsive image • Our first project will be project 17 since projects 1 through 16 are designated for earlier courses. The project will be submitted with the name 17.htm. Only projects named 17.htm will be graded. Start a new file using the editor of your choice such as notepad or notepad++. Use the HTML code on the bottom of this page and creative copy/pasting to help you get started. Remember the <br> command will make new lines. • <img height="200" width="200" src="blank.png" onClick="board[0]='x';goComputer();showBoard();">

5. Review • Tic Tac Toe: Getting Started • Windows Explorer for FTP • How to log in to your ftp folder • Declaring a responsive image

6. Review: Basic HTML editing • Throughout this course we will receive example program code and parts of programs. Be certain to place the code in the designated areas. Be certain to save the files with a proper extension. CHECK YOUR PROGRAM EVERY TIME YOU MAKE A CHANGE. That way, if there is a problem, you can undo the last change to fix your program.

7. The htm file • We will be submitting our work with the .htm extension. To save the file properly, we have to use the .htm extension. If the extension is not used, the computer will not recognize the file to be loaded in a web browser. Remember: if you are editing a text file with notepad, you will have to click on “all files” or when you save the program, it will put the extension .txt on the end or even .htm.txt which will not work.

8. The picture files • The code example refers to files called o.png, x.png and blank.png. To make the page load right, you will want to have these files in the same directory as the .htm file. Use the Paint program to create a simple blank, x and o file for the program to refer to. When the .htm file gets uploaded, be sure to bring these files too or the online version won’t work.

9. <script type="text/javascript"> //make some space for the board var board = new Array(); //clear the board with spaces for(i=0;i<9;i++){ board[i]=" "; } //show the board function showBoard(){ for(i=0;i<9;i++){ if(board[i]==" ") document.images[i].src="blank.png"; if(board[i]=="x") document.images[i].src="x.png"; if(board[i]=="o") document.images[i].src="o.png"; } } //have the computer pick a random place to go function goComputer() { board[Math.floor((Math.random()*9))]="o"; } </script>

10. Review • Review: Basic HTML Editing • The HTM File • The Pictures • Script Example

11. Editing locally and globally • When using the local computer, save in a place that is easy to find such as the desktop or in a folder with the student name on it. Then, when you save the file it will arrive on the local computer to be tested. After some progress is made, log on to the web folder to place the document online. Students may save all their work online as often as desired. Students will be cautious with their files as they are responsible for the, not the teacher.

12. Code Analysis: comments • Properly commenting our code will save a lot of problems. In our example code there is a line: //make some space for the board Notice that in JavaScript and many C based languages, the double forwards slash designates a comment. To make a comment in an HTML section that is not part of the script use the following format: <!-- My html comment here -->

13. Declaring a variable We declared a place to store information in our game board by writing: varboard = new Array(); Advanced programmers (like us!) will need to tell the computer all about what we are going to need so that the computer can prepare its memory the right way. This example declares using an array. That means it will have different sub-divisions such as board[0] board[1] … board[8].

14. The for loop for(i=0;i<9;i++){ board[i]=" "; } • The above code has the computer count from 0 to 8. Be careful, the computer will start counting at 0 so that means it will be doing its loop 9 times, not 8 times. The variable in the loop was called “i”. It could have been called a lot of things such as “a” or “counter” or “ilikepie”. Loop examples often use “i” because the variable is an integer.

15. Review • Editing Locally and Globally • Code Analysis: Comments • Declaring a Variable • The For Loop

16. Improving the gocomputer The first version of the goComputer function doesn’t work very well. The function needs to be improved so that the computer doesn’t cheat and put the “o” on a place that already has an “o” or put the “o” on top of an “x”. We will use aSpace variable and assign it the text string “no”. Also, we will use the n variable and assign it a number from 0 to 8. varaSpace="no"; var n = Math.floor((Math.random()*9));

17. Improvement continued • By using a for loop to check through each part of the game board, we can determine if there is room left for the computer to place an “o”. If there is room on the board, the computer will then check if the randomly selected place is empty. If it isn’t, it calls the same function to try again. The computer will keep trying until it finds an empty space or until it determines the board to be full.

18. = is different than == • When we compare variables to see if something is the same as something else, we use the == operator. If we compared 1 to 1 by saying if(1==1) it would always return true. Be careful not to confuse this with an assignment operator. The = is an assignment. We can assign the variable x to be 1 by writing x = 1.

19. function goComputer() { varaSpace="no"; //find an integer from 0 to 8 var n = Math.floor((Math.random()*9)); //see if there is any space on the board and if there is take one for(i=0;i<9;i++){ if(board[i]==" ") aSpace="yes"; } if(aSpace=="yes"){ //see if the randomly selected place is empty and if it isn't, try again if(board[n]==" ") { board[n]="o"; } else{ goComputer(); } } }

20. Review • Improving the goComputer function • Improvement continued • = is different than == • Code example

21. Improvement: I won! function didPlayerWin(){ var won ="no"; if(board[0]=="x" && board[1]=="x" && board[2]=="x") won ="yes"; if(board[3]=="x" && board[4]=="x" && board[5]=="x") won ="yes"; if(won=="yes") alert('you won!'); } <img height="200" width="200" src="blank.png" onClick="board[0]='x';goComputer();showBoard();didPlayerWin();">

22. Other improvement ideas: aesthetics There is lots of room for improvement. Use your imagination and the Internet. Here are some ideas to get you started: • There aren’t any sounds. Lookup how to add sounds to JavaScript. • The html page is boring. Lookup how to add more colors, more text or more whatever. • The x, o and blank pictures can be made more awesome.

23. Improvements: functional • There is a lot of room for improvement. Here are some ideas to get you started: • If the computer wins, handle it. • Keep track of win/losses • Have a mode to have the computer play its self over and over (and over) again. • Don’t let the player take a place that is already occupied.

24. Rubric 20 points each • Implement the basic example code with copy and paste to an uploaded .htm file. • Create and upload original picture files for the game. • Create original functional improvements • Create original aesthetic improvements. • Explain original functional and aesthetic improvements in a paragraph on the bottom of the page.

25. Review • Improvement: I won! • Other improvement ideas: aesthetics • Other improvement ideas functional • Rubric