In the history of computer games some games have created and carried whole companies on their shoulders. One of those games is certainly Mario Bros. The Mario character first appeared in the game Donkey Kong and become very famous within its own game series starting with the original Mario Bros. in 1983. Nowadays a lot of spin-offs and 3D jump and runs are being produced centering the Mario character. In the article on CodeProject I am developing a very simple Super Mario clone, which is easily extendible with new items, enemies, heros and of course levels.
The code of the game itself is written in object oriented JavaScript. Now that sounds like a trap since JavaScript is a prototype based scripting language, however, there are multiple object oriented like patterns possible. The article will investigate some OO JavaScript code which will show some object oriented constraints. This is very useful to stay in the same pattern through the whole coding.
The original version of Mario 5 was developed by two students who took my lecture on "Programming Web applications with HTML5, CSS3 and JavaScript". I gave them a basic code for the engine and they did develop a game including a level editor, sounds and graphics. The game itself did not contain a lot of bugs, however, the performance was rather poor and due to rare usage of the prototype properties the extensibility was also limited. The main performance burner was the usage of the jQuery plug-in Spritely (which can be found here). In this case I am the one to blame, since I recommended using it for simplicity. The issue here is that Spritely itself does a good job on doing one animation, but not a hundred or more. Every new animation (even though spanned at the same moment) will get its own timed interval recall loop.
The full article including source code and more can be found on the CodeProject.