Forráskód Böngészése

Merge branch 'development' into animations

Kevin Heinicke 10 éve
szülő
commit
02e922cbec
10 módosított fájl, 321 hozzáadás és 81 törlés
  1. 11 0
      css/style.css
  2. 12 81
      index.html
  3. 147 0
      js/controller.js
  4. 3 0
      js/models/collectible.js
  5. 21 0
      js/models/particle.js
  6. 11 0
      js/models/physicist.js
  7. 30 0
      js/models/snake.js
  8. 32 0
      js/script.js
  9. 39 0
      js/views/particle.js
  10. 15 0
      js/views/physicist.js

+ 11 - 0
css/style.css

@@ -0,0 +1,11 @@
+body {
+    background: #144503;
+    padding: 0px;
+    margin: 0px;
+}
+
+#demoCanvas {
+    margin: 0px auto;
+    padding: 0px auto;
+    background: #fff;
+}

+ 12 - 81
index.html

@@ -1,89 +1,20 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>EaselJS demo: Time based animation</title>
-	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
-	<script>
-    var cellSize = 50;
-    var grid = [[]];
-    for(var i=0; i<100; i++){
-      grid[i] = [];
-      for(var j=0; j<100; j++){
-        grid[i][j] = {
-          x: cellSize / 2 + i * cellSize,
-          y: cellSize / 2 + j * cellSize
-        };
-      }
-    }
-		
-		var stage, circle, snake;
-		function init() {
-			stage = new createjs.Stage("demoCanvas");
-
-      snake = {};
-      snake.body = [];
-      for(var i=0; i<8; i++){
-			  circle = new createjs.Shape();
-			  circle.graphics.beginFill("red").drawCircle(0, 0, 20);
-        circle.direction = {x: 0, y: 0};
-			  stage.addChild(circle);
-        snake.body.push(circle);
-      }
-      snake.update = function(){
-        for(var i=this.body.length - 1; i>0; i--){
-          this.body[i].x = this.body[i-1].x;
-          this.body[i].y = this.body[i-1].y;
-          this.body[i].direction.x = this.body[i-1].direction.x;
-          this.body[i].direction.y = this.body[i-1].direction.y;
-        }
-      };
-			
-			createjs.Ticker.on("tick", tick);
-			createjs.Ticker.setFPS(20);
-
-      stage.on("stagemousedown", function(evt){
-        Math.abs(evt.stageX - snake.body[0].x) > Math.abs(evt.stageY - snake.body[0].y) ? 
-          function(){
-            snake.body[0].direction.x = evt.stageX > snake.body[0].x ? 1 : -1;
-            snake.body[0].direction.y = 0;
-          }() : function(){
-            snake.body[0].direction.y = evt.stageY > snake.body[0].y ? 1 : -1;
-            snake.body[0].direction.x = 0;
-          }();
-      });
-		}
-
-    var time = 0;
-		
-		function tick(event) {
-      time = event.time - time > 400 ? event.time : time;
-
-			// time based
-      if(event.time == time){
-        var head = snake.body[0];
-        snake.update();
-        head.x = (head.x <= stage.canvas.width && head.x >= 0) ?
-          head.x + head.direction.x * cellSize :
-            head.x < 0 ? stage.canvas.width : 0;
-        head.y = (head.y <= stage.canvas.height && head.y >= 0) ?
-          head.y + head.direction.y * cellSize :
-            head.y < 0 ? stage.canvas.height : 0;
-        
-        stage.update(event);
-      }
-		}
-	</script>
+	<title>Snakey Particles</title>
+	<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/collectible.js"></script>
+	<script src="js/models/snake.js"></script>
+	<script src="js/controller.js"></script>
+	<script src="js/script.js"></script>
+  <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>
 <body onload="init();">
-	<select onchange="createjs.Ticker.setFPS(Number(this.value));">
-		<option value="10">10 fps</option>
-		<option value="20" selected>20 fps</option>
-		<option value="30">30 fps</option>
-		<option value="40">40 fps</option>
-		<option value="50">50 fps</option>
-		<option value="60">60 fps</option>
-	</select><br>
-	<canvas id="demoCanvas" width="800" height="700">
+	<canvas id="demoCanvas" width="500" height="500">
 		alternate content
 	</canvas>
 </body>

+ 147 - 0
js/controller.js

