Code Pictionary

In this activity, take turns drawing a randomly selected word while other students guess! Topics covered include coordinates, functions, and properties.

This activity uses the Kid.js JavaScript framework. To get started with Kid.js, create an account on kidjs.app or import the framework into your own project.

Drawing With Code 20 Minutes

Let's start by going over some basics.

Coordinates

If you were to hold a magnifying glass up to a computer monitor, you would see it is made up of an array of tiny dots called pixels. We reference an individual pixel by counting the number pixels from the left side of the screen and down from the top of the screen. These are its coordinates. The number of pixels from the left is the x coordinate. The number of pixels from the top is the y coordinate.

Functions

We program a computer by giving it a series of commands, also known as functions. To run a command or function in JavaScript, type the name of the function followed by parentheses.

Many functions need parameters. For example, if you were to command someone to walk, you may also need to tell them how many steps or which direction. The parameters go inside of the parentheses.

Kid.js includes a bunch of functions to draw various shapes. For example, the following function is used to draw a star.

star(400, 200, 200)

The parameters are (in order) the x coordinate, y coordinate and size. Try different values and see the result.

You can view the entire list of shape functions in the framework documentation or download this cheat sheet.

Variables

Variables are used to keep track of things. Think of a variable as a box with a label you can put things in. There are many things we may need to keep track of in an app, such as high score or health. Take a moment to brainstorm other items you may need to keep track of.

Variables are also useful for assigning names to things. Let's give the star a name. This will allow us to reference it later.

let polaris = star(400, 200, 200)

Properties

Now that the star has a name, we can change it's properties. In JavaScript, we access properties of an object by adding a period, followed by the property name.

We can change the property by assigning a new value. The following example changes the shape's color property.

let polaris = star(400, 200, 200) polaris.color = 'gold'

Shapes also have an angle property.

let polaris = star(400, 200, 200) polaris.angle = 30

Let's Play

Write several words on small pieces of paper. Use this template, or make up your own words. Have students randomly select a word and attempt to draw it using the shape functions and properties, while the other students guess. You may wish to go first as an example.