Commit7 // Breakout Project! [The Pong Game]

I'm taking a bit of a break from my Skillcrush course. I just wrapped all of my JS lessons and will be working on coding up some projects through them. BUT I found this really cool pong game that works through HTML, CSS, and JavaScript, going step-by-step. I feel like it's something I really need. I also just want to do something fun as well.

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

You can find the tutorial I am using here:
Beginning JavaScript Game Dev Project

HTML

The coolest thing with programming the HTML while following along with this video is that the programmer uses the same software I have, Visual Studio Code. I was able to see how he uses a lot of shortcuts in terms of typing code quickly.

Outside of that the only real new thing I saw was how he divided up the class and the id. He describes it as some of the divs will have a class to be called on by the CSS, while the id will be used for the JavaScript.

For example:

    <div class="ball" id="ball"></div>

    <div class="paddle left" id="player-paddle"></div>
    <div class="paddle right" id="computer-paddle"></div>

CSS

Lots of cool new things to learn here!

It really boils down to color and sizing. He has a whole additional video on it, which I do want to get to after this project. For now here are the basic concepts that I'm seeing.

SIZE/POSITIONING
From my understanding it's all about relativity. So that the size and positioning will adjust depending on how large your screen is.

Here's a snippet:

.ball {
    --x: 50;
    --y: 50;

    position: absolute;
    background-color: var(--foreground-color);
    left: calc(var(--x) * 1vw);
    top: calc(var(--y) * 1vh);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 2.5vh;
    height: 2.5vh;
}

.score {
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 7vh;
    color: var(--foreground-color);
}

Both the positioning and the font size are taking cues off of this number viewport height/width mode of writing code.

COLOR
The color as well makes it so that the color isn't set in stone and can be more of a variable. It sounds like we will be using JavaScript to further adjust the color next.

Here is a snippet:

:root {
    --hue: 200;
    --saturation: 50%;
    --foreground-color: hsl(var(--hue), var(--saturation), 75%);
    --background-color: hsl(var(--hue), var(--saturation), 20%);
/* cannot figure out why the colors stopped working after setting this up */
}

body {
    margin: 0;
    background-color: var(--background-color);

}

So now the root is setting the color hue and saturation in both the background and the foreground. The foreground is being used by the paddles, the ball and the score. Then the background is of course... the background. Which from my understanding will be the color that varies with help of the JS code.

JavaScript

This was a lot harder to comprehend and determine what I was doing while coding along. The instructor is VERY fast and I had to pause every couple seconds to type up the code. If anything it was a good experience to build and see the progress as I was creating it.

I realized at the end that my score divs were set as a class instead of an id, so I couldn't get the score to work until I sorted that out.

Overall I would say this took me 7-8 hours, so definitely doable over a two day period. Gives me the courage to do more tutorials like this and jump back into my Skillcrush course projects.

GitHub Repo for Pong Game

Play the game here!

Do you have a code-along project that you really loved and learned a lot from? Share in the comments below!

Have a great weekend and I'll catch you all next week.