Sfoglia il codice sorgente

trying to use angularjs from the base on

Kevin Heinicke 10 anni fa
parent
commit
6c1ea94362
96 ha cambiato i file con 133 aggiunte e 470 eliminazioni
  1. 0 84
      css/general.css
  2. 0 66
      css/start.css
  3. 3 61
      css/style.css
  4. 0 70
      html/about.html
  5. BIN
      img/anti-muon/anti-muon-1.png
  6. BIN
      img/anti-muon/anti-muon-2.png
  7. BIN
      img/anti-muon/anti-muon-3.png
  8. BIN
      img/anti-muon/anti-muon-4.png
  9. BIN
      img/anti-muon/anti-muon-5.png
  10. BIN
      img/anti-muon/anti-muon-6.png
  11. BIN
      img/anti-muon/anti-muon-7.png
  12. BIN
      img/anti-muon/anti-muon-8.png
  13. BIN
      img/anti-muon/anti-muon.gif
  14. BIN
      img/anti-muon/anti-muon.xcf
  15. BIN
      img/anti-muon/antimyon-spritesheet.png
  16. BIN
      img/electron/electron-1.png
  17. BIN
      img/electron/electron-2.png
  18. BIN
      img/electron/electron-3.png
  19. BIN
      img/electron/electron-4.png
  20. BIN
      img/electron/electron-5.png
  21. BIN
      img/electron/electron-6.png
  22. BIN
      img/electron/electron-7.png
  23. BIN
      img/electron/electron-8.png
  24. BIN
      img/electron/electron-spritesheet.png
  25. BIN
      img/electron/electron.gif
  26. BIN
      img/electron/electron.xcf
  27. BIN
      img/favicon.ico
  28. BIN
      img/higgs/higgs-01.png
  29. BIN
      img/higgs/higgs-02.png
  30. BIN
      img/higgs/higgs-03.png
  31. BIN
      img/higgs/higgs-04.png
  32. BIN
      img/higgs/higgs-05.png
  33. BIN
      img/higgs/higgs-06.png
  34. BIN
      img/higgs/higgs-07.png
  35. BIN
      img/higgs/higgs-08.png
  36. BIN
      img/higgs/higgs-09.png
  37. BIN
      img/higgs/higgs-1.png
  38. BIN
      img/higgs/higgs-10.png
  39. BIN
      img/higgs/higgs-2.png
  40. BIN
      img/higgs/higgs-3.png
  41. BIN
      img/higgs/higgs-4.png
  42. BIN
      img/higgs/higgs-5.png
  43. BIN
      img/higgs/higgs-6.png
  44. BIN
      img/higgs/higgs-7.png
  45. BIN
      img/higgs/higgs-8.png
  46. BIN
      img/higgs/higgs-9.png
  47. BIN
      img/higgs/higgs-spritesheet.png
  48. BIN
      img/higgs/higgs.gif
  49. BIN
      img/higgs/higgs.xcf
  50. BIN
      img/logo.png
  51. BIN
      img/muon/muon-1.png
  52. BIN
      img/muon/muon-2.png
  53. BIN
      img/muon/muon-3.png
  54. BIN
      img/muon/muon-4.png
  55. BIN
      img/muon/muon-5.png
  56. BIN
      img/muon/muon-6.png
  57. BIN
      img/muon/muon-7.png
  58. BIN
      img/muon/muon-8.png
  59. BIN
      img/muon/muon.gif
  60. BIN
      img/muon/muon.xcf
  61. BIN
      img/muon/myon-spritesheet.png
  62. BIN
      img/physicist/physicist-1.png
  63. BIN
      img/physicist/physicist-2.png
  64. BIN
      img/physicist/physicist-3.png
  65. BIN
      img/physicist/physicist-4.png
  66. BIN
      img/physicist/physicist-5.png
  67. BIN
      img/physicist/physicist-6.png
  68. BIN
      img/physicist/physicist-7.png
  69. BIN
      img/physicist/physicist-8.png
  70. BIN
      img/physicist/physicist-spritesheet.png
  71. BIN
      img/physicist/physicist.gif
  72. BIN
      img/physicist/physicist.xcf
  73. BIN
      img/positron/.DS_Store
  74. BIN
      img/positron/positron-1.png
  75. BIN
      img/positron/positron-2.png
  76. BIN
      img/positron/positron-3.png
  77. BIN
      img/positron/positron-4.png
  78. BIN
      img/positron/positron-5.png
  79. BIN
      img/positron/positron-6.png
  80. BIN
      img/positron/positron-7.png
  81. BIN
      img/positron/positron-8.png
  82. BIN
      img/positron/positron-spritesheet.png
  83. BIN
      img/positron/positron.gif
  84. BIN
      img/positron/positron.xcf
  85. 14 82
      index.html
  86. 0 10
      js/ng-app.js
  87. 94 65
      js/script.js
  88. BIN
      presentation/logo.png
  89. BIN
      presentation/pres.odt
  90. BIN
      presentation/snake-game.jpg
  91. BIN
      presentation/snaky.odp
  92. BIN
      presentation/snaky.pdf
  93. BIN
      presentation/start-button.jpeg
  94. 0 32
      start.html
  95. 16 0
      templates/game-control.html
  96. 6 0
      templates/screen.html

+ 0 - 84
css/general.css

@@ -1,84 +0,0 @@
-
-a:link, a:visited {
-    color: #FFFF22;
-    }
-
-a:hover, a:active {
-    color: #FFFF22;
-}
-
-.head-container {
-	text-align: center;
-	font-size:48px;
-	color: #FFFFFF;
-    background-color: #006666;
-	padding:1px 16px;
-	width: 100%;
-    margin-bottom: 5px;
-}
-
-.container {
-	text-align: center;
-	color: #FFFFFF;
-    background-color: #006666;
-	padding:20px 16px;
-	margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-	font-size:25px
-
-}
-
-.foot-container {
-	color: #FFFFFF;
-    background-color: #006666;
-	padding:5px 25px;
-    margin-top: 5px;
-	width: 100%
-}
-
-.foot-left {
-	text-align: left;
-	font-size:18px;
-}
-.foot-right {
-	text-align: right;
-	font-size:18px;
-}
-
-.navbar  {
-    text-align: center;
-    font-size:20px;
-    color: #FFFFFF;
-    background-color: #006666;
-    padding:1px 8px;
-    width: 100%
-}
-
-ul {
-    list-style-type: none;
-    margin: 20px;
-    padding: 1px;
-    overflow: hidden
-}
-
-li {
-    float: left;
-    width: 200px;
-}
-
-a.nav:link, a.nav:visited {
-    display: block;
-    width: 120px;
-    font-weight: bold;
-    color: #FFFFFF;
-    background-color: #006666;
-    text-align: center;
-    padding: 4px;
-    text-decoration: none;
-    text-transform: uppercase
-}
-
-a.nav:hover, a.nav:active {
-    background-color: #F88000;
-}

+ 0 - 66
css/start.css

@@ -1,66 +0,0 @@
-
-ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden
-}
-
-li {    
-    width: 200px;
-}
-
-a:link, a:visited {
-    display: block;
-    width: 120px;
-    font-weight: bold;
-    color: #FFFFFF;
-    background-color: #006666;
-    text-align: center;
-    padding: 4px;
-    text-decoration: none;
-    text-transform: uppercase
-}
-
-a:hover, a:active {
-    background-color: #F88000
-}
-
-.head-container {
-	text-align: center;
-	font-size:48px;
-	color: #FFFFFF;
-    background-color: #006666;
-	padding:1px 16px;
-	width: 100%;
-    margin-bottom: 5px;
-}
-
-.container {
-	text-align: center;
-	color: #FFFFFF;
-    background-color: #006666;
-	padding:20px 16px;
-	margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-	font-size:25px
-
-}
-
-.foot-container {
-	color: #FFFFFF;
-    background-color: #006666;
-	padding:5px 25px;
-    margin-top: 5px;
-	width: 100%
-}
-
-.foot-left {
-	text-align: left;
-	font-size:18px;
-}
-.foot-right {
-	text-align: right;
-	font-size:18px;
-}

+ 3 - 61
css/style.css

