Assignments During Shelter in Place

Go ahead and start the Tic-Tac-Toe project in Unit 9.  You only need to spend about 20 mins a day on this.  You can submit help questions to me through CodeHS, or email me directly.  I will grade your work as you submit it to me on CodeHS

Lesson: 9.1 Tic Tac Toe

9.1.1 Draw the Tic Tac Toe Lines

In this project, we will be writing the game of tic tac toe as shown here. The first part is to draw the board.

Start by drawing the four lines that divide the grid into 9 squares.

9.1.2 Tic Tac Toe: Responding to Mouse Events and Using a Grid

We are writing the game of tic tac toe as shown here. In this part we will handle mouse clicks and draw the Xs and Os, and also use the grid data structure to keep track of the game.

9.1.3 Tic Tac Toe: The Full Game

Write the game of tic tac toe as shown here.

In this part we will complete the game of tic tac toe by determining the winner, and drawing a line to show who won.

3/2-3/6

 Lesson: 8.15 Grid Example: Get a Row

Section:


In this lesson students get to explore more with grids.

Description

Write a function that returns a list of the diagonal elements in a square grid.

function getDiagonal(grid, whichDiagonal)

The diagonals are named by the constants at the top of the program.

var DIAGONAL_TOP_LEFT_BOTTOM_RIGHT = 0;
var DIAGONAL_BOTTOM_LEFT_TOP_RIGHT = 1;

For example, given the grid grid with these contents:

4   2   5
1   8   3
7   3   9

The call

getDiagonal(grid, DIAGONAL_TOP_LEFT_BOTTOM_RIGHT)

Should return an array with contents

[4, 8, 9]

Now test your function by calling it several times, and printing out the grid.

 Lesson: 8.16 Basic Data Structures Quiz

Section:


This lesson brings together everything students have learned in all of the previous modules. Students get to make their own tic tac toe game as well as some other complex programs that use data.

Discussion Questions

What is a list, or array?

What is a grid?

How is a grid different from an array?

What types of events are used in programs?

How would you apply top down design to everyday activities? – Eating lunch – Waking up – Playing a sport

How do you approach breaking down a tough coding problem into smaller problems?

Why is decomposition important?

2/24-2/28

 8.10.4 Hogwarts


Description

The Hogwarts sorting hat has had a busy day building up the studentHouse Object. Every student has been placed into a house: Gryffindor, Hufflepuff, Ravenclaw, or Slytherin. For example

println(studentHouse["Harry Potter"]);

Would print out

"Gryffindor"

Your job is to write a function printStudentsInHouse(studentHouse, house) that prints out the name of every student in the given house. For example, printStudentsInHouse(studentHouse, "Gryffindor") may print out

Gryffindor:
Harry Potter
Ron Weasley
Hermione Granger
Ginny Weasley
Peter Pettigrew

 8.11.5 Text Messages


Description

In this exercise, you will write a program to send text messages to friends.
First, you need to decide what kind of data structure to use to store the text messages. Given a friend’s name, you should be able to look up every text message you’ve sent to that friend. You should also be able to easily add a new message to the list of messages you’ve sent to a friend.

Your job is to create a variable textMessages that will keep track of every message you send. Spend some time thinking about what kind of data structure textMessages should hold. Draw out on paper what the structure will look like.

Then you’ll write a function sendMessage(textMessages, friendName, message) that updates textMessages to store the message you just sent to friendName.

Then you’ll write a function getMessages(textMessages, friendName) that will return a list of every message you’ve sent to friendName, in the order that you sent them.

8.12.4 Vowels


Description

Create a set that contains the vowels {"a", "e", "i", "o", "u"}

Then, let the user input letters using readLine and print whether each letter they enter is a vowel or not. If a letter is in the set, then the letter is a vowel.

Let the user continue to input letters until they type the SENTINEL, which is a blank line.

Here is a sample run:

Letter: a
Vowel
Letter: g
Not a vowel
Letter: z
Not a vowel
Letter: 

In this lesson students are introduced to a grid as a way to store data in a table-like format.

What is a grid?

How is a grid different from an array?

 8.14.4 Summing Grid


Description

Write a function called

function sumGrid(grid)

that takes a grid as a parameter and fills each location in the grid with the sum of the row index and column index of that location.

For example, this code:

var grid = new Grid(2, 3);
println(sumGrid(grid));

Should output:

0   1   2
1   2   3

Test your function by calling it several times, and printing out the grid.

 8.15.4 Grid Diagonal


Description

Write a function that returns a list of the diagonal elements in a square grid.

function getDiagonal(grid, whichDiagonal)

The diagonals are named by the constants at the top of the program.

var DIAGONAL_TOP_LEFT_BOTTOM_RIGHT = 0;
var DIAGONAL_BOTTOM_LEFT_TOP_RIGHT = 1;

For example, given the grid grid with these contents:

4   2   5
1   8   3
7   3   9

The call

getDiagonal(grid, DIAGONAL_TOP_LEFT_BOTTOM_RIGHT)

Should return an array with contents

[4, 8, 9]

Now test your function by calling it several times, and printing out the grid.

2/18-2/21


Sometimes you want to look through a list to find something specific. The indexOf function allows you to search through a list for something you are looking for, and it will tell you if it is there and if so, where it is.


In this lesson we show how students can remove items from different parts of an array.


An Object is another type of way to store data in Javascript. An object stores mappings from a key to a value. This lesson teaches you to create your own kinds of objects that store information you are looking for. For example, the key is a name and the value is a phone number.


