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.
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.
