tiny艦隊clicker

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="item.js"></script>
    <script src="ship.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl" unselectable="on">
    <h1>Tiny 艦隊 Clicker</h1>
    <div status="" class="status">
        <div class="total" ng-bind-template="{{ship.own|number:0}}艦"></div>
        <div class="" ng-bind-template="{{ship.fps}}艦/秒"></div>
    </div>
    <div ship="ship"></div>
    <div class="items">
        <div ng-repeat="i in items" item="i" money="ship.own"></div>
    </div>
  </body>

</html>

angular.module('app',['Item','Ship']).controller('MainCtrl',function($scope,Item,Ship)
{
    $scope.items = _.map(Item.load(),function(r)
    {
        return new Item(r); 
    });
    
    $scope.ship = new Ship();
    
    $scope.$on('clickItem',function(evt,item)
    {
        $scope.ship.own -= item.price;
        item.add();
        $scope.ship.fps += item.point;
    });
});

*{
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
}

body
{
    font-family:  'Russo One','Meiryo','sans-serif';
}
.items
{
    position:absolute;
    left:0;
    bottom:0;
    height:140px;
}
.ship
{
    width:128px;
    height:128px;
    position:absolute;
    left:50%;
    margin-left:-64px;
    top:40%;
    margin-top:-64px;
    background-image:url(http://file.denkizakana.com/tkantai/ship.png);
    cursor:pointer;
}


/*item*/

.item
{
    position:relative;
    display:inline-block;
    font-size:12pt;
    width:100px;
    height:130px;
    margin:1px;
    border:solid #CCC 1px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    text-align:center;
    color:#888;
}

.item.active
{
    cursor:pointer;
}

.name
{
    color:#FFF;
    background-color:#DDD;
    font-size:10pt;
}

.active .name
{
    background-color:#AAA;
}


.own
{
    position:absolute;
    bottom:0;
    text-align:center;
    width:100%;
}

.panel
{
    position:absolute;
    width:64px;
    height:64px;
    left:50%;
    top:50%;
    margin-left:-32px;
    margin-top:-32px;
}
.item1
{
    background-image:url(http://file.denkizakana.com/tkantai/item1.png);
}
.item2
{
    background-image:url(http://file.denkizakana.com/tkantai/item2.png);
}
.item3
{
    background-image:url(http://file.denkizakana.com/tkantai/item3.png);
}
.item4
{
    background-image:url(http://file.denkizakana.com/tkantai/item4.png);
}
.item5
{
    background-image:url(http://file.denkizakana.com/tkantai/item5.png);
}

angular.module('Item',[]).factory('Item',function($http,$q)
{
    var Item = function()
    {
        this.initialize.apply(this,arguments);
    };
    Item.prototype = {
        initialize:function(data)
        {
            angular.extend(this,data);
            this.own = 0;
        }
        ,add:function()
        {
            this.own += 1;
            this.price = Math.round(this.price * 1.1);
        }
    };
    Item.load = function()
    {
        return [
            {id:1,name:"檄",price:10,point:1}
            ,{id:2,name:"挺身隊",price:100,point:15}
            ,{id:3,name:"溶接機",price:500,point:100}
            ,{id:4,name:"転炉",price:2000,point:500}
            ,{id:5,name:"油田",price:30000,point:10000}
        ];
    }
    
    return Item;
    
}).directive('item',function()
{
    return {
        restrict:"A"
        ,replace:true
        ,scope:{
            item:"="
            ,money:"="
        }
        ,link:function(scope,element,attrs)
        {
            scope.click = function(item)
            {
                if(scope.money >= scope.item.price)
                {
                    scope.$emit('clickItem',item);
                }
            }
        }
        ,templateUrl:"item.html"
    }
});

<div ng-class="{item:true,active:money >= item.price}" ng-click="click(item)">
    <div class="panel item{{item.id}}"></div>
    <div class="name">{{item.name}}</div>
    <div class="price">{{item.price|number}}</div>
    <div class="own">{{item.own|number}}</div>
</div>

angular.module('Ship',[]).factory('Ship',function($timeout)
{
    var Ship = function()
    {
        this.initialize.apply(this,arguments);
    };
    Ship.prototype = 
    {
        initialize:function(data)
        {
            _.bindAll(this);
            this.fps = 0;
            this.fpc = 1;
            this.own = 0;
            angular.extend(this,data);
            $timeout(this.update,0);
        }
        ,click:function()
        {
            this.own += this.fpc;
        }
        ,update:function()
        {
            this.own += this.fps / 10;
            $timeout(this.update,100);
        }
    };
    return Ship;
})
.directive('ship',function()
{
    return {
        restrict:'A'
        ,scope:{
            'ship':'='
        }
        ,replace:true
        ,link:function(scope,element,attr)
        {
            scope.click = function()
            {
                scope.ship.click();
            }
        }
        ,template:'<div class="ship" ng-click="click()"></div>'
    };
});