@@ -0,0 +1,147 @@
+var Controller = function(){
+	this.grid_size = {x: 20, y: 20};
+	this.initial_length = 3;
+	this.time_step = 400;
+	this.collectibles = [];
+    this.views = [];
+	this.snake = new Snake(this.initial_length);
+	var pos0 = {x: -1, y: -1};
+	
+	var higgs = new Particle(pos0);
+	higgs.mass = 125;
+	higgs.type = "Higgs"
+	var electron = new Particle(pos0);
+	electron.mass = .0005;
+	electron.type = "electron";
+
+	this.possible_collectibles = [
+		{collectible: higgs, probability: 3e-3},
+		{collectible: electron, probability: .5}
+		]
+	this.stage = new createjs.Stage("demoCanvas");
+}
+
+Controller.prototype.update_views = function(){
+    for(view in this.views){
+        this.views[view].update();
+    }
+}
+
+Controller.prototype.spawn_collectibles = function(){
+	var collectible =get_random_element_with_probabilities(this.possible_collectibles);
+	if (!collectible) return;
+	collectible = Object.create(collectible.collectible);
+	var rnd_pos = this.get_random_position();
+	if (this.is_position_free(rnd_pos)) {
+		collectible.position = rnd_pos;
+		this.collectibles.push(collectible);
+		this.add_view(new ParticleView(collectible));
+	}
+}
+
+Controller.prototype.start_game = function(){
+	// this.session = new Session();
+    var c = this;
+	createjs.Ticker.on("tick", function(e){c.tick(e);});
+    createjs.Ticker.addEventListener("tick", this.stage);
+    createjs.Ticker.timingMode = createjs.Ticker.RAF;
+	this.bind_events();
+	this.time = 0;
+
+    for(phModel in controller.snake.physicists){
+        var model = controller.snake.physicists[phModel];
+        var phView = new PhysicistView(model);
+        this.add_view(phView);
+    }
+}
+
+Controller.prototype.add_view = function(view){
+    this.stage.addChild(view);
+    this.views.push(view);
+    if(view.animate){
+        view.animate();
+    }
+}
+
+Controller.prototype.bind_events = function(){
+    var c = this;
+	window.onkeydown = function(e){
+		var direction = null;
+		switch (e.keyCode){
+			case 37:
+				direction = {x: -1, y: 0};
+				break;
+			case 38:
+				direction = {x: 0, y: -1};
+				break;
+			case 39:
+				direction = {x: 1, y: 0};
+				break;
+			case 40:
+				direction = {x: 0, y: 1};
+				break;
+
+		}
+		if (direction){
+			c.turn_snake(direction);
+		}
+	}
+}
+
+Controller.prototype.turn_snake = function(direction){
+	this.snake.physicists[0].direction = direction;
+}
+
+
+Controller.prototype.tick = function(event){
+	if(event.time - this.time > this.time_step){
+		this.time = event.time;
+        var next_cell = this.get_next_cell_position();
+		this.snake.move(next_cell);
+		this.spawn_collectibles();
+        this.update_views();
+	}
+	this.stage.update(event);
+}
+
+Controller.prototype.get_next_cell_position = function(){
+	var ph0 = this.snake.physicists[0];
+	var next_cell = Object.create(ph0.position);
+	next_cell.x += ph0.direction.x;
+	next_cell.y += ph0.direction.y;
+	if (next_cell.x < 0) next_cell.x = this.grid_size.x - 1;
+	if (next_cell.y < 0) next_cell.y = this.grid_size.y - 1;
+	if (next_cell.x == this.grid_size.x) next_cell.x = 0;
+	if (next_cell.y == this.grid_size.y) next_cell.y = 0;
+	return next_cell;
+}
+
+Controller.prototype.get_random_position = function(){
+	return {x: Math.floor(Math.random()*this.grid_size.x),
+			y: Math.floor(Math.random()*this.grid_size.y)
+		};
+}
+
+Controller.prototype.is_position_free = function(position){
+	var phs = this.snake.physicists;
+	for (ph in phs){
+		var pos = phs[ph].position;
+		if (pos.x == position.x && pos.y == position.y) return false;
+	}
+	for (c in this.collectibles){
+		var pos = this.collectibles[c].position;
+		if (pos.x == position.x && pos.y == position.y) return false;
+	}
+	return true;
+}
+
+var get_random_element_with_probabilities = function(array){
+	var previous_probability = 0;
+	var rnd = Math.random();
+	for (ind in array){
+		var probability = array[ind].probability;
+		if (rnd  < probability + previous_probability) return array[ind];
+		previous_probability += probability;
+	}
+	return null;
+}

+ 3 - 0
js/models/collectible.js

@@ -0,0 +1,3 @@
+var Collectible = function(position){
+	this.position = position;
+}

+ 21 - 0
js/models/particle.js

