浏览代码

Merge remote-tracking branch 'origin/development' into models

Conflicts:
	js/controller.js
	js/views/particle.js
Dima Mironov 10 年之前
父节点
当前提交
5fd5182d07
共有 7 个文件被更改,包括 161 次插入29 次删除
  1. 12 6
      css/start.css
  2. 51 0
      css/style.css
  3. 33 3
      index.html
  4. 51 7
      js/controller.js
  5. 2 1
      js/models/particle.js
  6. 7 4
      js/views/particle.js
  7. 5 8
      start.html

+ 12 - 6
css/start.css

@@ -6,13 +6,16 @@ ul {
     overflow: hidden
 }
 
+li {    
+    width: 200px;
+}
 
 a:link, a:visited {
     display: block;
     width: 120px;
     font-weight: bold;
     color: #FFFFFF;
-    background-color: #F44336;
+    background-color: #006666;
     text-align: center;
     padding: 4px;
     text-decoration: none;
@@ -27,26 +30,29 @@ a:hover, a:active {
 	text-align: center;
 	font-size:48px;
 	color: #FFFFFF;
-    background-color: #F44336;
+    background-color: #006666;
 	padding:1px 16px;
-	width: 100%
+	width: 100%;
+    margin-bottom: 5px;
 }
 
 .container {
 	text-align: center;
 	color: #FFFFFF;
-    background-color: #F44336;
-	padding:1px 16px;
+    background-color: #006666;
+	padding:20px 16px;
 	margin-left: auto;
     margin-right: auto;
     width: 100%;
 	font-size:25px
+
 }
 
 .foot-container {
 	color: #FFFFFF;
-    background-color: #F44336;
+    background-color: #006666;
 	padding:5px 25px;
+    margin-top: 5px;
 	width: 100%
 }
 

+ 51 - 0
css/style.css

@@ -9,3 +9,54 @@ body {
     padding: 0px auto;
     background: #1F2921;
 }
+
+.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;
+}
+
+

+ 33 - 3
index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Snakey Particles</title>
+	<title>Snaky 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>
@@ -12,11 +12,41 @@
 	<script src="js/models/snake.js"></script>
 	<script src="js/controller.js"></script>
 	<script src="js/script.js"></script>
+
+	<!--script src="js/newsticker.js"></script-->
+	<!--script src="js/navigation.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();">
-	<canvas id="demoCanvas" width="500" height="500">
+<body onload="init();">		
+<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 href="index.html">Restart</a></li>
+    	<li><a href="settings.html">Settings</a></li>
+    	<li><a href="scorelist.html">Scorelist</a></li>
+    	<li><a href="about.html">About</a></li>
+    	<li><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">
 		alternate content
 	</canvas>
+	</div>
 </body>
 </html>

+ 51 - 7
js/controller.js

@@ -19,6 +19,8 @@ var Controller = function(){
 		this.possible_collectibles.push({collectible: pp[p], probability: pp[p].appearence_probabilty});
 	}
 
+    createjs.DisplayObject.suppressCrossDomainErrors = true;
+
 	this.stage = new createjs.Stage("demoCanvas");
 }
 
@@ -33,11 +35,18 @@ Controller.prototype.spawn_collectibles = function(){
 	if (!collectible) return;
 	collectible = Object.create(collectible.collectible);
 	var rnd_pos = this.get_random_position();
-	if (! this.is_position_occupied(rnd_pos)) {
-		collectible.position = rnd_pos;
-		this.collectibles.push(collectible);
-		this.add_view(new ParticleView(collectible));
-	}
+	if (!this.is_position_occupied(rnd_pos)) {
+        this.add_collectible(collectible, rnd_pos);
+    }
+}
+
+Controller.prototype.add_collectible = function(collectible, position){
+    collectible.position = position;
+    if(collectible.halflife_time > 0){
+        collectible.decay_time = createjs.Ticker.getTime() + collectible.halflife_time;
+    }
+    this.collectibles.push(collectible);
+    this.add_view(new ParticleView(collectible));
 }
 
 Controller.prototype.start_game = function(){
@@ -131,9 +140,44 @@ Controller.prototype.tick = function(event){
         }
         this.update_views();
 	}
+    this.check_decays();
 	this.stage.update(event);
 }
 
