CyberPong
By
@Sangam
- 1 Devlogs
- 6 Total hours
CyberPong!! A Web Based PingPong Game with neon Cyber look theme!!
Ship #1
Pending review
Just recently, I made “Cyber-Pong” - A bright, colorful and electric-y take on the classic Pong, set against a vibrant, cyber-punk background! This project is entirely vanilla HTML5 Canvas and Javascript; Designed from the ground-up and built from scratch (without any engines such as unreal or the unity engine), in order for me to gain a deeper understanding of 2d game rendering and loops. This project is entirely vanilla HTML5 Canvas and Javascript; Designed from the ground-up and built from scratch (without any engines such as unreal or the unity engine), in order for me to gain a deeper understanding of 2d game rendering and loops.
I am really excited to show how good the AI logic turned out to be: The opponent dynamically keeps track of your Y-coordinates and so you need quite a bit of effort in order to beat your adversary; not to mention the fact that, when the ball hits an end, the collision’s angle can dynamically change based on whether the impact occured from above or below of your paddle. Click this ‘Try Project’ link to give it a shot from the very comforts of your browser (W and S or the UP and DOWN Arrow Keys move your pink paddle around; the ball’s speed steadily increases each time a paddle hits the ball and 7 points against the AI might seem a daunting feat!)
Today I had a small break away from Unreal Engine and went to do some vanilla Web Development. I was curious to find out how raw 2d physics and rendering loops worked internally when there’s not a game engine masking that for you. I decided to code a 2d pong clone called ‘Cyber-Pong’ a highly stylistic and neon heavy version of the classic Pong game made in pure HTML canvas and Javascript. It involved a fair amount of debugging (who knew about AAB - Axis Aligned Bounding box collisions??) but it was worth it for when the game loop finally worked!
