<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.4.0/angular-animate.js"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myGame" ng-controller="MainCtrl">
<div id="canvas" class="container noselect" ng-cloak="" ng-click="reset()">
<h2>ECS Clicker</h2>
<div class="row">
<div class="col-xs-4">
<h2>
<ng-pluralize count="game.cookies" when="{'one': '{} cookie', 'other': '{{game.cookies | number:0}} cookies'}"></ng-pluralize>
</h2>
<h3>
per second: {{game.systems.buildings.cps | number:0}}
</h3>
</div>
<div class="col-xs-4">
<h2>
Store
</h2>
</div>
<div class="col-xs-4">
<h2>
Achievements
</h2>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="cookie" ng-click="game.systems.buildings.click(1)"></div>
</div>
<div class="col-xs-4">
<button class="upgrade" title="{{e.description}}"
ng-repeat="e in game.systems.buildings.$family"
ng-click="game.systems.buildings.buy(e)"
ng-disabled="e.upgrade > game.cookies">
<div class="col-xs-4 pull-right">
<h2>{{e.count}}</h2>
</div>
<div class="col-xs-8">
{{e.name}}
<br />Cost: {{e.upgrade}}
</div>
</button>
</div>
<div class="col-xs-4">
<div class="achievement bg-success" ng-repeat="e in game.systems.achievements.$family" title="{{e.description}}">
<button type="button" class="close" aria-label="Close"><span aria-hidden="true" ng-click="e.$remove('achievement')">×</span></button>
{{e.achievement}}
</div>
</div>
</div>
<p class="text-center">Game demo built using <a href="https://github.com/Hypercubed/angular-ecs">angular-ecs</a>, an ECS (entity-component-system) game framework for AngularJS</p>
</div>
<script src="https://rawgit.com/millermedeiros/js-signals/master/dist/signals.js"></script>
<script src="https://rawgit.com/Hypercubed/angular-ecs/0.0.21/dist/angular-ecs.min.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
// TODO:
// More achievements
// Bonuses
// Save state to local-storage
angular.module('myGame',['ngAnimate', 'hc.ngEcs'])
.run(function(ngEcs, $document) {
ngEcs.cookies = 0;
ngEcs.$s('buildings', { // a systems to handle buildings
interval: 1, // interval at which $update is called (seconds)
cps: 0, // a state value
click: function (num) { // called when user or building "clicks"
ngEcs.cookies += num;
},
buy: function(e) { // buys building, updates cost
if (ngEcs.cookies >= e.upgrade) {
e.count++;
ngEcs.cookies -= e.upgrade;
e.upgrade = Math.floor(1.15*e.upgrade);
}
},
$require: ['cps'], // required components to be considered part of this system's family
$update: function(dt) { // $update function is called every `interval` seconds (1 s)
this.click(this.cps*dt);
},
$render: function() { // $render is called every animation frame
this.cps = 0; // resets cps calculation
},
$renderEach: function(e) { // $render is called every animation frame, on each element in family
this.cps += e.count*e.cps; // calulates cps
}
});
ngEcs.$s('pending-achievements', { // this system
$require: ['achievement', 'pending'], // acts on pending achievement
$renderEach: function(e) { // for each
if (ngEcs.cookies >= e.count) { // checks if done
e.$add('done', true); // marks as done
e.$remove('pending'); // removes pending tag
}
}
});
ngEcs.$s('achievements', { // this system is just to create the list in angular
$require: ['achievement','done'] // all acomplished achievments
});
// "buildings"
ngEcs.$e({
name: 'Cursor',
description: 'Autoclicks once every 10 seconds.',
count: 0,
upgrade: 10,
cps: 1
});
ngEcs.$e({
name: 'Grandma',
description: 'A nice grandma to bake more cookies.',
count: 0,
upgrade: 100,
cps: 5
});
ngEcs.$e({
name: 'Farm',
description: 'Grows cookie plants from cookie seeds.',
count: 0,
upgrade: 500,
cps: 40
});
ngEcs.$e({
name: 'Factory',
description: 'Produces large quantities of cookies',
count: 0,
upgrade: 3000,
cps: 100
});
ngEcs.$e({
name: 'Mine',
description: 'Mines out cookie dough and chocolate chips.',
count: 0,
upgrade: 10000,
cps: 400
});
ngEcs.$e({
name: 'Shipment',
description: 'Brings in fresh cookies from the cookie planet.',
count: 0,
upgrade: 40000,
cps: 1000
});
ngEcs.$e({
name: 'Alchemy Lab',
description: 'Turns gold into cookies!',
count: 0,
upgrade: 200000,
cps: 4000
});
// achievements
ngEcs.$e({
achievement: 'Wake and bake',
pending: true,
count: 1,
});
ngEcs.$e({
achievement: 'Making some dough',
pending: true,
count: 100,
});
ngEcs.$e({
achievement: 'How?',
pending: true,
count: 1e15,
});
})
.controller('MainCtrl', function($scope, ngEcs, $document) {
$scope.game = ngEcs;
ngEcs.$start();
});
/* Styles go here */
h1, h2, h3, h4, h5 {
text-align: center;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container {
max-width: 720;
}
button:focus {outline:0;}
.canvas {
background-color: #eee;
padding-bottom: 20px;
}
.cookie {
width:100%;
height:0;
padding: 50% 0;
border: 0;
border-radius: 50%;
box-sizing: border-box;
background-image: url(http://vignette4.wikia.nocookie.net/cookieclicker/images/5/5a/PerfectCookie.png/revision/latest/scale-to-width/250?cb=20130827014912);
background-size: 100% 100%;
background-color: transparent;
}
.cookie:hover:not(:active) {
width:104%;
margin-left: -2%;
padding: 52% 0;
margin-top: -2%;
}
.upgrade, .achievement {
width:100%;
height:60px; /* same as width */
padding: 5px 10px;
margin: 0;
margin-bottom: 3px;
box-sizing: border-box;
margin-top: 0;
text-align: center;
}
.upgrade[disabled] {
opacity: 0.6;
}
.upgrade h2 {
padding: 0;
margin-top: 0;
}