@@ -1,67 +1,9 @@
 body {
-    background: #144503;
+    background: #FFFCF3;
     padding: 0px;
     margin: 0px;
-    overflow-y: hidden;
 }
 
-#demoCanvas {
-    margin: 50px auto 0px auto;
-    padding: 0px auto;
-    background: #1F2921;
+#screen {
+    border: 1px solid #CC8A53;
 }
-
-.ui-loader {
-    display: none;
-}
-
-/* .newsticker	 {
-	text-align: center;
-	font-size:20px;
-	color: #FFFFFF;
-    background-color: #006666;
-	padding:1px 8px;
-	width: 100%;
-	margin-top: 3px;
-}
-
-
-.navbar	 {
-	text-align: center;
-	font-size:20px;
-	color: #FFFFFF;
-    background-color: #006666;
-	padding:1px 8px;
-	width: 100%
-}
-
-
-ul {
-    list-style-type: none;
-    margin: 20px;
-    padding: 1px;
-    overflow: hidden
-}
-
-li {
-    float: left;
-    width: 200px;
-}
-
-a:link, a:visited {
-    display: block;
-    width: 120px;
-    font-weight: bold;
-    color: #FFFFFF;
-    background-color: #006666;
-    text-align: center;
-    padding: 4px;
-    text-decoration: none;
-    text-transform: uppercase
-}
-
-a:hover, a:active {
-    background-color: #F88000;
-}
-
-*/

+ 0 - 70
html/about.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>SNAKY PARTCILES</title>
-</head>
-
-<link rel="stylesheet" href="../css/general.css">
-<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
-<link rel="icon" href="../img/favicon.ico" type="image/x-icon">
-
-<body>
-
-<header class="head-container"> SNAKY PARTICLES - ABOUT</header>
-
-<div>
-  <!--canvas id="navigation">alternate content</canvas-->
-
-  <article class="navbar">
-    <ul>
-      <li> <img src="../img/logo.png" alt="logo" style="width:120px;height:120px;"> </li>
-      <li><a class="nav" href="../index.html">Start Game</a></li>
-      <li><a class="nav" href="./settings.html">Settings</a></li>
-      <li><a class="nav" href="./scorelist.html">Scorelist</a></li>
-      <li><a class="nav"href="./about.html">About</a></li>
-      <li><a class="nav"href="./end.html">Quit</a></li>
-    </ul>
-  </article>
-</div>
-
-<article class="container">
-  <p>This game was created as part of the Webfest 2015 at CERN. For more information see on the <a href="https://webfest.web.cern.ch/"> Webfest Homepage</a>.</p>
-
-  <p>The game is following the example of the historic game "Snake". It connects aspects of game with learning particle physics. So the two main goals are EDUCATION and FUN.</p>
-
-  <p>The project is based on open source. The main libary used is create.js. The whole source code can be accessed by GitHub. Just check the project <a href="ttps://github.com/snaky-particles"> snaky-particles</a>.</p>
-
-  <p>The MIT License (MIT)</p>
-
-<p>Copyright (c) 2015 snaky-particles</p>
-
-<p>Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:</p>
-
-<p>The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.</p>
-
-<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.</p>
-
-  
-</article>
-
-
-<footer class="foot-container">
-  <div class="left"> Snaky Particles: An educational particle physics game.</div>
-  <div align="right"> @CERN-Webfest 2015 </div>
-</footer>
-
-</body>
-
-</html>

BIN
img/anti-muon/anti-muon-1.png


BIN
img/anti-muon/anti-muon-2.png


BIN
img/anti-muon/anti-muon-3.png


BIN
img/anti-muon/anti-muon-4.png


BIN
img/anti-muon/anti-muon-5.png


BIN
img/anti-muon/anti-muon-6.png


BIN
img/anti-muon/anti-muon-7.png


BIN
img/anti-muon/anti-muon-8.png


BIN
img/anti-muon/anti-muon.gif


BIN
img/anti-muon/anti-muon.xcf


BIN
img/anti-muon/antimyon-spritesheet.png


BIN
img/electron/electron-1.png


BIN
img/electron/electron-2.png


BIN
img/electron/electron-3.png


