The Canvas Tutorial for Pong

Last time I was talking about how I was working on a tutorial to make a game, and how I was experiencing hiccups, but more importantly picking up some more tips. Well I continued with the tutorial and experienced some more difficulties. There was a problem where the html file I made wasn’t showing the code. It was opening just fine, I could see my black box in the browser. This was leading me to think this is one of the things that lead to the rise of the code editor.

So I did what I thought I should do, make a new directory in my VScode. I believed it was a problem that could be solved, but I could just use VScode now and look it up later. Now when I was getting started in the text editor I was remembering how I made that logo a while back. I figured it might be interesting to make the pong game the way I did the logo.

I was able to make an svg of the pong game board, but how was I going to write the logic for the game? From my little experience with svg’s I couldn’t think of any. I know there are paths you can make, but how would I handle the conditionals? It didn’t seem like there was a place for it in a svg file. But luckily, if you have thought of something, thousands of others have too(probably). I found out about SVG.js, but for what I wanted to do it was preferable to use Canvas.

After some setup I was able to make the same picture using canvas. The code was a bit different but more or less the same. The SVG for shapes were written similarly to how you would write a component in React with with props to pass down. As for the Canvas approach, I used a function to make every shape, then there was the use of hooks. Without the useEffect it wouldn’t even show up.

svg version used to make picture at top.
Using Canvas

While using canvas, I can already see that i’m using functions to draw the shapes, so I know that plugging in a function for movement couldn’t be too far fetched.

So now I am ready to go back to following the tutorial. My little detour enlightened me to the world of svg.js, taught me a little more about Canvas. So next time I will speak about how I think a pong game made using svg.js feels vs using canvas.