In this lesson we introduce students to basic JavaScript objects to store key-value pairs. The “phonebook” or school directory is a good analogy for an object.

2/10-2/14

Lesson: 8.1 Intro to Lists/Arrays

Section:


In this lesson we introduce the idea of lists or arrays to students as a way to store ordered information.

Lists are fundamental data structures that are part of every programming language and used in almost every program.

This exercise gives students practice creating lists and accessing the elements inside. Students will use lists in a useful way, to store and print out places on their personal travel list.

This exercise also gives students more practice creating lists and accessing the items inside, this time with ints instead of strings.

Students will need to access multiple indices and print out their values.


Indexing into an array means that you are getting something from a certain spot in a list.

This exercise gives students more practice creating lists / arrays, and gives students practice changing a single value in an array by “indexing into” the array with bracket notation.


In this lesson students practice basic array operations like adding and removing from an array.

This exercise has students practice using the push and pop commands, and analyze the effects they have on the resulting list.


Looping over arrays lets to access each item in an array in order. This allows you to run code related to everything in a list.

This exercise gives students practice looping through an array and doing something simple with each of its elements. Students have seen the example of summing all the elements together by looping through the array and keeping a running sum. This exercise is very similar, but asks students to keep a running product instead.


One of the key operations with an array is looping, or iterating over the elements in an array. Students get to practice iterating over an array, as well as doing computations or storing information as they loop over the array. Students get practice with both console and graphics programs.

 

2/3-2/7

 7.1.4 Fun Snake 4 – A Full Game!


Description

Overview

Your goal in this part is to make this a real live and awesome snake game. This means we need to add points. And this also means the snake needs to be able to go through walls.

When you are done, you should have the snake game here that you can try out on the demos page.

Specifications

Each time the snake gets bigger, you should add one point to the users score. Each time the snake eats food, you should add 100 points. If the user loses, you should stop adding points.

If the snake moves all the way past the right wall, the snake should end up on the left. If the snake goes through the left wall, the snake should end up on the right. Similarly the snake should be able to go through the top and bottom walls. Hint: You can use the modulus operator to solve this one in quite a nice way.

1/27-1/31

Fun Snake 2 7.1.2

Description

Overview

Your goal in this part is to get the snake to know when it collides with itself.

Specifications

Our snake collides with itself when there is already a part of the snake in the next spot that we are going to be. You’ll want to use the function getElementAt(x,y) to see if there is already an object there.

When you lose, you should put text up on the screen displaying a message to that effect.

Fun Snake 3 7.1.3

Description

Overview

Your goal in this part is to draw food for the snake every FOOD_DELAY milliseconds. Food is a red circle drawn at a random location on screen.

Specifications

Our snake should be able to eat the food if the snake goes over the same location as the food. If the snake eats the food it should be removed.

1/21-1/24

 7.1.1 Fun Snake 1


Description

Overview

Your goal in this assignment is to create a really fun snake game. We will start by making the snake.

Specifications

Our snake only gets bigger. We create one square at the center to be our snake, and then every DELAY milliseconds, we add one square in the direction the snake is moving. The snake starts moving east.

Hints:

  • You want to keep track of a current direction the snake is facing.
  • You also want to keep track of the snake’s current x and y position.
  • You’ll need several functions to make this program easier. You need to respond to a keypress – the arrow keys should set the snake’s current direction. Take a look at some of your earlier code.

 7.1.2 Fun Snake 2


Description

Overview

Your goal in this part is to get the snake to know when it collides with itself.

Specifications

Our snake collides with itself when there is already a part of the snake in the next spot that we are going to be. You’ll want to use the function getElementAt(x,y) to see if there is already an object there.

When you lose, you should put text up on the screen displaying a message to that effect.

1/13-1/17

6.1.3: Breakout

The last part of the game is to get collisions working. You should remove bricks when the balls collide with them. This is VERY similar to bouncing the ball.

You just need to use the getElementAt(x, y) function to see if there is an element where the ball is. If the element is not null, then you can remove it with the remove function.

You also need the ball to bounce up if it collides with the paddle

You want to check the four corners around the ball to see if there is an element there.

Last, there are just some miscellaneous things you can do:

  • Pause the ball when it gets reset until you click. Kind of like the Pause Ball exercise.
  • Stop the game after the ball falls to the bottom 3 times.
  • Stop the game when all the bricks are removed.
  • Display messages on the screen when you win or lose.

Then, you can just go crazy with extensions like these, if you’re feeling up to it.

  • Display a score.
  • Add power ups.
  • Add cheat codes.
  • Add multiple difficulty levels.
  • Anything else that you can think of

1/7-1/10

Description

Overview

The last part of the game is to get collisions working. You should remove bricks when the balls collide with them. This is VERY similar to bouncing the ball.

You just need to use the getElementAt(x, y) function to see if there is an element where the ball is. If the element is not null, then you can remove it with the remove function.

You also need the ball to bounce up if it collides with the paddle

You want to check the four corners around the ball to see if there is an element there.

Last, there are just some miscellaneous things you can do:

  • Pause the ball when it gets reset until you click. Kind of like the Pause Ball exercise.
  • Stop the game after the ball falls to the bottom 3 times.
  • Stop the game when all the bricks are removed.
  • Display messages on the screen when you win or lose.

Then, you can just go crazy with extensions like these, if you’re feeling up to it.

  • Display a score.
  • Add power ups.
  • Add cheat codes.
  • Add multiple difficulty levels.
  • Anything else that you can think of