Drew's Projects

In this coding challenge I made an air hockey game with Javascript. I set out to make a game that simulated the real physics of air hockey with paddle-puck collision with force-based momentum transfer.

My goal was for the game to approximate the feeling of playing real air hockey. I wanted the game to have physics and feedback that felt satisfying. I also wanted to explore making a computer player that was fun to play against.

You can interact with the project full screen on Codepen: https://codepen.io/fleemaja/full/OPyqWBL. Use your cursor's position to control the blue paddle. You can also see the project within this blog post here:

I made my version of the game with the help of a JavaScript library called p5.js. This library provides tools to create interactive graphical programs for the web. It simplifies the interface of programming with Canvas, an HTML element used to draw graphics via JavaScript.

I have quite a bit of experience messing around with p5.js thanks to years of following a great Youtube channel called The Coding Train. This channel features hundreds of videos exploring creative coding, the intersection between coding, math, algorithms, art and design. This channel has dozens of videos exploring how to simulate physics and on how to make 2D games, so it has provided me with a good background to take on this air hockey challenge.

Before starting my game, I was curious how the AI LLMs like ChatGPT would do if I prompted them to make me an air hockey game with Javascript. They ended up giving me extremely simple and wonky games with physics that were bizarre and computer players that behaved oddly. The games were totally unplayable.

Not being able to make a relatively simple 2D game with clearly defined elements and rules, I don’t feel like AI will be taking all of our jobs anytime soon. It is incredible that they can spit out something even resembling whatever you prompt and giving you an organized guide to what they’ve made though. And they can be a great help as an assistant when you need a specific problem solved or some boilerplate code.

To being building my game I decided I would focus on starting simple: with drawing a rectangular play area, a paddle that the user would control with their mouse position, and a puck that the user could knock around the arena. This was the most essential part of the game for me, getting the physics of the puck to feel right. So, I spent a long time just honing how the puck and paddle collided and moved in a little sandbox arena.