Pong Trek 🏓

This is a re-creation of the classic Pong game using JavaScript and SVGs to render the board, paddles, ball, and scores.

---

---

Installation

Install dependencies.

npm i

Run locally with Webpack Dev Server.

npm start

Build for production.

npm run build

Keys

Player 1:

• a: up
• z: down

Player 2:

• ▲: up
• ▼: down

---

Technologies Used

• HTML
• CSS
• JavaScript
• Webpack
• SVG

---

Personal Learnings

Web Develop (Project 3)

This is a project produced from the following lessons from Week 5:

1. Advanced JavaScript
2. Intro to ES.next
3. Developing with ES.next and Webpack
4. Object Oriented Programming in JS
   • OOP with ES.next
   • Building a Pong Game

Below are the subsequent learning outcomes.

Comparison Operators

• == (loose)
• === (strict, checks for typeOf)

Switch Statement

switch(expression) {
  case x:
    code block
    break;
  case y:
    code block
    break;
  default:
    code block
}

Arrow Function

• Shorter syntax for function expressions and they are not hoisted.

const x = (x, y) => {
  return x * y;
};

---

Author

Jen Lam, Full-Stack Developer student at RED Academy.

Let's connect on LinkedIn.