Seed for a basic incremental game that includes Angular and Bootstrap. There are also seeds for Angular without Bootstrap and jQuery only.
Last active
November 22, 2015 20:55
-
-
Save MrHen/393f58cbd371982be600 to your computer and use it in GitHub Desktop.
Incremental seed (angular + bootstrap)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> | |
| <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script> | |
| <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> | |
| <script type="text/javascript" src="index.js"></script> | |
| <style = type="text/css"> | |
| body { | |
| background: darkgrey; | |
| } | |
| .app-container { | |
| margin: 2em; | |
| } | |
| .incremental-container { | |
| max-width: 600px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container" ng-app> | |
| <div class="incremental-container center-block" ng-controller="IncrementalCtrl"> | |
| <div class="panel panel-default"> | |
| <h2 id="widget-count" class="panel-heading panel-title text-center"> | |
| Widgets: {{numWidgets | number: 0}} | |
| </h2> | |
| <div class="panel-body"> | |
| <button class="btn btn-primary btn-block" id="produce-widget" ng-click="produceWidget()">Produce Widget</button> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <h2 class="panel-heading panel-title text-center"> | |
| Store | |
| </h2> | |
| <div class="list-group"> | |
| <button class="list-group-item btn" ng-repeat="widgeteer in widgeteers" ng-click="hireWidgeteer(widgeteer)" ng-disabled="widgeteer.cost > numWidgets">{{widgeteer.label}} - {{widgeteer.cost}}</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function IncrementalCtrl($scope, $interval) { | |
| $scope.numWidgets = 0; | |
| $scope.costScaling = 1.1; | |
| $scope.widgeteers = [ | |
| { | |
| "name": "novice-widgeteer", | |
| "label": "Hire Novice Widgeteer", | |
| "cost": 10, | |
| "value": 1, | |
| "owned": 0, | |
| }, | |
| { | |
| "name": "master-widgeteer", | |
| "label": "Hire Master Widgeteer", | |
| "cost": 25, | |
| "value": 5, | |
| "owned": 0, | |
| }, | |
| { | |
| "name": "wisened-widgeteer", | |
| "label": "Hire Wisened Widgeteer", | |
| "cost": 100, | |
| "value": 10, | |
| "owned": 0, | |
| }, | |
| ]; | |
| // Increase numWidgets every time produce-widget is clicked | |
| $scope.produceWidget = function() { | |
| $scope.numWidgets++; | |
| } | |
| // Same for novice-widgeteer | |
| $scope.hireWidgeteer = function(widgeteer) { | |
| widgeteer.owned++; | |
| $scope.numWidgets -= widgeteer.cost; | |
| widgeteer.cost = Math.ceil(widgeteer.cost * 1.1); | |
| } | |
| // Run UI update code every 10ms | |
| $interval(function() { | |
| for (var i = 0; i < $scope.widgeteers.length; i++) { | |
| $scope.numWidgets += ($scope.widgeteers[i].owned * $scope.widgeteers[i].value / 100); | |
| } | |
| }, 10); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment