Games, HTML5, Local Storage, Android and iOS

I'm developing what it will be my first game. It's a puzzle type game and at this moment I'm writing more levels and I hope to release it soon.

For develop the game (remember it is my first game) I decided to use HTML5 with the idea to port it to Android ans iOS easily since I only have to load the HTML into a webview and it is ready to play. Could have opted to use Cordova and so make it multi platform more easily but finally I have thought that is a little project and could implement manually the game in the two platforms and so see how it's done and see the differences between platforms.

The first consideration, is that two platforms uses WebKit so as visualize web pages, this which would lead us to think that in the two platforms will be done in the same way but exist differences.

In Android it could be something like

   public class MainActivity extends Activity {

      @Override
      protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);

         WebView webView = (WebView) findViewById(R.id.webView);


         webView.setWebChromeClient(new WebChromeClient());
         webView.setWebViewClient(new WebViewClient());   
         webView.getSettings().setJavaScriptEnabled(true);


         webView.loadUrl("file:///android_asset/index.html");

      }
   }

First we declare a WebView an use WebChromeClient and WebViewClient to improve the characteristics of the webview, next enable the Javascript as it is disabled by default and finally we load the page.
If as on this case the page to load is local, this must be in the directory main/assets from the project.

In iOS with Swift

   import UIKit
   import WebKit

   class ViewController: UIViewController {
      @IBOutlet weak var webView: WebView!

      override func viewDidLoad() {
         super.viewDidLoad()

         let path = NSBundle.mainBundle()
                      .pathForResource("index", ofType: "html", 
                                                inDirectory: "html")

         let requestURL = NSURL(string:path!)
         let request = NSURLRequest(URL:requestURL!)

         webView.loadRequest(request)
      }
   }

As you see it's easy too, and in this case Javascript is enabled by default. At inDirectory we have to put the name of the directory that contains the HTML in the project, in this case "html".

Well, the game is loaded and ready to play, but now, how do to save the level when the player decides to exit the game? In this case, we just want to save the level and this it's only a number and I devide to use the HTML5 Local Storage for two reasons. First it's easy from Javascript and don't require special permissions on the app. A third reason could be that is not much data to save.

To save and load the game level in the game.js file I use

   saveGame: function (level) {
      try {
         window.localStorage.level = level;
      } catch (e){
         console.log(e);
      }
   }


   loadSavedGame: function() {
      return window.localStorage.level;
   }

And now it's necessary to add a bit of code in Android and make a little change in iOS.

In Android is necessary to enable the storage in the webview. Finally the code would be like this

   public class MainActivity extends Activity {

      @Override
      protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);

         WebView webView = (WebView) findViewById(R.id.webView);


         webView.setWebChromeClient(new WebChromeClient());
         webView.setWebViewClient(new WebViewClient());   
         webView.getSettings().setJavaScriptEnabled(true);

         webView.getSettings().setDomStorageEnabled(true);
         webView.getSettings().setDatabaseEnabled(true);

         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            webView.getSettings().setDatabasePath("/data/data/" +
            webView.getContext().getPackageName() + "/databases/");
         }

         webView.loadUrl("file:///android_asset/index.html");

      }
   }

And in iOS we have to change the WebView to WKWebView. And the code would be like this

   import UIKit
   import WKWebKit

   class ViewController: UIViewController {
      @IBOutlet weak var webView: WKWebView!

      override func viewDidLoad() {
         super.viewDidLoad()

         let path = NSBundle.mainBundle()
                      .pathForResource("index", ofType: "html", 
                                                inDirectory: "html")

         let requestURL = NSURL(string:path!)
         let request = NSURLRequest(URL:requestURL!)

         webView.loadRequest(request)
      }
   }

WKWebView implements the necessary to work with Local Storage.