首頁 探索 說明
註冊 登入
bixel
/
snaky-particles
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

we have a squenched snake so far :smile:

Kevin Heinicke 10 年之前
父節點
990095d4c1
當前提交
81d8483f68
共有 5 個文件被更改，包括 60 次插入 和 123 次删除
統一視圖 顯示文件統計
  1. 11 81
      index.html
  2. 33 11
      js/controller.js
  3. 4 4
      js/models/snake.js
  4. 10 25
      js/script.js
  5. 2 2
      js/views/physicist.js

+ 11 - 81
index.html
查看文件 

@@ -1,89 +1,19 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html>
 
 <html>
 
 <head>
 
 <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.min.js"></script>
 
+	<script src="js/views/physicist.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>
 
 </head>
 
 <body onload="init();">
 
 <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
 
 		alternate content
 
 	</canvas>
 
 	</canvas>
 
 </body>
 
 </body>

+ 33 - 11
js/controller.js
查看文件 

@@ -3,19 +3,39 @@ var Controller = function(){
 
 	this.initial_length = 3;
 
 	this.initial_length = 3;
 
 	this.time_step = 400;
 
 	this.time_step = 400;
 
 	this.collectibles = [];
 
 	this.collectibles = [];
 
+    this.views = [];
 
 	this.snake = new Snake(this.initial_length);
 
 	this.snake = new Snake(this.initial_length);
 
 }
 
 }
 
 
 
+Controller.prototype.update_views = function(){
 
+    for(view in this.views){
 
+        this.views[view].update();
 
+    }
 
+}
 
+
 
 Controller.prototype.start_game = function(){
 
 Controller.prototype.start_game = function(){
 
 	// this.session = new Session();
 
 	// this.session = new Session();
 
+    var c = this;
 
 	this.stage = new createjs.Stage("demoCanvas");
 
 	this.stage = new createjs.Stage("demoCanvas");
 
-	createjs.Ticker.on("tick", this.tick);
 
+	createjs.Ticker.on("tick", function(e){c.tick(e);});
 
 	createjs.Ticker.setFPS(20);
 
 	createjs.Ticker.setFPS(20);
 
 	this.bind_events();
 
 	this.bind_events();
 
 	this.time = 0;
 
 	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);
 
 }
 
 }
 
 
 
 Controller.prototype.bind_events = function(){
 
 Controller.prototype.bind_events = function(){
 
+    var c = this;
 
 	window.onkeydown = function(e){
 
 	window.onkeydown = function(e){
 
 		var direction = null;
 
 		var direction = null;
 
 		switch (e.keyCode){
 
 		switch (e.keyCode){
 
@@ -23,43 +43,45 @@ Controller.prototype.bind_events = function(){
 
 				direction = {x: -1, y: 0};
 
 				direction = {x: -1, y: 0};
 
 				break;
 
 				break;
 
 			case 38:
 
 			case 38:
 
-				direction = {x: 0, y: 1};
 
+				direction = {x: 0, y: -1};
 
 				break;
 
 				break;
 
 			case 39:
 
 			case 39:
 
 				direction = {x: 1, y: 0};
 
 				direction = {x: 1, y: 0};
 
 				break;
 
 				break;
 
 			case 40:
 
 			case 40:
 
-				direction = {x: 0, y: -1};
 
+				direction = {x: 0, y: 1};
 
 				break;
 
 				break;
 
 
 
 		}
 
 		}
 
 		if (direction){
 
 		if (direction){
 
-			this.turn_snake(direction);
 
+			c.turn_snake(direction);
 
 		}
 
 		}
 
 	}
 
 	}
 
 }
 
 }
 
 
 
 Controller.prototype.turn_snake = function(direction){
 
 Controller.prototype.turn_snake = function(direction){
 
-	this.snake.physicsts[0].direction = direction;
 
+	this.snake.physicists[0].direction = direction;
 
 }
 
 }
 
 
 
 
 
 Controller.prototype.tick = function(event){
 
 Controller.prototype.tick = function(event){
 
 	if(event.time - this.time > this.time_step){
 
 	if(event.time - this.time > this.time_step){
 
 		this.time = event.time;
 
 		this.time = event.time;
 
+        var next_cell = this.get_next_cell_position();
 
 		this.snake.move(next_cell);
 
 		this.snake.move(next_cell);
 
+        this.update_views();
 
 	}
 
 	}
 
-	stage.update(event);
 
+	this.stage.update(event);
 
 }
 
 }
 
 
 
 Controller.prototype.get_next_cell_position = function(){
 
 Controller.prototype.get_next_cell_position = function(){
 
-	var ph0 = this.snake.physicsts[0];
 
+	var ph0 = this.snake.physicists[0];
 
 	var next_cell = ph0.position;
 
 	var next_cell = ph0.position;
 
 	next_cell.x += ph0.direction.x;
 
 	next_cell.x += ph0.direction.x;
 
 	next_cell.y += ph0.direction.y;
 
 	next_cell.y += ph0.direction.y;
 
-	if (next_cell.x < 0) next_cell.x = grid_size.x - 1;
 
-	if (next_cell.y < 0) next_cell.y = grid_size.y - 1;
 
-	if (next_cell.x = grid_size.x) next_cell.x = 0;
 
-	if (next_cell.y = grid_size.y) next_cell.y = 0;
 
+	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;
 
 	return next_cell;
 
 }
 
 }

+ 4 - 4
js/models/snake.js
查看文件 

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

+ 10 - 25
js/script.js
查看文件 

@@ -1,34 +1,19 @@
 
-var stage;
 
+var stage, controller;
 
 
 
 function init() {
 
 function init() {
 
-    stage = new createjs.Stage("demoCanvas");
 
+    controller = new Controller;
 
 
 
-    var dummyModel = {position: {x: 10, y: 20}};
 
-    var p = new PhysicistView(dummyModel);
 
-    stage.addChild(p);
 
-
 
-    createjs.Ticker.on("tick", tick);
 
-    createjs.Ticker.setFPS(60);
 
-
 
-    var time = 0;
 
-    
-    function tick(event) {
 
-        time = event.time - time > 400 ? event.time : time;
 
-    
-        // time based
 
-        if(event.time == time){
 
-            dummyModel.position.x += 20;        
-            p.update();
 
-            stage.update(event);
 
-        }
 
-    }
 
+    controller.start_game();
 
 
 
     resize();
 
     resize();
 
 }
 
 }
 
 
 
 function resize() {
 
 function resize() {
 
-    stage.canvas.width = window.innerWidth;
 
-    stage.canvas.height = window.innerHeight;
 
+    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;
 
 }
 
 }
 
-
 
-function

+ 2 - 2
js/views/physicist.js
查看文件 

@@ -7,8 +7,8 @@
 
     PhysicistView.prototype = new createjs.Shape();
 
     PhysicistView.prototype = new createjs.Shape();
 
 
 
     PhysicistView.prototype.update = function(){
 
     PhysicistView.prototype.update = function(){
 
-        this.x = this.model.position.x;
 
-        this.y = this.model.position.y;
 
+        this.x = cell_size * this.model.position.x;
 
+        this.y = cell_size * this.model.position.y;
 
     }
 
     }
 
 
 
     window.PhysicistView = PhysicistView;
 
     window.PhysicistView = PhysicistView;