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

11/18-11/22


In this lesson students will create a drag and drop program by combining lots of the ideas from this section.

Objective

Students will be able to…

  • Synthesize the skills and concepts learned in the Animation and Games unit to create a full game step by step.
  • User input via the mouse and keyboard
    Drawing basic graphics objects
    Callback functions
    Breaking problems down with Top Down Design

This takes several days to complete

11/11-11/15

 Lesson: 4.5 Mouse Events: Mouse Clicked

Section:


Here we introduce a way the students can get input from the mouse using mouse clicked. We keep some of the same building blocks by showing examples with circles and ghosts, and then the student programs prompt them to use this new idea in combination with tracking overall program state.

Objective

Students will be able to…

  • Describe how events are different than timers
  • Use mouse click events to create programs that respond to user clicks

Mouse events capture actions performed by the mouse. This allows you to create interactive programs including basic games. This lesson explains how to use mouse events to make some interactive animations.

Objective

Students will be able to…

  • Explain how events are different from timers.
  • Create interactive programs that use events to respond to the mouse moving.

In this lesson we continue to use user input via the mouse.

Objective

Students will be able to…

  • Explain how events are different from timers.
  • Create interactive programs that use events to respond to the mouse moving.

Keyboard events capture when the user presses keys on the keyboard. This allows you to write programs that take input from the keyboard to change what is happening in the program.

Objective

Students will be able to…

  • Explain how events are different from timers.
  • Create interactive programs that use events to respond to the keyboard input.

 Lesson: 4.9 Unit Quiz

Section:

Notebooks are due Friday November 15th

11/4-11/8

 Lesson: 4.5 Mouse Events: Mouse Clicked

Section:


Here we introduce a way the students can get input from the mouse using mouse clicked. We keep some of the same building blocks by showing examples with circles and ghosts, and then the student programs prompt them to use this new idea in combination with tracking overall program state.

Objective

Students will be able to…

  • Describe how events are different than timers
  • Use mouse click events to create programs that respond to user clicks

Mouse events capture actions performed by the mouse. This allows you to create interactive programs including basic games. This lesson explains how to use mouse events to make some interactive animations.

Objective

Students will be able to…

  • Explain how events are different from timers.
  • Create interactive programs that use events to respond to the mouse moving.

In this lesson we continue to use user input via the mouse.

Objective

Students will be able to…

  • Explain how events are different from timers.
  • Create interactive programs that use events to respond to the mouse moving.

Keyboard events capture when the user presses keys on the keyboard. This allows you to write programs that take input from the keyboard to change what is happening in the program.

Objective

Students will be able to…

  • Explain how events are different from timers.
  • Create interactive programs that use events to respond to the keyboard input.

 Lesson: 4.9 Unit Quiz

Section:

Notebooks are due Friday November 8th.

10/28-11/1


In this lesson students will be introduced to the concept of using timers for animation. Now instead of having graphics programs that stay the same, the content changes every time the timer runs. The first program students will see is a moving ball, so discussing this with the class as a demo on the projector is very useful.

Objective

Students will be able to…

  • Explain in their own words how animation works
  • Create animation in programs using the setTimer function
  • Explain what a callback function is

In this lesson we’ll look at more examples with timers and start making more interesting animations. Students will use timers and the Randomizer to create animations on the canvas.

Objective

Students will be able to…

  • Create programs with timers to create increasingly challenging animations
  • Analyze existing programs and explain how they create animations
  • Utilize the Randomizer to generate random events in their animations

In this lesson students now use timers in combination with the other ideas they have learned, including more graphics as well as coordinate math to create different objects. The random ghosts serves as a fun example to show how you can modify things once you have the basic building blocks in place.

Objective

Students will be able to…

  • Explain the general workflow of creating an animation program
  • Analyze animation programs and identify similarities and differences
  • Create increasingly challenging animations using timers, graphics, and the Randomizer

This lesson builds on our use of timers and utilizes if statements inside timers to dynamically change what the animations are doing. The exercises build on the Bouncing Ball example.

Objective

Students will be able to…

  • Explain the general workflow of creating an animation program
  • Analyze animation programs and identify similarities and differences
  • Create increasingly challenging animations using timers, graphics, and the Randomizer

Here we introduce a way the students can get input from the mouse using mouse clicked. We keep some of the same building blocks by showing examples with circles and ghosts, and then the student programs prompt them to use this new idea in combination with tracking overall program state.

Objective

Students will be able to…

  • Describe how events are different than timers
  • Use mouse click events to create programs that respond to user clicks

10/22-10/25

Exercise 3.1.1: Guessing Game

Overview

The computer picks a number between 1 and 100, and you have to guess it.
The computer will tell you whether your guess was too high, too low, or correct.
Your assignment is to generate a random number and let the user guess numbers until they guess the correct number.

Hints

You’re going to want to use some kind of loop. Make sure to exit the loop when the user guesses correctly or hits cancel.

Use constants, MIN and MAX to represent the range of numbers the computer can choose.

