Pong Session 1 of 3
In this lesson, we'll recreate the classic Pong game using JavaScript. Concepts covered include functions, variables, events and random numbers. The lesson is divided into three one hour sessions.
Pong was one of the earliest video games created. First released in 1972, it was wildly popular and helped launch the video game industry. Interesting fact, it was also the first video game played by lab grown brain cells.
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: The Ball 15 Minutes
Let's start by placing a ball in the center of the screen.
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 ball.
The parameters we need are (in order) the x coordinate, y coordinate
and diameter.
The variables width and height
contain the width and height of the window. To place the ball in the
center we can divide their values by two.
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.
Variables are also useful for assigning names to things. Let's give
the ball a name. This will allow us to reference it later. We use
the let keyword to create a variable and the equals
operator to assign it a value.
let ball = circle(width / 2, height / 2, 50)
Part 2: Kick Start The Game 15 Minutes
Next, let's give the ball a push.
Zero Gravity
We need to tweak a few things to make our world more Pong-like. We'll get rid of gravity, friction and remove the walls.
gravity = 0
friction = 0
walls = false
It's also unfair to start before all players are ready. Let's wait until the mouse is clicked to start the game. How do we do that?
Events
Events are "things" that happen while our app in running, like a mouse click, or key press. We can write code that runs when that event occurs.
The first step is to write a function that is intended to run when the event occurs. These types of functions are referred to as an Event Handlers.
function startGame() {
ball.push(5)
}
In addition to giving the ball a push, let's also reset it's position to the center of the screen.
function startGame() {
ball.stop()
ball.x = width / 2
ball.y = height / 2
ball.push(5)
}
Finanlly, we attach our function to the "click" event using the
on() method.
on('click', startGame)
Try it out. Click the example below.
Part 3: The Paddles 30 minutes
We'll use the rect() function to create the paddles.
The parameters are (in order) the x coordinate, y coordinate, width
and height.
let player1 = rect(30, height / 2, 20, 100)
let player2 = rect(width - 30, height / 2, 20, 100)
We move a paddle up and down by adding or substracting from it's
y property. For example, the following code will move
the paddle up 5 pixels.
player1.y = player1.y - 5
Of course the paddle should only move when the player presses a key. To do this we'll write an event handler and attach it to the "keydown" event. This event fires when holding down a key.
function movePaddle() {
player1.y = player1.y - 5
}
on('keydown', movePaddle)
Pressing any key on the keyboard will now move the paddle up 5 pixels. Not quite what we want.
Some event handlers accept parameters that contain information about the event. The "keydown" event handler accepts a single parameter, containing which key was pressed.
If Statements
We want to move each paddle when the "keydown" event occurs, but only when the key parameter is a specific value. For example, if the "w" key was pressed, move Player 1's paddle up.
function movePaddle(key) {
if (key == 'w') {
player1.y = player1.y - 5
}
}
on('keydown', movePaddle)
If statement ask a question, and if the answer is true runs a block of code. In our example, the if statement asks if key is "w". If the answer is true, Player 1's padding is moved up 5 pixels. Note the double equal signs. As previously discussed, a single equal sign is used to assign a value to a variable. Double equal signs are used to compare values.
Following this pattern, we'll move Player 1 down 5 pixels if "s" is pressed, Player 2 up 5 pixels if the up arrow is pressed and down 5 pixels for the down arrow.
function movePaddle(key) {
if (key == 'w') {
player1.y = player1.y - 5
}
if (key == 's') {
player1.y = player1.y + 5
}
if (key == 'ArrowUp') {
player2.y = player2.y - 5
}
if (key == 'ArrowDown') {
player2.y = player2.y + 5
}
}
Our game so far.