@@ -0,0 +1,21 @@
+var Particle = function(position){
+	Collectible.call(this, position);
+	this.type = "Higgs";
+	this.mass = 125;
+	this.draw_properties = {
+		colors: ["hsl(0, 100%, 50%)", "hsl(0, 40%, 50%)"],
+		ratios: [0, 1],
+		inner_radius: .03,
+		outer_radius: .13,
+		inner_center: {x: .07, y: .07},
+		outer_center: {x: 0, y: 0}
+		};
+	this.charge = 0;
+	this.start_time = 1234;
+	this.decay_time = 4444;
+	this.target = null;
+	this.velocity = null;
+	this.points = 125;
+	this.parent_type = "W";
+	this.decays = [{particles: ["W", "W"], probability: .3 }]
+}

+ 11 - 0
js/models/physicist.js

@@ -0,0 +1,11 @@
+var Physicist = function(snake, position) {
+	this.direction = 0;
+	this.position = position;
+	this.name = 'Fermi';
+	this.bonus = '';
+	this.snake = snake;
+};
+
+Physicist.prototype.catch = function(collectible) {
+
+};

+ 30 - 0
js/models/snake.js

@@ -0,0 +1,30 @@
+var Snake = function(n_physicisits){
+	this.physicists = [];
+	for (var i = 0; i < n_physicisits; i++){
+		this.physicists.push(new Physicist(this, {x: 0, y: 0}));
+	}
+    this.physicists[0].direction = {x: 0, y: 0};
+	this.new_physicists = [];
+	this.bonuses = [];
+	this.speed = 1;
+}
+
+Snake.prototype.add_physicist = function(physicist){
+	this.new_physicists.push_back(new Physicist(this, this.physicists[this.physicists.length - 1].position));
+}
+
+Snake.prototype.add_bonus = function(bonus){
+	this.bonuses.push_back(bonus);
+}
+
+Snake.prototype.remove_physicist = function(index){	
+}
+
+
+Snake.prototype.move = function(next_cell){
+	for(var i = this.physicists.length - 1; i > 0; i--){
+		this.physicists[i].position  = this.physicists[i-1].position;
+		this.physicists[i].direction = this.physicists[i-1].direction;
+	}
+	this.physicists[0].position = next_cell;
+}

+ 32 - 0
js/script.js

@@ -0,0 +1,32 @@
+var stage, controller;
+
+function init() {
+    // Do not use this for now...
+    // createjs.MotionGuidePlugin.install();
+
+    controller = new Controller;
+
+    resize();
+
+    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 resize() {
+    var height = window.innerHeight;
+    var width = window.innerWidth;
+    window.cell_size = height > width ?
+        height / controller.grid_size.y :
+        width / controller.grid_size.x;
+    controller.stage.canvas.width = width;
+    controller.stage.canvas.height = height;
+}

+ 39 - 0
js/views/particle.js

@@ -0,0 +1,39 @@
+(function(window) {
+    function ParticleView(modelObject){
+        this.model = modelObject;
+		var dp = this.model.draw_properties;
+		var cs = window.cell_size;
+        this.graphics
+			.beginRadialGradientFill(dp.colors, dp.ratios, 
+				dp.inner_center.x * cs, dp.inner_center.y * cs , dp.inner_radius * cs,
+				dp.outer_center.x * cs, dp.outer_center.y * cs, dp.outer_radius * cs)
+			.drawCircle(0, 0, cs * dp.outer_radius);
+    }
+
+    ParticleView.prototype = new createjs.Shape();
+
+    ParticleView.prototype.update = function(){
+        this.x = cell_size * this.model.position.x;
+        this.y = cell_size * this.model.position.y;
+    }
+
+    ParticleView.prototype.animate = function(){
+        if(this.model.target){
+            var own_view = this;
+            this.update();
+            this.update = function(){};
+            createjs.Tween.get(this).to(
+                { x: cell_size * this.model.target.x, y: cell_size * this.model.target.y },
+                // We do not want to have magnetically curved particles for now
+                // {guide:{ path:[0,0, 0,200,200,200, 200,0,0,0] }},
+                this.model.target.time - this.model.start_time
+            ).call(function(){
+                own_view.update = ParticleView.prototype.update;
+                own_view.model.position.x = own_view.model.target.x;
+                own_view.model.position.y = own_view.model.target.y;
+            });
+        }
+    }
+
+    window.ParticleView = ParticleView;
+}(window));

+ 15 - 0
js/views/physicist.js

@@ -0,0 +1,15 @@
+(function(window) {
+    function PhysicistView(modelObject){
+        this.graphics.beginFill("red").drawCircle(0, 0, window.cell_size * 0.9 / 2);
+        this.model = modelObject;
+    }
+
+    PhysicistView.prototype = new createjs.Shape();
+
+    PhysicistView.prototype.update = function(){
+        this.x = cell_size * this.model.position.x;
+        this.y = cell_size * this.model.position.y;
+    }
+
+    window.PhysicistView = PhysicistView;
+}(window));