You will need to use the Randomizer to generate a number. See the cheat sheet.

Final Product

Here is a screenshot of a sample run of the guessing game.


In this lesson students will be introduced to the concept of using timers for animation. Now instead of having graphics programs that stay the same, the content changes every time the timer runs. The first program students will see is a moving ball, so discussing this with the class as a demo on the projector is very useful.

Objective

Students will be able to…

  • Explain in their own words how animation works
  • Create animation in programs using the setTimer function
  • Explain what a callback function is

In this lesson we’ll look at more examples with timers and start making more interesting animations. Students will use timers and the Randomizer to create animations on the canvas.

Objective

Students will be able to…

  • Create programs with timers to create increasingly challenging animations
  • Analyze existing programs and explain how they create animations
  • Utilize the Randomizer to generate random events in their animations

In this lesson students now use timers in combination with the other ideas they have learned, including more graphics as well as coordinate math to create different objects. The random ghosts serves as a fun example to show how you can modify things once you have the basic building blocks in place.

Objective

Students will be able to…

  • Explain the general workflow of creating an animation program
  • Analyze animation programs and identify similarities and differences
  • Create increasingly challenging animations using timers, graphics, and the Randomizer

This lesson builds on our use of timers and utilizes if statements inside timers to dynamically change what the animations are doing. The exercises build on the Bouncing Ball example.

Objective

Students will be able to…

  • Explain the general workflow of creating an animation program
  • Analyze animation programs and identify similarities and differences
  • Create increasingly challenging animations using timers, graphics, and the Randomizer

10/14-10/18


In this lesson we explore the scoping of a variable, which is where the variable is “defined” or where it exists. In this unit getting students to define and explain the concept themselves is key.

Objective

Students will be able to…

  • Identify the scope of a variable
  • Identify which variables are in scope at a given point in a program

Use your knowledge of basic Javascript to create some fun programs! Students will create their own Ghost drawings from Pac-Man, a Guessing Game, and a drawing of their own choosing. This will allow students to get creative with their code to show what they have learned.  This takes several days to accomplish

Objective

Students will be able to…

  • Synthesize the skills and concepts from the JavaScript and Graphics, JavaScript Control Structures, and the Functions and Parameters units to solve increasingly difficult programming challenges
  • Break down a large problem into smaller parts using Top Down Design, and solve each of these smaller parts using functions
  • Create helpful comments with preconditions and postconditions to help the reader understand the code
  • Find and fix bugs in large programs

Notebooks are due Friday 10/18

10/7-10/11


In this lesson we start to introduce functions and parameters. Functions and parameters are some of the key building blocks for all programs. Here we just introduce functions with parameters, but functions with return values comes next. This way students can just focus on the “input” to the function rather than the input and output at the same time. Students will start writing console programs to try simple functions with parameters and will then write graphics programs.

Objective

Students will be able to…

  • Explain the purpose of functions
  • Create their own JavaScript functions
  • Utilize their JavaScript functions to solve simple problems
  • Create functions that take in parameters as input

Functions and parameters are some of the key building blocks for all programs. Here we just introduce functions with parameters, but functions with return values comes later. This way students can just focus on the “input” to the function rather than the input and output at the same time. Students will start writing console programs to try simple functions with parameters and will then write graphics programs.

This lesson covers functions with multiple parameters. Students will write functions that take in multiple parameters as input and print out output.

Objective

Students will be able to…

  • Explain the purpose of functions
  • Create their own JavaScript functions
  • Utilize their JavaScript functions to solve simple problems
  • Create functions that take in multiple parameters as input, and use print statements for output

Functions and parameters are some of the key building blocks for all programs. Here we just introduce functions with parameters, but functions with return values comes later. This way students can just focus on the “input” to the function rather than the input and output at the same time. Students will start writing console programs to try simple functions with parameters and will then write graphics programs.

This lesson covers functions with multiple parameters that create graphics as output. This is very useful, since creating several different graphical objects involves writing the same code over and over again (set the size, set the color, set the location, etc). Functions and parameters allow us to write the code once and then use parameters to create the different graphical objects and add them to the canvas.

Objective

Students will be able to…

  • Explain the purpose of functions
  • Create their own JavaScript functions
  • Utilize their JavaScript functions to simplify their graphics programs
  • Identify repeated code that can be simplified with functions and parameters
  • Create functions that take in multiple parameters as input, and create graphics as output

Think of a function like assigning a task. A return value is giving you the completed work.
This allows you to write functions that do some work for you and send back the result.
Parameters are like inputs into the function, and the return value is output.

Objective

Students will be able to…

  • Explain the purpose of returning a value from a function.
  • Create functions that return values.
  • Create programs that call functions with return values and store the result for later use.

Think of a function like assigning a task. A return value is giving you the completed work.
This allows you to write functions that do some work for you and send back the result.
Parameters are like inputs into the function, and the return value is output.

Objective

Students will be able to…

  • Explain the purpose of returning a value from a function.
  • Create functions that return values.
  • Create programs that call functions with return values and use the return values to solve a higher order problem.