Problems Coding Games with HTML5, CSS and JavaScript
Applications coded for the Adobe Flash player are ubiquitous on the Internet. Many web sites exist only as flash implementations. Flash provides a rich environment that can render interactive graphics and sound. The problem with Flash is that it is controlled by a private company that cannot react to the demands of the great diversity of devices that access the Internet today. In April of 2010, Steve Jobs wrote an open letter explaining why Apple was not supporting Flash in its line of products. Among the reasons was that Flash does not perform well on mobile devices and that it is the number one reason why Mac computers crash. He also suggested that Adobe should focus more on creating great HTML5 tools which are completely open and controlled by a standards committee.In my opinion, HTML5 still has a long way to go to equal the functionality of Flash. One of the problems that I have consistently encountered in writing web pages is cross-browser compatibility. What works on one browser may not work in another. The most persistent problem is providing sound to an application. HTML5 defines the <audio> element as a standard way to embed an audio file on a web page, but of the five major browsers, only Google Chrome can play all three of the supported file formats (MP3, Wav, and Ogg). The only way to provide audio on all browsers is to use something like the AudioBox applet, but this does not work for the 5 percent of users who turn off JavaScript to avoid advertisements.
I implemented a Sudoku game with HTML5, CSS and JavaScript to test the level of support provided by various browsers. I found several surprises. When adapting the JavaScript code obtained from dhtmlgoodies.com, the command to provide a hint placed a graphic box in the wrong place. The reason was that the getLeftPos() and getTopPos() functions in JavaScript provided a value that was offset by the left and top margins specified in the <div> element with absolute position that contained the game. The JavaScript expressions had to be modified to subtract these values. I cleaned up the code by processing the JavaScript with javascriptlint.com and added curly brackets that were missing and removed multiple declarations of variables.
While testing locally on my Windows 7 system, I left the browser while I switched to work on another application; when I returned to the Sudoku game, the browser was frozen. This happened for FireFox and Internet Explorer, but not for Safari. This was not caused by buggy JavaScript code, but was the result of a missing Java applet for which Safari issued the proper diagnostic. Once the problem was fixed, all the browsers worked properly.
Another concern is the way that browsers handle asynchronous events, such as keyboard input and mouse clicks. It is possible that these unseen processes implement rules that are different from what a user intends. A case in point is the ambiguity of the arrow keys. The Sudoku game can use the arrow keys for navigation around the 9x9 matrix. If only the game matrix is displayed and the browser does not need to use scroll bars to display the web page, everything works fine. The user can navigate the matrix using the arrows without any problem. However, if the game matrix is in a page with additional text that requires the browser to show a vertical scroll bar, then there is an ambiguous situation. The game application uses the down arrow to move the cursor within the matrix, but simultaneously, the web browser interprets the down arrow as a command to scroll the web page down one line. The result is that the whole Sudoku matrix moves when it should stay fixed. Programmers need to use the preventDefault() function for keystrokes to avoid the unwanted browser action, but then the page can only be scrolled with the mouse. Developing games with HTML and JavaScript requires being aware that special coding may be required depending on how the browser renders the web page.
Try the JavaScript Sudoku Game
© Copyright - Antonio Zamora
