I made FullScreenMario.com, now celebrating 2 million

1019

Hey Reddit, my name's Josh Goldberg; I'm the programmer behind FullScreenMario.com - an HTML5 remake of Nintendo's Super Mario Bros. You can play it for yourself on http://www.fullscreenmario.com, or grab the source code on http://www.github.com/DiogenesTheCynic/FullScreenMario (please post all bug reports there as well, after checking if they're already posted). Go ahead and AMA!

Proof: http://reddit.fullscreenmario.com, https://twitter.com/FullScreenMario, https://www.facebook.com/FullScreenMario

4:45 update: All right everyone, thanks for the great questions! Keanu Reaves is doing an AMA so we're done here.

Comments: 271 • Responses: 70 • Date: 2013-10-20 15:52:03 UTCsource

radium-v243 karma2013-10-20 17:03:52 UTC

I'm going to be brutally honest here, and I'm probably going to get down-voted, but I'm not impressed with the underlying code for the project. I don't even know where to begin.

You're obviously passionate about Javascript, but runtime engines and best practices have changed dramatically in the last few years. Some things that stick out could easily be chocked up to coding style or preference, but when those preferences aren't well-adjusted to current-day standards, it leads to a perpetuation of those bad practices and hinders the growth and evolution of web development overall.

I'm posting this here, instead of on Github, because these aren't quite bug reports. I'd be more than happy to contribute though.

Syntax and readability are more important than shortcuts.

Cutting corners in the interest of character count is useless. It's better to be able to read the code than to have to interpret it line-by-line.

For hinting, I recommend JSHint. It'll be nicer than JSLint, but it'll still likely hurt your feelings.

Here are some JSHint errors/warnings that popped up:

The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.

Expected an identifier and instead saw 'arguments' (a reserved word).

Expected a 'break' statement before 'case'.

A lot of syntax errors can be solved by linting or hinting, and following a style guide. Here's Google's Javascript Style Guide. You'll find that most projects on Github follow the same code conventions, and for very good reason. When you make your code consistent and readable, other developers will be more likely to like you and contribute to your projects.
Read Douglas Crockford's Javascript: The Good Parts and Nicholas Zakas' Maintainable Javascript.
Use an AMD-style, modular system like Require.js or Yahoo Module Pattern because Global variables are evil. The basic idea behind a modular system is that every piece of functionality is broken down to its basic form, and no less. It helps to keep things organized. Even if you choose not to use a framework, following a trusted organizational pattern is a good idea. Consistency is key.
Check out Backbone.js or Underscore for data manipulation.

I really like the project, but the code is unwieldy and confusing.

I made FullScreenMario.com, now celebrating 2 million visits. AMA!