https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.67qnsecr5

Don’t assign different value types to the same variable

Let’s see what dynamic type in the simplest form in Python:

variable_a = True
if variable_a:
    variable_a = 'Result'

While this is perfectly legitimate, but it’s perfectly unacceptable, the rule of thumb is, you never assign a different type of value to a already defined variable.

variable_a = True
if variable_a:
    result = 'Result'

This way, when someone reads your code, one can safely assume result is always a ‘String’ type, seriously this will help a lot.

Don’t return different types of value in a function

Consider the following example, one would need to understand your condition in order to determine the type of result, also makes it difficult to consume this function.

def work():
    result = None
    variable_a = True
    if variable_a:
        result = 'Result'
    else
        result = 123

Define your class members at the top of the class

While this is perfectly legitimate:

class A(object):
    def work(self):
        self.member = 'abc'

But it’s difficult to work out what class members at a glance, please define them.

class A(object):
    def __init__(self):
        self.member = None

    def work(self):
        self.member = 'abc'

Now you know this class has a class member without reading the work function.

"use strict";

require.config({
    baseUrl: 'static',
    paths: {
        jquery: 'bower_components/jquery/dist/jquery',
        foundation: 'bower_components/foundation/js/foundation',
    },
    shim:
    {
        'foundation': {
            deps: ['jquery']
        },
    }
});

require(['foundation'], function(f){
    $(function(){
        alert(1);
    });
});

Tonight I have added a health bar, score and sounds! Also some minor adjustments on the sprites and animations.

Check it out at https://bitbucket.org/jameslin/crafty-1945-reloaded

There are ways to do it, one is to use JWPlayer and OVA plugin, or the other way is to write your own javascript to control the playback.

In the following demo, shows how you can put ad video in the first source tag, and put actual video in second source tag.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <video id="myvideo" controls>
            <source src="small.mp4" type="video/mp4"/>
            <source src="chrome_japan.mp4" type="video/mp4"/>
    </video>
    <script type="text/javascript">
            "use strict";
            var video = $('#myvideo')[0];
            $(video).bind("ended", function(e){
                var source = $('source',this);
                $(source[0]).attr('src', $(source[1]).attr('src'));
                video.load();
                video.play();
                $(video).unbind("ended");
            });
            video.play();
    </script>

I have had an attempt to write a 1945 style vertical scroll shooting game in python using pygames, and I cannot remember why I stopped and the source code went missing (sounds like a developer nightmare, believe me I had it version contorlled somewhere, oh yes, it was on an overseas VPS that gone bye bye).

Anyway. So I discovered “Crafty”, a javascript game engine. Tried the tutorial and it seemed very interesting (I mean I like it’s style), so I might give a go on this. And this time the repository is on bitbucket https://bitbucket.org/jameslin/crafty-1945-reloaded, so there is no way I can lose it again.

You can always check out the latest development over http://1945.lin.net.nz just mouse over the plane to control it’s movements.

[… some code development …]

So here we are, managed to get the plane following the mouse and shooting 2 types of bullets at the same time in a browser. Hmmm, in a browser, that means in theory I can run the game in Chrome on my iPhone too! And… it actually worked! Well, performance is not that great though.

The other goal I mentioned at the beginning of this blog is to write an iOS app, I tried learning Objective-C for 10 minutes and just literally fainted on the syntax and gave up, so how am I suppose to write an iOS app without knowing any Objective-C? Luckily Keran McKenzie (my ex-colleague Yellow NZ, now an evangelist in MYOB) mentioned services that will package “web pages” into in iOS app, and that was my plan, for the javascript game I am writing. Sort of one stone two birds.

[… some phonegap app building …]

Success! it compiled an iOS and installed on my phone, actually it runs way smoother than on ordinary phone browser. So from now, I will spend some time every now and then continuing writing this game till it’s done!

(function($){
   var _init = $.ui.dialog.prototype._init;
   $.ui.dialog.prototype._init = function(){
        var self = this;
        _init.apply(this,arguments);
        $('.ui-widget-overlay').live('click', function(){
            if (self.options['overlay_close']){
                self.destroy();
            }
        });
    }
})($);

//"gmap" is an instance of the google map

//creating the class to exntend the google map OverlayView class
function MapLocationIcon(id,lat,lng,title,icon_class){
    this.lat = lat;
    this.lng = lng;
    this.title = title; //eg. A,B,C.D
    this.icon_class= icon_class; //the position of the spritesheet for the icon background
    this.pos = new google.maps.LatLng(lat,lng);
}

//make a copy of the OverlayView to extend it
MapLocationIcon.prototype = new google.maps.OverlayView();
MapLocationIcon.prototype.onRemove= function(){}

//prepare the overlay with DOM
MapLocationIcon.prototype.onAdd= function(){
    div = document.createElement('DIV');
    $(div).addClass('map_icon').addClass(this.icon_class);
    $(div).text(this.title);
    $(div).click(function(){
    });
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
}

//set position
MapLocationIcon.prototype.draw = function(){
    var overlayProjection = this.getProjection();
    var position = overlayProjection.fromLatLngToDivPixel(this.pos);
    var panes = this.getPanes();
    panes.overlayImage.style.left = position.x + 'px';
    panes.overlayImage.style.top = position.y - 30 + 'px';
}

//to use it
var icon = new MapLocationIcon('id', -34.123,78.999, 'A', 'gold');
icon.setMap(gmap);