Javascript Sample code - Used in an Tic Tac Toe HTML5 game embedded inside an iPad app

Almost everything that's cool about the web and mobile web nowadays involves programming interactivity using Javascript. This code demonstrates how to render vertices and simple shapes in a simple Tic Tac Toe game using Javascript and HTML Canvas, and how to pull saved Javascript data into Xamarin Studio using C#.

Screen 1 - Player Scores

On Screen 1, the numbers 1 and 2 represent the respective scores for Player1 (X) and Player 2 (O).

Screen 2 - Colored Tic Tac Toe grid

On Screen 2, the numbers 3, 4, 5, and 6 demonstrate in Javascript how to render the line segments that ultimately represent the nine squares of a Tic Tac Toe grid.

Screen 3 - The runtime Game loop

The third image is the visual representation of the game loop, where you can see the colored grid Javascript from Screen 2, as well as the placement of both players' respective X or O.

Screen 4 - Intercepted Game Over event

Using the JSBridge API, the highlighted code on Screen 4 is a custom Javacscript 'Game Over' event that I set up an Event Listener for in the Xamarin C# webview the HTML5 game is embedded in. Once this Javascript event fires in the webview, my C# method parses the Javascript score data into corresponding C# strings that end up being displayed in the Game Over Score popup screen (Screen 5).

Screen 5 - Xcode Game Over popup screen

The fifth image represents an animated game over popup screen created in Xcode, complete with the Javascript scores that have been transferred over as C# strings. This was for an iPad app I developed called Clevermind, which features embedded HTML5 games.