BIN
img/electron/electron-4.png


BIN
img/electron/electron-5.png


BIN
img/electron/electron-6.png


BIN
img/electron/electron-7.png


BIN
img/electron/electron-8.png


BIN
img/electron/electron-spritesheet.png


BIN
img/electron/electron.gif


BIN
img/electron/electron.xcf


BIN
img/favicon.ico


BIN
img/higgs/higgs-01.png


BIN
img/higgs/higgs-02.png


BIN
img/higgs/higgs-03.png


BIN
img/higgs/higgs-04.png


BIN
img/higgs/higgs-05.png


BIN
img/higgs/higgs-06.png


BIN
img/higgs/higgs-07.png


BIN
img/higgs/higgs-08.png


BIN
img/higgs/higgs-09.png


BIN
img/higgs/higgs-1.png


BIN
img/higgs/higgs-10.png


BIN
img/higgs/higgs-2.png


BIN
img/higgs/higgs-3.png


BIN
img/higgs/higgs-4.png


BIN
img/higgs/higgs-5.png


BIN
img/higgs/higgs-6.png


BIN
img/higgs/higgs-7.png


BIN
img/higgs/higgs-8.png


BIN
img/higgs/higgs-9.png


BIN
img/higgs/higgs-spritesheet.png


BIN
img/higgs/higgs.gif


BIN
img/higgs/higgs.xcf


BIN
img/logo.png


BIN
img/muon/muon-1.png


BIN
img/muon/muon-2.png


BIN
img/muon/muon-3.png


BIN
img/muon/muon-4.png


BIN
img/muon/muon-5.png


BIN
img/muon/muon-6.png


BIN
img/muon/muon-7.png


BIN
img/muon/muon-8.png


BIN
img/muon/muon.gif


BIN
img/muon/muon.xcf


BIN
img/muon/myon-spritesheet.png


BIN
img/physicist/physicist-1.png


BIN
img/physicist/physicist-2.png


BIN
img/physicist/physicist-3.png


BIN
img/physicist/physicist-4.png


BIN
img/physicist/physicist-5.png


BIN
img/physicist/physicist-6.png


BIN
img/physicist/physicist-7.png


BIN
img/physicist/physicist-8.png


BIN
img/physicist/physicist-spritesheet.png


BIN
img/physicist/physicist.gif


BIN
img/physicist/physicist.xcf


BIN
img/positron/.DS_Store


BIN
img/positron/positron-1.png


BIN
img/positron/positron-2.png


BIN
img/positron/positron-3.png


BIN
img/positron/positron-4.png


BIN
img/positron/positron-5.png


BIN
img/positron/positron-6.png


BIN
img/positron/positron-7.png


BIN
img/positron/positron-8.png


BIN
img/positron/positron-spritesheet.png


BIN
img/positron/positron.gif


BIN
img/positron/positron.xcf


+ 14 - 82
index.html

@@ -1,84 +1,16 @@
 <!DOCTYPE html>
