Agent 008 Ball

HTML5 vs Flash – a turff war on the WWW

Recently, I stumbled upon some amazing HTML5 demos and apps. One example, Agent 008 Ball (image above), could easily pass for a Flash based game. After playing this game and reviewing a few other apps, I was motivated to write another blog post about the pros and cons of Flash vis-a-vis HTML5. Over a year ago, I published a blog post supporting Flash against HTML5. Back then it seemed to make sense because there were so many features in Flash that HTML5 could not match (a powerful OOP language, a mature IDE, multimedia integration etc.). Now with the countless developments in HTML5, it seems Flash is facing very serious competition. Thanks partly to people like Google’s Paul Irish and others at HTML5rocks.com.

Making Javascript more object oriented

Google’s Closure library allows you to extend Javascript Event Handling feature. You can define custom events and listeners.Thus improving Javascript’s built-in Observer (publisher/subscriber) pattern (e.g. onMouseover, onClick, onLoad etc.). Imagine what can be done with that… in Game Development you can trigger other functions when the player gets a certain score. Or if you have collision detection, fire some other actions whenever certain objects collide. You can also create an event for when the game ends.From an OOP perspective, it is much easier to decouple the Objects in your application. In other words you can separate the “cause from the effect”. An event created in one class can have a listener in a different class. Changing the event trigger (e.g. from a mouseover to an onclick event) requires a single event definition code edit which is then dispatched to all subscribers or listeners. Javascript’s native events would require code changes everywhere the event has been used. Therefore, with the Close library your code is much more flexible, adaptable and reusable.The example below is a call to goog.events.listen() and shows how a click event on contentElement triggers the openEditor() function.

eightball.PocketDropEvent = function(ballNumber, opt_target) {
  goog.events.Event.call(this, eightball.PocketDropEvent.TYPE, opt_target);

  /**
@type {number}
*/
  this.ballNumber = ballNumber;

};
 this._dispatchGameEvent(eightball.Game.EventType.END);
 goog.events.listen(this.contentElement, goog.events.EventType.CLICK,this.openEditor, false, this);

The Closure Library also implements true OOP inheritance mechanism. Allowing you to make your applications much more modular and reusable. Normally Javascript would require you to define a “Prototype chain” for each pair of Objects in a “Parent – Child” relationship. Using the Closure library makes this process less painless, more reliable and consistent across different browsers.

goog.ui.MenuButton = function(content, opt_menu, opt_renderer, opt_domHelper) {
  goog.ui.Button.call(this, content, opt_renderer ||
      goog.ui.MenuButtonRenderer.getInstance(), opt_domHelper);

  // Menu buttons support the OPENED state.
  this.setSupportedState(goog.ui.Component.State.OPENED, true);

  if (opt_menu) {
    this.setMenu(opt_menu);
  }
  this.timer_ = new goog.Timer(500);  // 0.5 sec
};
goog.inherits(goog.ui.MenuButton, goog.ui.Button);

Extended and Improved CSS3

With SASS, you can now define variables in your CSS code. Commonly used values like font colors or margins can be replaced with variables. Instead of changing multiple instances of these values, you simple change the variable once, thus reducing code errors and allowing you to create more consistent page layouts.

/* style.scss */

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

/* style.scss */

$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}

a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
}

HTML5 Resources

A list of useful HTML5, Javascript and CSS3 links
Flash to HTML5 using CreateJS

Google Closure library – time tested library, brings true OOP to Javascript

jQuery Boilerplate -Jump-start jQuery plugins development

SASS CSS3 extension -adds nested rules, variables, mixins, selector inheritance to CSS3

LESS – CSS extension -extends CSS with dynamic behavior such as variables, mixins, operations and functions (similar to SASS)

Compass – an open-source CSS Authoring Framework (uses SASS).

Jangaroo project – AS3 to Javascript compiler

Aptana Studio 3 – develop and test your entire web application using a single environment.

CodeKit – Mac toolkit for HTML5 developers

Agent 008 Ball – A cool pool game using HTML5 and Google Closure library

List of cool HTML5 games

Javascript and HTML5 fireworks animation

WebGL examples