Add hand and some animation

EverNine · Apr 16, 2015 · 02f48ef · 02f48ef
1 parent a718508
commit 02f48ef
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 8 deletions.
diff --git a/public/javascripts/card.js b/public/javascripts/card.js
@@ -1,11 +1,16 @@
 (function() {
 
-    function Card(x,y,n,c) {
+    function Card(n,c) {
         this.Container_constructor();
-        this.x = x;
-        this.y = y;
         this.width = 200;
         this.height = 300;
+        this.regX = 100;
+        this.regY = 150;
+        this.scale = globalScale;
+        this.scaleX = globalScale;
+        this.scaleY = globalScale;
+        this.oriX = null;
+        this.oriY = null;
         if(typeof(n) == "undefined")
         {
             this.drawback(0);

diff --git a/public/javascripts/hand.js b/public/javascripts/hand.js
@@ -0,0 +1,84 @@
+(function() {
+
+function Hand(x ,y, w, h) {
+	this.Container_constructor();
+    this.x = x;
+    this.y = y;
+    this.width = w;
+    this.height = h;
+    this.scale = globalScale;
+    this.scaleX = globalScale;
+    this.scaleY = globalScale;
+
+	this.setup();
+}
+
+var p = createjs.extend(Hand, createjs.Container);
+
+p.setup = function() {
+} ;
+
+p.addCard = function(card){
+    card.on('rollover',function(evt){
+        createjs.Tween.get(card, {loop: false})
+            .to({y: this.oriY - 50, scaleX: this.scale*1.1, scaleY: this.scale*1.1}, 100);
+    });
+    card.on('rollout',function(evt){
+        createjs.Tween.get(card, {loop: false})
+            .to({y: this.oriY, scaleX: this.scale, scaleY: this.scale}, 100);
+    });
+    card.on('click', function(evt){
+        var newX = table.width/2 + Math.random()*table.width/2 - table.width/4;
+        var newY = table.height/2 + Math.random()*table.height/2 - table.height/4;
+        var newR = Math.random()*60 + card.rotation - 30;
+        var pt = table.localToLocal(newX, newY, myCards);
+
+        createjs.Tween.get(card, {loop: false})
+            .to({y: -card.height}, 200)
+            .to({x: pt.x, y: pt.y, rotation: newR}, 100).call(function(){
+                var newCard = card.clone(true);
+                newCard.x = newX;
+                newCard.y = newY;
+                newCard.rotation = newR;
+                newCard.scaleX = card.scale*0.5;
+                newCard.scaleY = card.scale*0.5;
+                table.addCard(newCard);
+                this.parent.removeChild(card);
+                myCards.arrange();
+            });
+    });
+    this.addChild(card);
+} ;
+
+p.arrange = function() {
+    if(this.numChildren == 0)
+        return;
+    var stepX = this.width/this.numChildren*0.6;
+    var stepY = this.height/this.numChildren*1.2;
+    var stepR = (30 - this.numChildren)*0.5;
+    var actualWidth = (this.numChildren - 1)*stepX + this.getChildAt(0).width;
+    var px = (this.width - actualWidth)/2 + this.width*0.5;
+    var py = this.numChildren/2*stepY;
+    var pr = -(this.numChildren - 1)/2*stepR;
+    for (var i = 0, len = this.numChildren; i < len; i++) {
+        this.getChildAt(i).x = px;
+        this.getChildAt(i).y = py;
+        this.getChildAt(i).oriX = px;
+        this.getChildAt(i).oriY = py;
+        this.getChildAt(i).rotation = pr;
+        px += stepX;
+        if (i < len/2 - 2)
+        {
+            py -= stepY;
+        }
+        else if(i >= len/2 + 1 - len%2)
+        {
+            py += stepY;
+        }
+        pr += stepR;
+    }
+    stage.update();
+} ;
+
+window.Hand = createjs.promote(Hand, "Container");
+}());
diff --git a/public/javascripts/table.js b/public/javascripts/table.js
@@ -0,0 +1,26 @@
+(function() {
+
+function Table(x, y, w, h) {
+	this.Container_constructor();
+    this.x = x;
+    this.y = y;
+    this.width = w;
+    this.height = h;
+    this.scale = globalScale;
+    this.scaleX = globalScale;
+    this.scaleY = globalScale;
+
+	this.setup();
+}
+var p = createjs.extend(Table, createjs.Container);
+
+
+p.setup = function() {
+} ;
+
+p.addCard = function(card) {
+    this.addChild(card);
+} ;
+
+window.Table = createjs.promote(Table, "Container");
+}());
diff --git a/views/index.ejs b/views/index.ejs
@@ -13,18 +13,50 @@
 <html>
     <head></head>
     <body onload="init();">
-        <canvas id="demoCanvas" width="1024" height="768"></canvas>
+        <canvas id="demoCanvas" width="1400" height="768"></canvas>
     </body>
     <script src="javascripts/createjs.min.js"></script>
     <script src="javascripts/card.js"></script>
+    <script src="javascripts/hand.js"></script>
+    <script src="javascripts/table.js"></script>
     <script>
 
+var globalScale = 1;
+var canvas = document.getElementById("demoCanvas");
+var stage = new createjs.Stage(canvas);
+var myCards = new Hand(30,canvas.height/4*3,canvas.width/2,canvas.height/3);
+var table = new Table(canvas.width/5, 0, canvas.width/5*3, canvas.height/3*2);
+var update = true;
 
 function init() {
-    var stage = new createjs.Stage("demoCanvas");
-    var card = new Card(50,50);
-    stage.addChild(card);
-    stage.update();
+
+    stage.enableMouseOver(10);
+
+    stage.addChild(table);
+    stage.addChild(myCards);
+    
+    var card = new Card(3,1);
+    myCards.addCard(card);
+    card = new Card(5,2);
+    myCards.addCard(card);
+    card = new Card(6,2);
+    myCards.addCard(card);
+    card = new Card(9,1);
+    myCards.addCard(card);
+    card = new Card(-1,4);
+    myCards.addCard(card);
+    card = new Card(-2,3);
+    myCards.addCard(card);
+    card = new Card(-3,2);
+    myCards.addCard(card);
+    card = new Card(-4,1);
+    myCards.addCard(card);
+    card = new Card(-5,2);
+    myCards.addCard(card);
+    myCards.arrange();
+
+    createjs.Ticker.setFPS(30);
+    createjs.Ticker.addEventListener("tick", stage);
 }
 
     </script>