-<html>
-<head>
-	<title>Snaky Particles</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-
-  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
-  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-
-	<script src="https://code.createjs.com/createjs-2015.05.21.combined.js"></script>
-	<script src="js/views/physicist.js"></script>
-	<script src="js/views/particle.js"></script>
-	<script src="js/models/physicist.js"></script>
-	<script src="js/models/particle.js"></script>
-	<script src="js/models/particles.json.js"></script>
-	<script src="js/models/collectible.js"></script>
-	<script src="js/models/snake.js"></script>
-  <script src="js/controller.js"></script>
-	<script src="js/script.js"></script>
-  <script src="js/ng-app.js"></script>
-
-  <link rel="stylesheet" type="text/css" href="css/style.css">
-  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
-  <link rel="icon" href="img/favicon.ico" type="image/x-icon">
-</head>
-<body onload="init();">		
-  <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" ng-app="interface">
-    <div class="container" ng-controller="InterfaceController as interface">
-    <div class="container-fluid">
-      <!-- Brand and toggle get grouped for better mobile display -->
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="#"><img src="./img/logo.png" alt="logo" style="width:30px;height:30px;"></a>
-        <a class="navbar-brand" href="#">Snaky Particles</a>
-      </div>
-
-      <!-- Collect the nav links, forms, and other content for toggling -->
-      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-        <ul class="nav navbar-nav">
-          <p id="ticker" class="navbar-text" style="position: absolute; width: 60%;"></p>
-        </ul>
-        <ul class="nav navbar-nav navbar-right">
-          <p class="navbar-text">Score: <span id="score"></span></p>
-        </ul>
-      </div><!-- /.navbar-collapse -->
-    </div><!-- /.container-fluid -->
-    </div>
-</nav>
-<!--div>
-	<canvas id="navigation">alternate content</canvas>
-
-	<article class="navbar">
-  	<ul class="nav">
-  		<li class="nav"> <img src="./img/logo.png" alt="logo" style="width:120px;height:120px;"> </li>
-    	<li class="nav"><a href="index.html">Restart</a></li>
-    	<li class="nav"><a href="settings.html">Settings</a></li>
-    	<li class="nav"><a href="scorelist.html">Scorelist</a></li>
-    	<li class="nav"><a href="about.html">About</a></li>
-    	<li class="nav"><a href="end.html">Quit</a></li>
-  	</ul>
-	</article>
-</div-->
-
-<!--<div>
-  canvas id="newsticker">alternate content</canvas>
-	<article class="newsticker">
-  	Here will be presented useful information about particles... =)
-  	</article>
-</div>-->
-
-	
-	<div>
-	<canvas id="demoCanvas" width="500" heigth="500">
-	</canvas>
-	</div>
-</body>
+<html ng-app="app">
+  <head>
+    <title>Snaky Particles</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+  </head>
+  <body>		
+    <game-control></game-control>
+    <screen></screen>
+  </body>
+  <script src="https://code.createjs.com/createjs-2015.05.21.combined.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+  <script src="js/script.js"></script>
 </html>

+ 0 - 10
js/ng-app.js

@@ -1,10 +0,0 @@
-/* (function(){
-    var app = angular.module('interface', []);
-
-    app.controller('InterfaceController', function(){
-        this.score = 0;
-        this.score = controller.score;
-    });
-}()); */
-
-

+ 94 - 65
js/script.js

@@ -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);
+                }
+            }
+        }
+    }])
+}());

BIN
presentation/logo.png


BIN
presentation/pres.odt


BIN
presentation/snake-game.jpg


BIN
presentation/snaky.odp


BIN
presentation/snaky.pdf


BIN
presentation/start-button.jpeg


+ 0 - 32
start.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>SNAKY PARTCILES</title>
-</head>
-
-<link rel="stylesheet" href="./css/start.css">
-
-<body>
-
-<header class="head-container"> SNAKY PARTICLES </header>
-
-<article class="container">
-  <img src="./img/logo.png" alt="logo" style="width:120px;height:120px;">
-  <ul>
-    <li><a href="index.html">Start Game</a></li>
-    <li><a href="./html/settings.html">Settings</a></li>
-    <li><a href="./html/scorelist.html">Scorelist</a></li>
-    <li><a href="./html/about.html">About</a></li>
-    <li><a href="./html/end.html">Quit</a></li>
-  </ul>
-</article>
-
-
-<footer class="foot-container">
-  <div class="left"> Snaky Particles: An educational particle physics game.</div>
-  <div align="right"> @CERN-Webfest 2015 </div>
-</footer>
-
-</body>
-
-</html>

+ 16 - 0
templates/game-control.html

@@ -0,0 +1,16 @@
+<div id="control" class="container-fluid">
+  <div class="row">
+    <div class="col-xs-3">
+      <h2>SP</h2>
+    </div>
+    <div class="col-xs-3">
+      <p>Start</p>
+    </div>
+    <div class="col-xs-3">
+      <p>Pause</p>
+    </div>
+    <div class="col-xs-3">
+      <p>Score: <span>{{ score }}</span></p>
+    </div>
+  </div>
+</div>

+ 6 - 0
templates/screen.html

@@ -0,0 +1,6 @@
+<div id="game">
+  <div class="row">
+    <canvas id="screen">
+    </canvas>
+  </div>
+</div>