Browse Source

Merge branch 'development' into animations

Kevin Heinicke 10 năm trước cách đây
mục cha
commit
02e922cbec
10 tập tin đã thay đổi với 321 bổ sung81 xóa
  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));