Benzene Pong


Joe Polak, iChemLabs


This game was created as a plugin to the ChemDoodle Web Components library. The main piece of code is a new <canvas> called PongCanvas, which is a child of the _AnimatorCanvas class in the ChemDoodle Web Components library. The background image is set using the _Canvas.setBackgroundImage() function. A compatible MOL file of the benzene ring was generated using ChemDoodle Desktop and loaded into the Canvas using the _Canvas.loadMolecule() fuction. The ring’s color and line thickness were changed by altering the appropriate visual specifications. The rotation effect was achieved using a method similar to the RotatorCanvas. Everything else you see in the game –the paddles, the score and the game over messages– was drawn by overriding the _Canvas.drawChildExtras() function. Input handling was done by defining the and _Canvas.mousemove() functions, and mobile support was written in by mapping _Canvas.touchmove() to _Canvas.mousemove(). If you’re using this demo on a desktop browser, you’ll notice some neat sound effects. These were made possible using the HTML5 <audio> tag.

This demo was written as a plugin, meaning that it isn’t an integral part of the ChemDoodle Web Components library and it resides in its own source file. When URI linked, the plugin adds the appropriate classes and functions to the ChemDoodle Web Components library to be used. If you look at the source for this page, you will notice that the game was initialized by calling new ChemDoodle.PongCanvas(). This is because the plugin correctly extended the ChemDoodle Web Components library to add it there. You can also see the source for this game using the browser’s Javascript features. The plugin is governed by the same license that the ChemDoodle Web Components is governed by.


Benzene Pong Game