playToken() Method Solution3:43 with Ashley Boucher
See the solution for the playToken() method.
Hey, there. Welcome back. 0:00 The playToken method is the final step in this stage. 0:02 The amount you've accomplished so far is huge. 0:05 I'm really excited to walk through the playToken method with you, and 0:07 then load up a demo of what we've done so far in the browser. 0:10 Let's get started. 0:13 Navigate to the game.js file. 0:15 The playToken method can be written immediately below the handleKeyDown 0:17 method. 0:21 So the first thing I did in this method was store some things 0:22 we'll be using throughout it in variables. 0:25 You don't have to do this, of course. 0:28 But in this case, it made my code a lot easier to read and 0:29 a lot easier to write, too. 0:32 First, I declared a variable called spaces. 0:34 This was set to this.board.spaces, meaning the spaces variable now holds 0:37 a reference to the entire 2D array of space objects representing the game board. 0:43 Next, I stored the active token in the variable called activeToken. 0:49 Then, I declared a variable called targetColumn. 0:54 We know what column the active token is over. 0:57 If you recall, 1:00 this value is stored in the column location property on the active token. 1:01 The column location value is an integer, 1:05 anywhere from zero to the total number of columns minus 1. 1:08 By using the column location value as an index of the spaces array, 1:12 we now have access to the target column. 1:17 Finally, I declared a variable called targetSpace, which is set to null. 1:20 It's assigned to null because at the beginning of this method we do 1:24 not have a target space. 1:28 It's in the next few lines that we identify this target space. 1:29 So to do that, I've used the for 1:33 of loop to iterate through the individual space objects in the target column array. 1:35 If the spaces token property is equal to null, it means the space is empty. 1:41 Thus, it's a potential target. 1:45 We set our target space equal to that potential space, and 1:48 then move on to the next space in the array. 1:52 At the end of the for loop, the target space variable will hold the lowest empty 1:54 space in that column, which is now our target space. 1:59 Now, if at the end of the loop the target space variable is still equal to null, 2:04 that means the column is full. 2:09 The for loop never found an empty space in the target column. 2:12 If that's the case, then nothing else should happen. 2:16 But if it's not the case, and we've found a target space, then we simply set 2:18 the game's ready state to false, and call the drop method on the active token, 2:23 passing in the target space as a parameter. 2:28 We'll get back to the callback function that we 2:30 talked about before in a future step. 2:33 Okay, that's all there is to it. 2:35 Our playToken method is complete. 2:37 Save all your files and make sure your code matches up. 2:39 Now, it's time to see the demo. 2:42 I've got the game loaded up in the browser here. 2:45 I'll hit the Begin button to register that we're starting the game. 2:48 Now, we can see the board and the first player's active token here. 2:51 I'm gonna use the right-arrow key to move the active token across the board. 2:56 I'll use the left-arrow key to move it back. 3:00 I'll pick this column here and hit the down-arrow key to drop the token. 3:03 And there's our cool bouncy animation effect. 3:08 Awesome. 3:10 But now what? 3:11 Where is the next token? 3:12 Shouldn't the other player be able to take a turn? 3:14 We'll work out all that game logic that comes after a token is dropped in the next 3:16 and final stage. 3:21 You should feel really proud of how far this game has come. 3:22 We're almost to the finish line. 3:25 If you tried to demo your own game and got an error, or something wasn't working, 3:27 you should take a break here, and match up all your code. 3:31 If you like, it might be a good time to open the project files for stage five so 3:34 you know you're working with the right code moving forward. 3:38 Great work, and I'll see you soon. 3:41
You need to sign up for Treehouse in order to download course files.Sign up