Pong with a Responsive Design

A few weeks ago I went to Sean McBeth’s Intro to Game Programming with JavaScript at Hive76. It was an informative class where Sean explained the code in a JavaScript version of the classic game, Pong. I forked Sean’s version on GitHub and created my own which you can play here. If you’re playing on a mobile device, it works way better in landscape mode so if it’s already loaded in landscape mode, turn to landscape and refresh the page. Hey, it’s a work in progress.

ping pong desktop web 300x192 Pong with a Responsive Design

Sean suggested that we mess around with the code and see what we could do. Sean’s original version (play it here, or read the code here) worked on my Android phone okay but I thought I could make it work better. I made the design more responsive by setting up the board, paddle and ball dimensions dynamically based on the browser’s window size. I thought a softer color scheme would be easier on the eyes so I deviated from the original Pong look and made the colors less intense and rounded off the corners of the boxes.

I wanted to be able to choose to play on the right or the left of the board. That worked out pretty well and I think it makes it much easier to play on a mobile device.

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>