|
|
@@ -1,71 +1,100 @@
|
|
|
-var stage, controller;
|
|
|
+(function(){
|
|
|
+ var cellSize = 1;
|
|
|
|
|
|
-var minimum_cell_size = 30;
|
|
|
-var maximum_grid_size = 20;
|
|
|
+ var app = angular.module("app", ["views"]);
|
|
|
|
|
|
-function init() {
|
|
|
- // Do not use this for now...
|
|
|
- // createjs.MotionGuidePlugin.install();
|
|
|
- controller = new Controller;
|
|
|
+ var views = angular.module("views", []);
|
|
|
|
|
|
- resize();
|
|
|
+ views.factory("Particle", function(){
|
|
|
+ function Particle(modelObject){
|
|
|
+ this.particle = new createjs.Shape();
|
|
|
+ this.particle.graphics.beginFill("#FFE989").drawCircle(0, 0, modelObject.radius);
|
|
|
+ this.particle.animationTarget = modelObject.target;
|
|
|
+ this.particle.gridPosition = modelObject.position;
|
|
|
+ this.animate();
|
|
|
+ }
|
|
|
+ Particle.prototype = {
|
|
|
+ addToStage: function(stage){
|
|
|
+ stage.addChild(this.particle);
|
|
|
+ },
|
|
|
+ removeFromStage: function(stage){
|
|
|
+ stage.removeChild(this.particle);
|
|
|
+ },
|
|
|
+ get x () {
|
|
|
+ return this.particle.gridPosition.x;
|
|
|
+ },
|
|
|
+ set x (val) {
|
|
|
+ this.particle.x = cellSize * val + cellSize / 2;
|
|
|
+ },
|
|
|
+ get y () {
|
|
|
+ return this.particle.gridPosition.y;
|
|
|
+ },
|
|
|
+ set y (val) {
|
|
|
+ this.particle.y = cellSize * val + cellSize / 2;
|
|
|
+ },
|
|
|
+ animate: function(){
|
|
|
+ if(this.particle.animationTarget){
|
|
|
+ console.log("Will animate");
|
|
|
+ createjs.Tween.get(this.particle, {loop: true}).to({
|
|
|
+ x: this.particle.animationTarget.x * cellSize + cellSize / 2,
|
|
|
+ y: this.particle.animationTarget.y * cellSize + cellSize / 2
|
|
|
+ }, this.particle.animationDuration);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return (Particle);
|
|
|
+ })
|
|
|
|
|
|
- controller.start_game();
|
|
|
-
|
|
|
- /*var p2 = new Particle({x: 3, y: 3});
|
|
|
- p2.start_time = createjs.Ticker.getTime();
|
|
|
- p2.target = {
|
|
|
- time: p2.start_time + 1000,
|
|
|
- x: 10,
|
|
|
- y: 7
|
|
|
- }
|
|
|
- var p2v = new ParticleView(p2);
|
|
|
- controller.add_view(p2v);*/
|
|
|
-}
|
|
|
-
|
|
|
-$(function(){
|
|
|
- // Bind the swipeHandler callback function to the swipe event on div.box
|
|
|
- $( "#demoCanvas" ).on( "swipe", swipeHandler );
|
|
|
- $.event.special.swipe.horizontalDistanceThreshold = 1;
|
|
|
- $.event.special.swipe.verticalDistanceThreshold = 1000;
|
|
|
- $( document ).on( "mobileinit", function() {
|
|
|
- $.mobile.loader.prototype.options.disabled = true;
|
|
|
+ app.service('modelService', function(){
|
|
|
+ this.prop = function(){
|
|
|
+ return 100;
|
|
|
+ }();
|
|
|
});
|
|
|
-
|
|
|
- // Callback function references the event target and adds the 'swipe' class to it
|
|
|
- function swipeHandler( event ){
|
|
|
- // $( event.target ).addClass( "swipe" );
|
|
|
- var direction = {x: 0, y: 0};
|
|
|
- var start = event.swipestart.coords;
|
|
|
- var stop = event.swipestop.coords;
|
|
|
- var diff = {x: stop[0] - start[0], y: stop[1] - start[1]};
|
|
|
- direction.x = Math.abs(diff.x) > Math.abs(diff.y) ? diff.x > 0 ? 1 : -1 : 0;
|
|
|
- direction.y = Math.abs(diff.y) > Math.abs(diff.x) ? diff.y > 0 ? 1 : -1 : 0;
|
|
|
- console.log(direction);
|
|
|
- controller.turn_snake(direction);
|
|
|
- }
|
|
|
-});
|
|
|
|
|
|
-function resize() {
|
|
|
- var height = window.innerHeight - 50;
|
|
|
- var width = window.innerWidth;
|
|
|
- window.cell_size = 50;
|
|
|
- controller.grid_size.y = Math.floor(height / window.cell_size);
|
|
|
- controller.grid_size.x = Math.floor(width / window.cell_size);
|
|
|
- // if((height / minimum_cell_size) > maximum_grid_size){
|
|
|
- // cs = height / maximum_grid_size;
|
|
|
- // controller.grid_size.y = maximum_grid_size;
|
|
|
- // } else {
|
|
|
- // controller.grid_size.y = Math.floor(height / minimum_cell_size);
|
|
|
- // cs = minimum_cell_size;
|
|
|
- // }
|
|
|
- // if((width / minimum_cell_size) > maximum_grid_size){
|
|
|
- // window.cell_size = width / maximum_grid_size ;
|
|
|
- // controller.grid_size.x = maximum_grid_size;
|
|
|
- // } else {
|
|
|
- // controller.grid_size.x = Math.floor(width / minimum_cell_size);
|
|
|
- // window.cell_size = minimum_cell_size;
|
|
|
- // }
|
|
|
- controller.stage.canvas.width = width;
|
|
|
- controller.stage.canvas.height = height;
|
|
|
-}
|
|
|
+ app.directive('gameControl', ['modelService', function(modelService){
|
|
|
+ return {
|
|
|
+ restrict: 'E',
|
|
|
+ templateUrl: 'templates/game-control.html',
|
|
|
+ controller: ['$scope', function($scope){
|
|
|
+ $scope.score = modelService.prop;
|
|
|
+ }],
|
|
|
+ controllerAs: 'control'
|
|
|
+ }
|
|
|
+ }]);
|
|
|
+
|
|
|
+ app.directive('screen', ['modelService', 'Particle', function(modelService, Particle){
|
|
|
+ return {
|
|
|
+ restrict: 'E',
|
|
|
+ replace: true,
|
|
|
+ scope: {},
|
|
|
+ template: '<canvas id="screen" width="100" height="100"></canvas>',
|
|
|
+ link: function(scope, element, attribute){
|
|
|
+ var manifest, loader, particle;
|
|
|
+ drawGame();
|
|
|
+ function drawGame(){
|
|
|
+ if(scope.stage){
|
|
|
+ scope.stage.autoClear = true;
|
|
|
+ scope.stage.removeAllChildren();
|
|
|
+ scope.stage.update();
|
|
|
+ } else {
|
|
|
+ scope.stage = new createjs.Stage(element[0]);
|
|
|
+ }
|
|
|
+ manifest = [{src: 'README.md', id: 'readme'}];
|
|
|
+ loader = new createjs.LoadQueue(false);
|
|
|
+ loader.addEventListener("complete", handleComplete);
|
|
|
+ loader.loadManifest(manifest, true, "/");
|
|
|
+ }
|
|
|
+ function handleComplete(){
|
|
|
+ particle = new Particle({
|
|
|
+ radius: 10,
|
|
|
+ target: {x: 5, y: 1},
|
|
|
+ duration: 200
|
|
|
+ });
|
|
|
+ particle.addToStage(scope.stage);
|
|
|
+ createjs.Ticker.timingMode = createjs.Ticker.RAF;
|
|
|
+ createjs.Ticker.addEventListener("tick", scope.stage);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }])
|
|
|
+}());
|