Objective
The goal of this project is to write a JavaScript program that plays Tic-Tac-Toe. This project will take you through the steps of creating the interface for the game. You will need to take it from there and write the algorithms to create a computer opponent.
Introduction
This is an example of an intermediate programming project. You will be writing a program that allows you to play a game of Tic-Tac-Toe against the computer.
To do this project, you should already be comfortable with creating basic HTML files using a text editor. You should also be familiar with creating HTML form elements, and having them interact with JavaScript functions. If you have not done any JavaScript programming before, we suggest you start with a simpler project, like Forms and Functions: Writing a Simple Calculator Program with JavaScript or ABC's of Programming: Writing a Simple 'Alphabetizer' with JavaScript.
The Introduction will help you get started, in a step-by-step manner. If you follow the steps in the Introduction, you can gradually build up a webpage that you can use to play Tic-Tac-Toe with a friend. The experience you gain from building the two-player game will help you when you take on the challenge of programming the computer to play against you.
Here are the steps covered in the Introduction. First you will learn how to write an HTML file (webpage) that represents a Tic-Tac-Toe board. Next you will learn how to make your webpage respond to mouse clicks on the Tic-Tac-Toe board using JavaScript. Then you will learn how to update the text values of HTML elements on the fly. You will also learn how to program Tic-Tac-Toe knowledge into your program to detect when the game has been won or ended in a draw. At this point, you'll have a webpage that you can use to play Tic-Tac-Toe with a friend.
The challenge we leave you with for your project is to write the algorithms so that the computer can be your opponent instead. Can you create a computer opponent that always gives you opportunities to win? Can you improve that opponent so that it plays strongly but sometimes gives you an opportunity to win? Finally, we all know that it is possible to play a perfect game of Tic-Tac-Toe that results in a draw. Can you write an AI player that never loses?
The important HTML elements used in this project are:
| SCRIPT | The Now you can write JavaScript code inside the script section. Let's start by creating the function we will call whenever a button is clicked: function squareclicked(square) // squareclicked is a function that is called whenever a button is clicked. { } These four lines create a function that will do nothing. The first line is a comment. It summarizes what the function does. The function is named "squareclicked," and it has one argument, "square." The argument will be used to tell the function which button has been clicked. This means you need to update your buttons to call the squareclicked() function: Notice how "this" is being sent whenever we call the squareclicked() function. When you put "this" inside an onclick attribute it represents the that the onclick attribute is created in. This means that whenever a button is clicked it will call the squareclicked() function and pass itself to the function. This will enable you to set the value of the square. Now update the squareclicked() function to set the value of the button: function squareclicked(square) // squareclicked is a function that is called whenever a button is clicked. { square.value = 'X'; } Jackpot! Now whenever a button is clicked it gets the value 'X'. The next step is to put the right value in the square based on whose turn it is. Alternating turns. In order to alternate turns and place the right value in the square that is clicked we will need to keep track of whose turn it is. You can do this by creating a "global" variable (a global variable can be accessed from any function) in the JavaScript section outside of the squareclicked() function, like this: |
0 comments:
Post a Comment