Kid.js | Create a Pong Game Using JavaScript

Part 4: Random Direction 25 minutes

Currently the ball always starts moving to the right, giving Player 1 an unfair advantage. This is because the code push(5) is always pushing the ball in the same direction with the same amount of force.

Instead let's generate a random direction and force. We'll use the random() function to generate a random number. The following code will generate a random whole number between 0 and 1.

let pushX = random(0, 1)

Not there yet. This would either give the ball a light push to the right (1) or none at all (0). Let's take this number and subtract 0.5.

let pushX = random(0, 1) - 0.5

The number will now either be -0.5 or 0.5. Next, let's multiply by 2. Take note of the brackets, as the order of operations is important here.

let pushX = (random(0, 1) - 0.5) * 2

Now the number is either -1 or 1. That is a pretty soft touch, so let's multiply by a larger number.

let pushX = (random(0, 1) - 0.5) * 10

This gives us either -5 or 5. If we wanted to get fancy, we could use a random multiplier.

let pushX = (random(0, 1) - 0.5) * random(10, 20)

Finally, to make it more challenging we'll also give it a push in the vertical direction.

let pushX = (random(0, 1) - 0.5) * random(10, 20)
let pushY = random(-10, 10)
ball.push(pushX, pushY)

Let's see it all in place.

gravity = 0 friction = 0 walls = false let ball = circle(width / 2, height / 2, 50) let player1 = rect(30, height / 2, 20, 100) let player2 = rect(width - 30, height / 2, 20, 100) function startGame() { ball.stop() ball.x = width / 2 ball.y = height / 2 let pushX = (random(0, 1) - 0.5) * random(10, 20) let pushY = random(-10, 10) ball.push(pushX, pushY) } on('click', startGame) 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 } } on('keydown', movePaddle)

Part 5: Keeping Score 25 minutes

Time to get competitive. Create two variables that will be used to keep track of the score for each player Start them off at zero.

let score1 = 0
let score2 = 0

Displaying Variables

In Kid.js, we can write variables to the screen using the display() function. This is similiar to the write() function, except that if the value of the variable changes, the display will be updated automatically.

let score1 = 0 let score2 = 0 display(100, 50, score1) display(width - 100, 50, score2)

Check Ball Position

A point is awarded to Player 1 if Player 2 misses the ball and it moves off screen to the right. In order words, when the x position of the ball is greater than the width of the screen.

if (ball.x > width) {
  score1 = score1 + 1
}

Player 2 scores if the ball moves off screen to the right, or if the x position is less than 0.

if (ball.x < 0) {
  score2 = score2 + 1
}

However it doesn't work, why not? The if statement runs at the start of the game and never again. At this point the ball is always in the center. We need to re-check the ball's position whenever it moves.

The "move" Event

The move event occurs as an object is moving. We'll use the on() to attach an event handler to the "move" event, similar to how we did for the "click" and "keydown" events. However, we'll use the on() function belonging to the ball.

function checkBallPosition() {
  if (ball.x > width) {
    score1 = score1 + 1
  }
  if (ball.x < 0) {
    score2 = score2 + 1
  }
}

ball.on('move', checkBallPosition)

Functions belonging to an object are often referred to as methods.

Brainstorm Power Moves 10 minutes

Spend some time brainstorming ideas for power moves, such as doubling the speed of the ball, or increasing the length of a player's paddle.

Teachers, choose one or two of the ideas that are feasible to implement and prepare sample code ahead of the next session.