CS10: The Beauty and Joy of Computing - Su22

​

Agenda

• Best Coding Practices
• Intro to 2048 Project
• Testing

​

​

Announcements

• HW2 due tonight at latest!
• HW3 is out - we’re going to talk more about it today!
• Come to HW Party this Thursday!
• LOST Section!
• Midterm is coming up this Monday!
• Fill out adjustments form if you need!

Addressing Feedback

Feedback

• Please share slides earlier!
• Done. Give us some time though…
• Turn off lights on stage so we can see screen better.
• Done
• Lecture is way too fast!
• Understood. We will do our best… but a few things…
• You are not meant to understand every single thing in lecture perfectly
• Lecture is mostly for exposure
• PLEASE ASK QUESTIONS - live feedback is essential for Deeksha and I
• Lab is a lot / lab is crowded
• We are working on this!
• If you are in Imen’s lab, you are welcome to attend Silas or Vedansh’s (these tend to be less crowded)
• We try to have extra OH for this reason

​

A Bit of a Break

Agenda for Today

• Introduce HW3!
• What to expect if you haven’t read the spec
• Best Coding Practices
• Testing your Code!

​

​

The hope is that you keep the 2nd and 3rd items in mind while writing code for Homework 3.

​

Introducing Homework 3: 2048

2048 The Game - link to play

​

​

​

We Want to Code This Game

​

​

Some Important Parameters

• Gameplay: the 4 arrow keys - up, down, left, right
• The Rules
• You slide tile numbers around using the arrow keys, combining like tiles
• Two 2 tiles make a 4 tile, two 4 tiles make an 8 tile etc etc.
• Each time you slide the board, a random tile (2 or 4) appears
• The Goal: create a 2048 tile

​

Need a Representation

​

​

• Need to represent this 4x4 board
• Need to know how blocks are related to each other by location
• E.g. need to know if a 2 is next to another 2 so that we can combine them into one 4 tile

​

Solution: A List of Lists!

• Hopefully this is familiar
• Similar to a 2d coordinate system
• Let’s make each row a list

​

List

​

Solution: A List of Lists!

• Want to associate each row with another - put them all in another list!

​

List

List containing other lists

List of Lists Board Representation

​

​

​

Now I can

• Identify a specific tile by its row and column

​

1

​

​

2

​

​

3

​

​

4

1 2 3 4

Row: 2

Column: 2

List of Lists Board Representation

Now I can

• Consider which tiles would combine by looking at its entire row or column

​

1

​

​

2

​

​

3

​

​

4

1 2 3 4

Managing Complexity Through Decomposition

To build a complex system like 2048, it is absolutely necessary to decompose its complex functionality into simpler pieces.

• Humans simply aren’t smart enough to do it in one big block of code.
• Making good decomposition choices is the most important skill I want you to gain in CS10 (and 61A, and 61B).

Managing Complexity Through Decomposition

We’ve already decomposed some of the ideas into 5 blocks you’re required to implement.

​

Block 1: [medium difficulty]

• 75% chance that it adds a 2 to a random empty space on the board.
• 25% chance that it adds a 4 to a random empty space on the board.

​

Example:

​

​

Managing Complexity Through Decomposition

We’ve already decomposed some of the ideas into 5 blocks you’re required to implement.

​

Block 2: [medium difficulty]

• Rotates the board 90 degrees to the right.

​

Example:

​

​

Managing Complexity Through Decomposition

We’ve already decomposed some of the ideas into 5 blocks you’re required to implement.

​

Block 3: [very challenging!!]

• Merges chosen column upwards.

​

Example:

​

​

Managing Complexity Through Decomposition

We’ve already decomposed some of the ideas into 5 blocks you’re required to implement.

​

Block 4: [very easy]

• Merges all columns upwards.

​

Example:

​

​

Managing Complexity Through Decomposition

We’ve already decomposed some of the ideas into 5 blocks you’re required to implement.

​

Block 5: [medium difficulty]

• Returns true if no move (U, D, L, or R) does anything.

​

Example:

​

​

False

True

Best Coding Practices

In the real world…

• You’re not the only one using/editing/viewing your code
• You’ll also be reading/using/editing other people’s code
• In this class, we mostly care about things **working**
• But learning to write good code along the way is also helpful for your future coding endeavors
• Clean code is also essential for debugging

​

​

Variable names (out of scope)

Two main camps (in other languages, we cannot have spaces in our variable names):

1. Camel case (used in Java, JavaScript, C, C++)
1. Capitalize the first letter of words for the second word onward
2. Examples: minimumIndex, numberList
2. Snake case i.e. use underscores (Python)
• Separate words with underscores
• Examples: minimum_index, number_list

When do we capitalize the first letter of variable names? NEVER… with one exception.

If a variable will never be changed (i.e. a gravitational constant) capitalize its name. Example: GRAVITY

How can we write **clean** code?

• Have variable names that make sense

​

​

How can we write **clean** code?

• Have variable names that make sense

​

​

How can we write **clean** code?

• Efficiency as a priority!
• If your code is looking long and confusing, perhaps ask yourself “is there a better way to do this that involves less code?”

​

​

​

​

​

​

​

​

“Code is meant to be read and is executed incidentally.”

~ Hilfinger, Former 61B Prof

​

How can we write **clean** code?

Abstract away smaller procedures!

​

How can we write **clean** code?

Abstract away smaller procedures!

​

How can we write **clean** code?

Abstract away smaller procedures!

​

Test Driven Development

(TDD)

Test Driven Development

The basic idea: write tests BEFORE your write code

​

This way we can

• Know that our code works as we code
• Catch all the edge cases
• Error check
• User put in text and we need a number
• Write our code knowing all of the basic requirements
• Prioritize functionality
• E.g. not get lost in the sauce

​

​

​

​

​

​

​

Test Driven Development

​

​

​

​

​

​

​

​

​

​

You DON’T need to know this

​

​

​

​

​

​

​

Unit Testing with the Test Block: www.yellkey.com/practice

Test block idea: Simply hard-code a known good input/output pair.

​

What goes in the ? ? ? ?

A. 0 0 0 0

B. 4 32 16 4

C. 4 0 0 0

D. 4 0 16 16

Example of Unit Testing with the Test Block

Test block idea: Simply hard-code a known good input/output pair.

​

What goes in the ? ? ? ?

A. 0 0 0 0

B. 4 32 16 4

C. 4 0 0 0

D. 4 0 16 16

Example of Unit Testing with the Test Block

If we run our test now, what will it return, and why?

Example of Unit Testing with the Test Block

If we run our test now, what will it return, and why?

• It would report false. Because right now rotate clockwise just reports all zeros.