MICHAEL

Hey Alexis, I want to make an app, can you help me think through it? Be my thought partner?

ALEXIS

Of course. Happy to. What have you got?

MICHAEL

So I want to make an app that tests people's perception of color difference, but I want to make it a little game. Here's a sketch of what I have in mind.

ALEXIS

Wow. This is a great sketch. I think I get it. What do you need help with?

MICHAEL

Well, how should I start?

ALEXIS

It seems to me that first thing you probably want to figure out it how to generate the squares of color. Nothing works without that. So tackle that first, and worry about scoring and taking turns later.

MICHAEL

Okay, you're probably right. I had an idea for how to do that when I noticed the setProperty command in App Lab.

ALEXIS

setProperty? What's that?

MICHAEL

You know how in Design Mode you can set properties of a button, like its color, width, height, and so on?

Well with setProperty you can do the same thing with code!

ALEXIS

I see. Cool.

MICHAEL

Here look at this diagram...

1. In Code Mode you can find setProperty in the UI Controls toolbox.
2. Choose the id of the UI element you want to change a property of

3. The pulldown menu shows a list of properties that you can set for that element. It matches the list of properties that you see for an element in Design Mode

4. The last parameter is the value you want to set for that property. We're interested in background-color which has a variety of values you can give it.

ALEXIS

Okay, great. setProperty works. What's next?

MICHAEL

Well, I wanted to pick one of the squares at random to make the different colored one. Also, I want the color to be random, not just orange, every time.

ALEXIS

Okay, well I'm not sure about the colors yet, but I do have an idea for how to choose one of the buttons randomly.

MICHAEL

I'm all ears.

ALEXIS

Okay, notice how all the buttons have IDs that are pretty much the same? "button1", "button2", "button3", "button4". There's a pattern. It's always: "button" + some number

So I think we can use a trick we learned a while ago to build a string...

MICHAEL

Ah, I think I see where you're going...

ALEXIS

We can use randomNumber as the number, and then just tack it on to the string "button" and Presto!, we'd have generated one of the button IDs.

MICHAEL

Right. We can do something like this: var randButtonId = "button"+randomNumber(1,4);

Then we can add that into our existing code like this:

ALEXIS

Cool. Let's try it.

ALEXIS

Hey, we can use the same technique to make a random color!

MICHAEL

I was thinking the same thing. We can use the `rgb` command with 3 random numbers

ALEXIS

Right, so rather than hard-coding the string like var color = rgb(230, 155, 0); we can make 3 random numbers between 0-255, put each in a variable, and then use them to make the color.

MICHAEL

Yup. I think the code should look something like this:

var R = randomNumber(0,255);
var G = randomNumber(0,255);
var B = randomNumber(0,255);

var color = rgb(R, G, B);

ALEXIS

Genius! But wait a second. Now I'm worried about making our slightly different color. For testing with the orange we just added 20 to each of the R, G, and B values.

MICHAEL

We can do that now, too! If we make diffColor after color we can just add 20 to each variable before making a new string.

ALEXIS

Right, the code should look like this:

R = R+20;  //add 20 to current value of R
G = G+20;
B = B+20;

var diffColor = rgb(R, G, B);

MICHAEL

Good, but I think there's still a problem. What about numbers that are close to 255? For example, there's a chance that the 3 random numbers we make will come out to be something like (250, 250, 250). If we add 20 to each of those the values will be over 255. I don't know what happens if you try to specify a color with a value greater than 255.

ALEXIS

Well, I know that's actually not a problem. If you try to specify a color as something like rgb(270, 290, 300) the actual color will end up being rgb(255,255,255) anyway. It doesn't break the system, I tried it back when we were doing turtle programming.

MICHAEL

Okay, that's good news. But I just thought of another problem...

Even if large values for RGB don't break the system, our problem is that the color won't look very different. The difference between rgb(250,250,250) and rgb(255,255,255) is practically nothing. It will look basically the same and the person won't be able to play very well.

ALEXIS

Hmmm. Right. Well...here's an idea. What if we don't generate random numbers between 0 and 255? What if we just generate random numbers between 0 and 235? Then no matter what, if we add 20 it can't possibly go over 255.

