Plinko

In this lesson we'll recreate the classic Plinko game using JavaScript. Topics covered include variables, functions, mouse events and for loops.

This lesson 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.

Part 1: Drop The Disc 15 Minutes

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.

We'll use the circle() function to create the disc.

circle(400, 0, 50)

The parameters are (in order) the x coordinate, y coordinate and diameter. Try different values and see the result. We want the disc to start at the top of the screen, so we used an y value of 0.

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 disc name. This will allow us to reference it later.

let disc = circle(400, 0, 50)

Properties

Properties describe something. You have properties, such as your age and height. Objects in JavaScript can have properties too.

Setting the disc's anchored property to false will cause it to fall.

let disc = circle(400, 0, 50)
disc.anchored = false

Part 2: The Click Event 20 Minutes

Next we'll put the code to drop a disc into a custom function. Functions are useful for organzing code into reusable blocks. Ideally functions should perform a single action, and its name should describe that action.

function dropDisc() {
  let disc = circle(400, 0, 50)
  disc.anchored = false
}

Events

Events are "things" that happen while our app is running, like a mouse click, or key press. We can write code that runs when that event occurs.

Let's connect our dropDisc() function to the "click" event.

function dropDisc() {
  let disc = circle(400, 0, 50)
  disc.anchored = false
}

on('click', dropDisc)

Instead of always dropping the disc at the same location, let's use the mouse position.

function dropDisc() { let disc = circle(mouseX, 0, 50) disc.anchored = false } on('click', dropDisc)

Part 3: The Pegs 25 Minutes

Now for the pegs. We can create pegs by adding smaller circles to the stage.

function dropDisc() { let disc = circle(mouseX, 0, 50) disc.anchored = false } on('click', dropDisc) circle(0, 100, 5) circle(60, 100, 5) circle(120, 100, 5) circle(180, 100, 5)

It's going to take some time and a lot of code to fill the screen with pegs. Luckily there is a better way. We'll use a for loop.

The For Loop

A for loop is used to repeat a block of code. It's broken into three parts. Code that runs before the loop starts; a condition to check if we should continue; and code that runs after each pass through the loop.

In the first part, we'll create a new variable x to keep track of the horizontal position. We'll start this off at 0.

For the second part, we check to see if x is less than the width of the screen. If yes, then the loop continues.

For the third part, we add 60 to x. This moves the position 60 pixels to the right.

function dropDisc() { let disc = circle(mouseX, 0, 50) disc.anchored = false } on('click', dropDisc) for (let x = 0; x < width; x = x + 60) { circle(x, 100, 5) }

For Loop Inside of a For Loop

To create a grid of pegs, we could copy and paste our code multiple times, or we could use a loop inside of a loop!

The outer will set a variable to keep track of the y position of the pegs. We'll start at 100 and add 60 pixels each time, stopping when we're about 100 pixels from the bottom of the screen.

Offset Pegs

Close, but not quite there. In Plinko the pegs are offset to add more randomness. One way to achieve this by adding two pegs each time through the loop. One at the specific x and y coordinate, and another shifted 30 pixels to the right and 60 pixels down. Essentially we're adding two rows at a time, so we'll increase y by 120 pixels instead of 60.

Part 4: Taking it Further

Experiment with different peg layouts, or different shapes for the pegs and disc.
Keep track of the score in a variable. Add rectangles across the bottom with different point values. When the disc collides with a rectangle (triggering a "collision" event) increase the score.