|
- Set up your HTML page, insert the P5.js source tag into the <head>section of your project page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
Your code now speaks P5!
- Create a 3x3 grid on the canvas. Use rect() or line().
- Create a 3x3 array that will hold the value of each square. Use a nested for-loop for a 2-D array.
- Make it so that when you click on the upper-left square, it gets an X, and the value in the array for that square changes.
One way to do it is with
function mouseClicked()
- To make it handy for you to debug, add a label element to your HTML page, above the canvas.
Then display the Row and Column Clicked and the Value, in the label.
- Write a function that figures out which square is being clicked based on mouse position, and make changes that to square in the grid and on the canvas.
- Keep track of whose turn it is, Player 1 or Player 2, and change the square to an X or a O, depending on the player.
- Check if any player has 3 in a row and announce a winner if so. As you are adding up the rows and columns, display the results in the label so you can check yourself.
- Test and finish the project till it looks perfect to you.
|
|