MICHAEL

Brilliant! Okay so back when we generate the random color in the first place we should do this:

var R = randomNumber(0,235);
var G = randomNumber(0,235);
var B = randomNumber(0,235);

var color = rgb(R, G, B);

ALEXIS

Right and then you can use the same thing we came up with before - adding 20 to each of the RGB values to make diffColor.

MICHAEL

Nice. Okay, let's try it.

MICHAEL

Okay great we can produce random game boards!

What next?

ALEXIS

I think the next thing would be to add click-functionality to the buttons.

MICHAEL

Yeah, where if you click on a button we check whether it's the right one or not. So we're going to need 4 event handlers, one for each button.

ALEXIS

Right. Actually I'm thinking this would be a great time for another function. That will save us from writing the same code over and over again in each event handler.

The function should:

• Check whether they hit the right button or not
• Update the score

MICHAEL

Ooh, and we should also change the game board every time a button is clicked, too.

ALEXIS

Good thinking. We can put that in this function too since it's called on every button click. Let me sketch out what I'm thinking...

MICHAEL

I get it. Cool. So now my question is: How will the function know which button is correct?

ALEXIS

Hmm. Good question.

MICHAEL

Oh, what if we just made randButtonId a global variable? That way every time setBoard() is called, it generates a new random id and it becomes a global variable that any other function can look at.

Here, let me add to the sketch...

ALEXIS

Ok, good. randButtonId is actually the "correct" button to click in the game, and it's now a global variable. But now checkCorrect() needs a way to know both which button was hit so we can compare it to randButtonId.

MICHAEL

What if we gave checkCorrect a parameter? So if you call checkCorrect("button3") for example, it checks whether "button3" is correct and updates the score.

ALEXIS

I see, good idea. Seems like a pretty easy if-statement to write we compare the buttonId passed to the function and randButtonId

Here, I'll sketch it out...

MICHAEL

Nice. But, wow, that's a lot to change.

ALEXIS

True, but I'm glad we thought this out on paper first. I think we can do it. We shouldn't do it all at once, though. We should do it in steps, and at each step verify that the change is working.

MICHAEL

Let's just do that with console.log messages. At each step will just add console.log messages to verify that things are working, and we can remove them later if we want.

ALEXIS

Yeah. Let's take it in pieces. I suggest:

1. Add global var for correct button
2. Add 4 event handlers
3. Add function checkCorrect(id)
4. Add if-statement to verify correctness.

MICHAEL

Let's do it.

ALEXIS

Wow, it's really beginning to feel like a game!

MICHAEL

I know. So now let's think about scoring.

It's not so simple because what we want is for the players to take turns.

ALEXIS

Right, to update the score we need to know which player clicked a button. That means we need a way to indicate whose turn it is, and then update things based on that.

MICHAEL

I think we can just make another global variable to keep track. We can just store a number: 1 for player 1 and 2 for player 2. Then every time a button is clicked, we make a new game board, and we can also switch the player from 1 to 2, or 2 to 1.

ALEXIS

Okay, so there are actually two major things we need to do:

1. Alternate turns between player1 and player2 each time a button is clicked
2. Update player1's score if it was her turn or player2's score if hers.

MICHAEL

Probably yeah. Also, I wanted to indicate on the screen whose turn it is by showing and hiding a simple gray box behind the player's score, like this:

So, part of alternating turns is to update the screen to show whose turn it is. What should we do first?

ALEXIS

Well, I think we should start by getting the alternating player action working first. Because we can't really test whether we're updating the correct player's score unless we have it.

MICHAEL

Mhm. Good thinking. So let's start with get alternating turns working.

ALEXIS

