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.
