Please enable JavaScript to use CodeHS

Demos

Your Own Custom Function

In the previous activity you planned out the parts and pseudocode of your custom function. Now you get to develop it! Here are the requirements again: * You must define at least one custom function and call it from the `main()` function. * Within the custom function, you must ask the user for some sort of input and store that input in a variable. * The custom function must print something to the console that somehow relates to what the user inputted. * You must provide at least two comments in your code. A comment starts with the two symbols // , and describes what the code beneath it is doing. The comment is not run by the computer, so they are a great way to add notes to a program -- for you and anyone else (like your teacher) looking at the program! Take a look at previous activities in this course to see examples of comments that start with //. Using your pseudocode as a guide, develop your program with your custom function! <hr> *Extension Ideas:* * Include at least one calculation in your function. * Define and call more than one custom function!

Exploration: The Elevator

In this exercise, you are going to create a simple elevator animation. The basic program structure has been provided in the starter code. Below is all the code you need to create the animation. You need to copy and paste each code block into the appropriate space in the program. Each space needs only one code block. Block 1: ```javascript new Canvas(450, 450); world.gravity.y = 10; square = new Sprite(); square.width = 30; square.height = 30; square.bounciness = 0.1; square.y = 40; elevator = new Sprite(); elevator.width = 100; elevator.height = 15; elevator.color = '#99d46a'; elevator.collider = 'kinematic'; ``` Block 2: ```javascript let square; let elevator; ``` Block 3: ```javascript clear(); elevator.vel.y = cos(frameCount * 2.2) * 6; ```

Block Mario

In this exercise, you are going to recreate a screenshot from level 1 of the original Super Mario Bros. game with sprites. Click [here](https://youtu.be/-avspZlbOWU?t=14) to watch this level in action! On the left, you see the scene from the game, and on the right, what you need to create with your sprites: <img src="https://codehs.com/uploads/cf2c9dd052f675ccb4fcab6fd23b1ee8" width="450"> **Notes:** * Your canvas size should be 480 x 360 pixels. * You'll see that the starter code includes the mouse coordinates box to help you set your sprites' X and Y coordinates. * Use an online HEX color picker (remember, Google search "hex color picker") to find colors that are similar to what you see in the scene. * Your scene does not need to be exact. Choose the positions, sizes, and colors so that your scene looks like the Mario scene, even if it is not perfect. Success in this activity is to show that you know how to use the sprite properties to create a similar scene. * By default, sprites CANNOT overlap. Adjust the positions of the sprites so that they are close to each other, but not touching. If they are overlapping, you'll see them move slightly once the scene loads.

Exploration: Fountain

This program has most of what you need to create a fountain out of a mouse press. You need to add the lines of code to complete it! 1. On line 8, create a new group and save it in the `waterGroup` variable. 2. On line 22, create a water drop sprite from the group, saving it in a new variable named `drop`. Before you run the program, predict what will happen! Were you right? Try changing some of the group properties and see what happens. Why do you think the X and Y positions of the sprites are set in `draw()` instead of in `setup()`?

Star Field

Welcome to space, little ship! Run the program to see the ship, and use the arrow keys to practice flying it around. You need to build a star field obstacle course, with the `starGroup` and Tiles, which the ship needs to be able to navigate without having any collisions. If the ship accidentally collides with a star, the star will change colors. Can you create a star field that is challenging to navigate, but still doable? 1. Create a tile symbol for the `starGroup`. 2. Use the `starGroup` tile symbol in the Tiles framework to create your star field. When you are done, share with a friend and see how they do! *Note: this program uses some topics that you haven't learned before in order to create the ship controls and star collision system (custom functions beneath draw()). Try reading through the code and getting a sense of how it might be working.*

Project - Projectiles

Now is the time to develop the new level. Start by copying and pasting your final code from the first level, then make your changes! Use your plan from the previous activity as a guide. As a reminder, this is totally open-ended, but must at least satisfy these requirements: * It is error-free and runs. * The player can do everything they could do in the first level. That is, move and fire the cannon at the tower. * Have at least two new features (changes, additions, etc).