It seems like we're going to need a small if statement that says something like "if it's player1's turn right now, then make it player2's turn, otherwise (it must be player2's turn so) make it player1's turn."

MICHAEL

Maybe we should put the code into another function that handles just the switching of the player and updating the screen. Call it something like switchPlayer().

ALEXIS

I think I follow. let's make sure we're both thinking the same thing. Let me add to the pseudocode here...

MICHAEL

I like it.

ALEXIS

Okay, let's add it with just console.log statements to verify for now. We'll update the UI once we know we have the variable changing correctly.

MICHAEL

Sounds good. Let's do it.

ALEXIS

Okay, now let's think about our if statement in checkCorrect and how to update the score properly. How do you want scoring to work?

MICHAEL

I think I want to make it so that if you guess correctly you get 1 point, but if you get it wrong you lose 3 points!

ALEXIS

Okay cool. To do that though we need to know which player's score to update.

MICHAEL

Right. To update the score we actually need to know two things:

1. If the correct button was pressed or not and
2. Which player's score we need to update

ALEXIS

Well, first of all, it sounds like we need new global variables to keep track of each player's score.

MICHAEL

Right. Let me make a note of it.

ALEXIS

And to know which player's score to update we can just nest some if-statements inside our current one. Let me hack out some pseudocode:

Ugh. Just writing that down felt like a lot.

MICHAEL

Yeah, I was thinking we could use a series of compound expressions like this.

MICHAEL

Blech. Not much better.

ALEXIS

I just thought of a 3rd option...and don't hate me for suggesting this, but...we could make another function called something like updateScoreBy(amountToAdd).

And this function's whole job is to figure out whose turn it is and add the amount given in the parameter to the correct player's score.

MICHAEL

Mmmmm. Interesting. But what if we need to subtract from the score? Do we need a new function?

ALEXIS

Actually, No! We can just give a negative number to the parameter if we want to subtract! If we add -3 to the score that's the same as subtracting.

MICHAEL

Oh, that's clever! Will it save us code?

ALEXIS

Maybe, let me sketch it out.

MICHAEL

So, the total amount of code is about the same as the if-statements, but I think this is SO much easier to read.

ALEXIS

I agree. Look how clean and easy to read checkCorrect is this way.

MICHAEL

So, you convinced me, we need to add another function. I'm sensing a pattern.

ALEXIS

Yeah, we're going to need to do the same kind of thing we did before:

1. Add global variables for player1 and player2 scores
2. Add a new function to update the score
3. Call that function from the appropriate places.

MICHAEL

That's basically what we had to do last time.

ALEXIS

Yup. Let's do it again but for this new problem.

MICHAEL

Let's get coding!

ALEXIS

All right! This is fun.

MICHAEL

Okay, the last thing we need to do is have a way for the game to end.

ALEXIS

What are you thinking?

MICHAEL

Well, I don't know. I can see a lot of possibilities. I do know that I want there to be a winner, and when the game is over it switches a different screen that says "Game Over" and says who won. Like this:

ALEXIS

Sounds do-able. So, how do you want to determine the winner?

MICHAEL

I was thinking something simple, just based on the score.

ALEXIS

Let's come up with a few ideas...

MICHAEL

I was thinking about the rule being: First to 10 wins. Keep playing until one person's score reaches 10.

ALEXIS

Interesting. What about First to get 3 wrong loses? That's tougher because you'd have to add a variable to count incorrect clicks for each player and add additional if-statements.

MICHAEL

Maybe, I'll look into that. How about: Play until the difference in scores is greater than 5?

ALEXIS

They might play forever that way! How about making it a team game: play until the combined score score is 20 or something like that?

MICHAEL

Or play until, combined, they get 3 wrong?. That would be easier to count since we'd just need a single variable.

ALEXIS

Well that's a lot of ideas. Whatever you choose, I think how you should add the code will basically be the same and we can follow the same pattern -- add a function.

MICHAEL

I agree. I think in checkCorrect, right after we update the score, we should check if the game is over before setting the board or switching players. Like this:

ALEXIS

Yeah, I see. So in checkGameOver() if the game is over you'll just switch screens right there, and set some labels. Otherwise do nothing.

MICHAEL

Right. checkGameOver will appear to do nothing most of the time, because it's just checking the conditions behind the scenes. But once the end-of-game condition is hit, the screen will switch.

ALEXIS

So if you add this function, it's just a matter of choosing your condition.

MICHAEL

Okay, well. I think I can handle it from here. Thanks for all your help, Alexis.

ALEXIS

Don't mention it! It was fun. I'm looking forward to playing your game.

MICHAEL

Me too. Just need to finish it...

Click continue to finish the game