+Controller.prototype.check_decays = function(){
+    for(var pIndex in this.collectibles){
+        var p = this.collectibles[pIndex];
+        if(p.decay_time && p.decays && p.decays.length && createjs.Ticker.getTime() > p.decay_time){
+            var offset = {x: 0, y: 0};
+            var counter = 0;
+            for(var daughterInd in p.decays[0]){
+                if(counter % 2){
+                    offset.x = Math.floor((Math.random() * this.grid_size.x / 10)) % this.grid_size.x;
+                    offset.y = Math.floor((Math.random() * this.grid_size.y / 10)) % this.grid_size.y;
+                } else {
+                    offset.x = - offset.x;
+                    offset.y = - offset.y;
+                }
+                while(this.is_position_occupied(offset)){
+                    offset.x++;
+                    offset.y++;
+                }
+                var daughter = new Particle(p.position);
+                daughter.start_time = createjs.Ticker.getTime();
+                daughter.target = {
+                    time: daughter.start_time + 500,
+                    x: daughter.position.x + offset.x,
+                    y: daughter.position.y + offset.y
+                }
+                daughter.decays = null;
+                this.add_collectible(daughter, p.position);
+                counter++;
+            }
+            this.remove_collectible(p);
+        }
+    }
+}
+
 Controller.prototype.get_next_cell_position = function(){
 	var ph0 = this.snake.physicists[0];
 	var next_cell = Object.create(ph0.position);
@@ -165,10 +209,10 @@ Controller.prototype.is_position_occupied = function(position){
 	return null;
 }
 
-Controller.prototype.hit_test = function(e, particle){
+Controller.prototype.hit_test = function(particle){
 	for (var ph_i in this.snake.physicists){
 		var ph = this.snake.physicists[ph_i];
-		if (ph.view.hitTest(e.x, e.y)) {
+		if (ph.view.hitTest(particle.position.x, particle.position.y)) {
 			this.ph.collect(particle);
 		}
 	}

+ 2 - 1
js/models/particle.js

@@ -13,9 +13,10 @@ var Particle = function(position){
 	this.charge = 0;
 	this.start_time = 1234;
 	this.decay_time = 4444;
+    this.halflife_time = 1000;
 	this.target = null;
 	this.velocity = null;
 	this.points = 125;
 	this.parent_type = "W";
-	this.decays = [{particles: ["W", "W"], probability: .3 }]
+	this.decays = [{particles: ["W", "W"], probability: 1}]
 }

+ 7 - 4
js/views/particle.js

@@ -11,7 +11,7 @@
 				dp.outer_center.x * cs, dp.outer_center.y * cs, dp.outer_radius * cs)
 			.drawCircle(0, 0, cs * dp.outer_radius);
         // this.graphics.beginFill("red").drawCircle(0, 0, window.cell_size * 0.2 / 2);
-      	this.model.animation_function(this); 
+        this.animate();
     }
 
     ParticleView.prototype = new createjs.Shape();
@@ -35,15 +35,18 @@
                 // {guide:{ path:[0,0, 0,200,200,200, 200,0,0,0] }},
                 this.model.target.time - this.model.start_time
 				)
-			.addEventListener("change", function(e){
-				controller.hit_test(e, own_view.model);
-				})
+			.addEventListener("change", function(){
+				controller.hit_test(own_view.model);
+	        })
 			.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;
             });
         }
+
+		this.model.animation_function(this);
+
     }
 
     window.ParticleView = ParticleView;

+ 5 - 8
start.html

@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>SNAKY PARTCILE</title>
+  <title>SNAKY PARTCILES</title>
 </head>
 
 <link rel="stylesheet" href="./css/start.css">
 
 <body>
 
-<header class="head-container"> SNAKY PARTICLE </header>
+<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="settings.html">Settings</a></li>
@@ -22,12 +23,8 @@
 
 
 <footer class="foot-container">
-  <div class="left">
-    <h6>Snaky Particle: An educational particle physics game.</h6>
-  </div>
-  <div align="right">
-    <h6>@CERN-Webfest 2015</h6>
-  </div>
+  <div class="left"> Snaky Particles: An educational particle physics game.</div>
+  <div align="right"> @CERN-Webfest 2015 </div>
 </footer>
 
 </body>