Lab 13

To start Project 4 and learn...

1. to create HTML elements using JavaScript
2. to "bind" events to specific elements
3. to change the content and style of an element dynamically
4. to recognize and understand the difference between JavaScript and jQuery

1. Create a project4 folder
2. From project3, copy the following files and folders to your project4 folder:
   • css copy the entire foler including all the .css files
   • js copy the entire folder including all the .js files
   • functions.php
   • functions_database.php
3. Open functions.php, locate the make_buttom function, and add the following script tag as the last tag before the closing body tag:
   

   <script src="js/connect4.js"></script>

4. In the project4 folder, create a new file called connect4.php and add the following code:
   
5. In the js folder, create a new file called connect4.js and add the following code:
   
6. Upload your entire project4 folder to the server and navigate to connect4.php on the server
7. Close all the files you opened locally and instead edit connect4.js remotely on the server

1. I recommend editing connect.js on the remote server as we will make changes.
2. The game grid will be made of columns (c) and stacks (s), and we can generate the HTMl elements with JavaScript/jQuery as follows:
   
3. Add the code above then save connect4.js on the remote server and refresh your browser
4. The reason we have to test on the server is because the overall page structure generated via a our PHP framework. Also, we are going to use the server to eventually convert the game to multi-player (not in this lab, but eventually)
5. Be sure the grid is shown before moving forward

1. Add the following code right after you append the grid and before the closing });. Then save connect4.js on the remote server and reload the page in the browser:
   
2. To test the code, open the inspector in your web browser so you can see the console. Notice how the console output changes each time you hover over a column or click on a column.
3. Change the code so that current player is updated in the gameinfo div when the user clicks a column

1. We will now add some variables and modify the doIt function so that it updates the grid based on each player's click.
2. Add a global variable for storing the size of each stack:
   var stacks = new Array(M).fill(0); // Array of M zeros
3. Inside the doIt function, add the following code before changing the current player:
   
4. Save your code and test on the server. You should notice that "gravity is reversed" i.e., the pieces float up instead of dropping down. Fix this by changing the order of each stack when they are initially generated. Stack M should be at the top and stack 0 should be at the buttom.

1. First, we only want to change to the next player if there is no winner yet. The code below, shows how we can turn off the click and update the gameinfo if there is a winner, otherwise we alternate to the next player:
   
2. Second, the isWinner function must check for N-in-a-row in each stack, across each column, and in two diagonal directions. The code below, show how we can check each stack:
   
3. Add code to isWinner to check for N-in-a-row across each column. Hint: you just have to swap c and s, i.e., the inner loop and outer loop.