Porting a HTML5 game to mobile platform

When I read the article from Michal Budzynski that teaches me the first lesson "How to make a HTML5 game", and I try to let it also can be played fun on mobile devices. Here is the link I put on my Github: https://github.com/DaoshengMu/Simple-game-with-HTML5-Canvas/tree/master/mobile

Link: https://dl.dropboxusercontent.com/u/75721204/Html5/mobile/index.html

  1. Different screen size
    You must define different item-size for supporting different screen size. Therefore, you need to write the CSS file, CSS provides px, %, em to adjust the item size. "px" is absolute pixel of the screen. "%" means percentage of the font size. For example, your browser default font size is 12 point, 80% means you use 9.6 point. "em" is the m letter size, it has the same meaning as "%", if your em is 0.5 that means your item is 6 point. Put the mobile.css in your index.html, and define the media(resolution) you want to support.
    media="screen and (max-device-width: 768px) and (orientation: portrait),
      screen and (max-device-width: 1024px) and (orientation: landscape)"/> 
    Define the special size in mobile.css
    #mario-proto {
        position : relative;
        width : 1.625em;
        height : 2.375em;    
    .mario-size {
        font-size : 40px;
    /* use a bigger base size for tablets, in mobile.css */
    @media (min-device-width: 768px) {
        #game {
            font-size : 64px;
        #game-screen .game-board {
            margin : 0.75em;
        .mario-size {
            font-size : 80px;
        .platform-size {
            font-size : 80px;

  2. User input
    If we play the game on PC browser, we can use our mouse to be the controller, but on mobile device we need to adjust our method, accelerometer is the best choice.
    Mouse move event:
     window.onmousemove = function(e) {
                mouseX = e.pageX;
                mouseY = e.pageY;
                if (player.X > mouseX) {
                } else if (player.X < mouseX) {
    Accelerometer is not the official spec of W3C, so there is some complexity need to be solved:
    if (window.DeviceOrientationEvent) {   // W3C spec
            window.addEventListener("deviceorientation", function () {
             //   tilt([event.beta, event.gamma]);
            }, true);
        } else if (window.DeviceMotionEvent) { // Some devices support it
            window.addEventListener('devicemotion', function () {      
            }, true);
        } else {   // Mozilla spec
            window.addEventListener("MozOrientation", function () {      
            }, true);
  3. Cross-browsers
    I can sure every browsers could be supported totally, especially for accelerometer function. On iOS you can the install function to install on your desktop, and that will be an icon likes like an native app which download from app store. On Android, we can hide the address bar
     // hide the address bar on Android devices
            if (/Android/.test(navigator.userAgent)) {
                $("html")[0].style.height = "200%";
                setTimeout(function() {
                    window.scrollTo(0, 1);
                }, 0);
  4. WebStorage
    If you want to save some game data on your browser, you can choose WebStorage or cache, cache just can save 4KB per domain, WebStorage can support 2MB. Therefore, we prefer WebStorage to be our first technology-choice. In WebStorage, we use key/value approach to store our data.
     var db = window.localStorage; // WebStorage 
     db.setItem(key, value); // store data to WebStorage
  5. Debugging on mobile
    It is very easy to debug on mobile. First, you need to download Android SDK to your PC, and then enable USB debugging on your Android device. Second, open your Chrome browser on mobile, go to the setting and enable USB web debugging. Next, open the folder where you downloaded Android SDK, go to android-sdk\platform-tools, use command-line tool enter adb devices to confirm your driver has been installed successfully. Then, enter adb forward tcp:9222 localabstract:chrome_devtools_remote , open your PC Chrome and go to the address localhost:9222,you will see the pages are the same to your mobile device Chrome. Select which page you want to debug. Now, you can debug!!!


Post a Comment

Popular posts from this blog


After reading Steve Jobs Autobiography

Drawing textured cube with Vulkan on Android