「解説作成用」の編集履歴（バックアップ）一覧はこちら

「解説作成用」(2013/02/05 (火) 19:49:05) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

**解説作成用
コアカード、エリートカード、チャンピオンカードを上の空白に出して動かす事ができます。
スクリーンショットを撮って解説等にご利用ください。

※速く動かしすぎるとおかしくなることがあります。
※不完全であることをご了承のうえご利用ください。

[[使用例>http://bit.ly/XdXgMy]]

#divid(canvasarea){}
#divid(debug){}
#divid(debug2){}
#divid(debug3){}
----
**コメント
#comment_num2(,num=10,size=100,log=解説作成用ログ,noname,vsize=1)

#javascript(){{
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ocanvas.org/source/ocanvas-2.2.2.min.js"></script>
  <script type="text/javascript">
    var cardWidth = 60;
    var cardMargin = 10;
    var cardStrokeWidth = 5;
    var gridAreaStart = {x:10, y:10};
    var idPool = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64];
    
    //デバッグ用
    function debug(text){
      $("#debug").text(text);
    }
    
    //URL短縮用 bit.ly
function get_short_url(long_url, func)
{
    $.getJSON(
        "http://api.bitly.com/v3/shorten?callback=?", 
        { 
            "format": "json",
            "apiKey": "R_a7aa14904da006c24dbe346efad48a67",
            "login": "o_3v8tb0a47a",
            "longUrl": long_url
        },
        function(response)
        {
            func(response.data.url);
        }
    );
}


   //グリッド座標をキャンバス上の座標に変換する
    function gridToCoords(grid){
      return {
        x:gridAreaStart.x + grid.x * (cardWidth + cardMargin) + cardWidth / 2,
        y:gridAreaStart.y + grid.y * (cardWidth + cardMargin) + cardWidth / 2,
      };
    }
    
   //キャンバス上の座標をグリッド座標に変換する
    function coordsToGrid(coords){
      return {
        x: Math.floor((coords.x - gridAreaStart.x) / (cardWidth + cardMargin)),
        y: Math.floor((coords.y - gridAreaStart.y) / (cardWidth + cardMargin)),
      };
    }
    
    function naverGrid(coords, diff){
      return {x: coords.x + diff.x, y:coords.y + diff.y};
    }
    
    function cardArea(coords, type){
      var area = [];
      switch (type){
        case 'core':
        case 'wall':
          area = [coords];
          break;
        case 'elite':
          area = [coords,naverGrid(coords,{x:0,y:1})];
          break;
        case 'champion':
          area = [coords,naverGrid(coords,{x:0,y:1}),naverGrid(coords,{x:1,y:0}),naverGrid(coords,{x:1,y:1})];
          break;
        case 'h3':
          area = [coords,naverGrid(coords,{x:1,y:0}),naverGrid(coords,{x:2,y:0})];          break;
        case 'v3':
          area = [coords,naverGrid(coords,{x:0,y:1}),naverGrid(coords,{x:0,y:2})];          break;
      }
      return area;
    }
    
    //オブジェクトの定義
    //判定用グリッド
    function cardGrid(width, height){
      this.data = new Array(12);
      this.data_buff = new Array(12); //バッファ
      this.width = width;
      this.height = height;
      for(i=0;i<12;i++){
        this.data[i] = new Array(8);
        this.data_buff[i] = new Array(8);
        for(j=0;j<8;j++){
          this.data[i][j] = 0;
          this.data_buff[i][j] = 0;
        }
      }
      
      //関数
      //現在のグリッドデータをバッファに保存する
      this.saveBuff = function(){
        for(i=0;i<this.data.length;i++){
          for(j=0;j<this.data[i].length;j++){
            this.data_buff[i][j] = this.data[i][j];
          }
        }        
      };
      
      //判定用グリッドの変数としてoCanvasを代入する
      this.setCanvas = function(canvas){this.canvas = canvas;};
      
      //グリッドの(x,y)座標からカードを取り出したり保存する関数
      this.get = function(coords){return this.data[coords.x][coords.y];};
      this.set = function(coords,value){this.data[coords.x][coords.y] = value;};
      
      //引数の座標がグリッド内かどうかを判定する
      this.isIn = function(coords){return (coords.x >=0 && coords.x < this.width && coords.y >= 0 && coords.y < this.height);};
      this.isInArea = function(area){
        var result = true;
        for(i = 0;i < area.length;i++){
          result = result && this.isIn(area[i]);
        }
        return result;
      };
      
      //引数の座標が空いているか確認する
      this.isBlank = function(coords){return (this.get(coords) == 0)};
      this.isBlankArea = function(area){
        var isblank = true;
        for (i=0;i < area.length;i++){
          isblank = isblank && this.isBlank(area[i]);
        }
        return isblank;
      };
      
      //引数の座標が空いているか、引数2のカードと同じかどうか確認する      
      this.isBlankOrSameCard = function(coords, card){
       area = cardArea(coords, card.type);
	isblank =true;
        for (i=0;i < area.length;i++) {
          isblank = (isblank && (this.isBlank(area[i]) || (card.id == this.get(area[i]).id)));
        }
        return isblank;
      };
      
      //引数1の座標に、引数2のカードを代入する
      this.setCard = function(coords, card){
        area = cardArea(coords, card.type);
        if(this.isBlankArea(area)){
          for (i=0;i < area.length;i++){
            this.set(area[i], card);
          }
        } else {return false;}
        return true;
      };
      this.removeCard = function(coords){
        card = this.get(coords);
        area = cardArea(coords, card.type);
        for (i=0;i < area.length;i++){this.set(area[i], 0);}
      };
      
      this.addCard = function(card){
        this.setCard(card.coords, card);
      };

      //引数の座標にあるカードが移動可能かどうか判定する
      this.isMovable = function(coords){
        card = this.get(coords);
        if(card.type == 'wall'){return false;};
        if(card.type == 'champion' && card.type == 'elite' && coords.y + 1 == this.height - 1){return true;}
        l = card.type == 'champion'?2:1;
        result = true;
        for(i=0;i<l;i++){
          for(j = coords.y;j < this.height;j++){
            result = result && (this.isBlank({x:coords.x + i,y:j}) ||
                                this.get({x:coords.x + i,y:j}).id == card.id);
          }
        }
        return result;
      };
      
      //引数1の座標のカードを引数2の座標へ移動する
      this.moveCard = function(oldCoords,newCoords){
        card = this.get(oldCoords);
        area = cardArea(newCoords, card.type);
        if(this.isBlankOrSameCard(newCoords, card)){
          this.removeCard(oldCoords);
          this.setCard(newCoords, card);
        } else {return false;}
        //this.printArray();
        return true;
      };
      
      //引数1のX座標においてカードを配置するY座標を返す
      this.getFirstBlankY = function(x, card){
        area = card.type == 'champion'?[x,x+1]:[x];
        for(j = this.height - 1;j >= 0;j--){
          var isblank = true;
          for (i=0;i < area.length;i++){
            isblank = isblank && (this.isBlank({x:area[i],y:j}) || 
                                  this.get({x:area[i],y:j}).id == card.id);
          }
          if(isblank == false && j !== this.height - 1){return j + 1;}
        }
        if (j == -1){return 0;}
        return -1;
      };
      
      //引数の座標のカードを除き、グリッド内のカードを全て移動不可にする
      this.lockAll = function(coords){
        for(i=0;i<this.data.length;i++){
          for(j=0;j<this.data[i].length;j++){
            if(i !== coords.x && j !== coords.y && this.data[i][j] !== 0){
              this.data[i][j].lock();
            }
          }
        }        
      };
      
      //グリッド内のカードを全て移動可にする
      this.unlockAll = function(){
        for(i=0;i<this.data.length;i++){
          for(j=0;j<this.data[i].length;j++){
            if(this.data[i][j] !== 0){
              this.data[i][j].unlock();
            }
          }
        }        
      };
      
      return this;
    }

   //デバッグ用 グリッドの中身をTableに書き出す
  cardGrid.prototype.printArray = function(){
    table = $("<table />");
    for(j = 0;j < 8;j++){
      tr = $("<tr />");
      for(i = 0;i < 11;i++){
        value = this.get({x:i,y:j});
        if(value == 0){value={type:"",id:"",attribute:"", rgb: ""};}
        tr.append($("<td />").text(value.id + "," + value.type +"," + value.rgb));
      }
      table.append(tr);
    }
//  $("#debug2").text(text);
    $("#debug2 table").replaceWith(table);
  }
    
    //デバッグ用 グリッドの中身を3次元配列の定義として書き出す
  cardGrid.prototype.printArray2 = function(){
    arrayText = "[";
    for(j = 0;j < 8;j++){
      arrayText = arrayText + "[";
      for(i = 0;i < 11;i++){
        value = this.get({x:i,y:j});
        if(value == 0){value={type:"",id:"0",attribute:"", rgb: ""};}
        arrayText = arrayText + "[" + value.id + ",'" + value.type +"','" + value.rgb +"'],";
      }
      arrayText = arrayText + "],";
    }
    arrayText = arrayText + "]";
    return arrayText;
  }
    
    cardGrid.prototype.isCoreAndSameRGB = function(area){
      var result = true;
      var card = this.get(area[0]);
      //debug("isCoreAndSame");
      for(_i=0;_i<area.length;_i++){
        result = result && this.get(area[_i]).type == 'core' && this.get(area[_i]).rgb == card.rgb;
      }
      return result;
    }
      
    cardGrid.prototype.scanRow = function(col){
      for(i = 0;i < this.width - 2;i++){
        area = cardArea({x:i,y:col} ,'h3');
        if (this.isCoreAndSameRGB(area)){
          rgb = this.get({x:i,y:col}).rgb;
          //alert("wall");
          i += 3;
          while(i < this.width && this.get({x:i,y:col}).type == 'core' && this.get({x:i,y:col}).rgb == rgb){
            area.push({x:i,y:col});
            i++;
          }
          for(_j = 0;_j < area.length;_j++){
            this.get(area[_j]).toBeWall();
          }
        }        
      }
    }
    
    cardGrid.prototype.isMakingWall = function(){
      for(j=0;j<this.height;j++){
        //        var isWall = true;
        this.scanRow(j);
      }
      return result;
    }
    
    cardGrid.prototype.scan = function(){
      /*      for(i = 0;i < this.width;i++){
        for(j = 0;j < this.height;j++){
          if(i < this.width - 2){
            scanArea = cardArea({x:i,y:j},'h3');
            if(this.get()){}
          }
          if(j < this.height - 2){
          }
        }
      }*/
    }  
 
    //カード
    function card(x, y, width, height, rgb, hp, gp, chargeturn, attribute, text){
      this.coords = {x: x, y: y};
      this.origin = {x: cardWidth/2, y: cardWidth/2};
      this.width = width;
      this.height = height;
      this.join = "round";
      this.hp = hp; //ヒットポイント
      this.gp = gp; //防御力
      this.chargeturn = chargeturn;
      this.attribute = attribute;
      this.text = text;
      this.type = 'card';
      this.id = 0;
      this.drawText = new Object();
      this.drawShape = new Object();
      this.rgb = rgb;

      switch (rgb){
      case 'r':
        this.fill = '#666';
        this.stroke = cardStrokeWidth +' #F33';
        break;
      case 'g':
        this.fill = '#666';
        this.stroke = cardStrokeWidth +' #0B0';
        break;
      case 'b':
        this.fill = '#666';
        this.stroke = cardStrokeWidth +' #3AF';
        break;
      case 'wall':
        this.fill = '#666';
        this.stroke = cardStrokeWidth +' #333';
        break;
      case 'dustbox':
        this.fill = '#aaa';
        this.stroke = cardStrokeWidth +' #666';
        break;
      }
      
      this.setRGB = function(rgb){
        switch (rgb){
        case 'r':
          this.fill = '#666';
          this.stroke = cardStrokeWidth +' #F33';
          break;
        case 'g':
          this.fill = '#666';
          this.stroke = cardStrokeWidth +' #0B0';
          break;
        case 'b':
          this.fill = '#666';
          this.stroke = cardStrokeWidth +' #3AF';
          break;
        case 'wall':
          this.fill = '#666';
          this.stroke = cardStrokeWidth +' #333';
          break;
        }        
      };
      
      this.cloning = function(){
        _card = new (this.constructor);
       for (var p in this) {
	            if (!this.hasOwnProperty(p)) continue;
	            _card[p] = typeof this[p] == 'object' ? _card[p] : this[p];
	        }
        _card.coords = {x:this.coords.x, y:this.coords.y};
        _card.origin = {x:this.origin.x,y:this.origin.y};
        _card.type = this.type;
        _card.rgb = this.rgb;
        return _card;
      }
      
      this.setId = function(){
        this.id = idPool[0];
        idPool.shift();
      };
      
      this.lock = function(){
        this.drawShape.dragAndDrop(false);
      }
      this.unlock = function(cGrid){
        this.drawShape.dragAndDrop({ 
          changeZindex: true,

          start: function(){
            this.oldGrid = coordsToGrid({x: this.x, y:this.y});
            this.oldCoords = {x: this.x, y:this.y};
            this.scale(1.5,1.5);
            if(this.menu){
              this.oldGrid = coordsToGrid({x: this.x/0.65, y:this.y});
            }
            //cGrid.lockAll(this.oldGrid);
            //        $("#debug2").text(this.oldGrid.x);
            //this.children[1].text = "test";
            //$("#debug3").text(this.oldGrid.x + "," + this.oldGrid.y + "," + this.x + "," + this.y);
          },
           
          
          
          move:function(){
            //debug("mousemove");
            grid = coordsToGrid({x: this.x, y: this.y});
            coords = gridToCoords(grid);
            //ゴミ箱に入れた場合
            tmp_x = this.width > cardWidth?this.x + cardWidth/2:this.x;
            tmp_y = this.height > cardWidth?this.y + cardWidth/2:this.y;
            
            if(tmp_x > dustbox.drawShape.x - dustbox.drawShape.width / 2&& 
               tmp_x < dustbox.drawShape.x + dustbox.drawShape.width / 2&& 
               tmp_y > dustbox.drawShape.y - dustbox.drawShape.height / 2&& 
               tmp_y < dustbox.drawShape.y + dustbox.drawShape.height / 2 &&
               this.menu == false){
              this.scale(0.65,0.65);
            } else {
              this.scale(1.5,1.5);
            }
            /*this.children[1].text = "new(" + grid.x + "," + grid.y + ") \n" +
                            "old(" + this.oldGrid.x + "," + this.oldGrid.y + ") \n" +
                            "(" + (this.x) + "," + (this.y) + ")";
            */   
          },
          
          end:function(){
          //         if(this.selected){
            this.scale(1,1);
            grid = coordsToGrid({x: this.x, y: this.y});
            dustbox = cGrid.get({x:0,y:7});
              //ゴミ箱に入れた場合
            tmp_x = this.width > cardWidth?this.x + cardWidth/2:this.x;
            tmp_y = this.height > cardWidth?this.y + cardWidth/2:this.y;
            
            if(tmp_x > dustbox.drawShape.x - dustbox.drawShape.width / 2&& 
               tmp_x < dustbox.drawShape.x + dustbox.drawShape.width / 2&& 
               tmp_y > dustbox.drawShape.y - dustbox.drawShape.height / 2&& 
               tmp_y < dustbox.drawShape.y + dustbox.drawShape.height / 2 &&
               this.menu == false){
              idPool.push(cGrid.get(this.oldGrid).id);
              cGrid.removeCard(this.oldGrid);
              cGrid.canvas.removeChild(this);
              
            }else if(cGrid.isIn(grid) && cGrid.isMovable(this.oldGrid)){
              yy = cGrid.getFirstBlankY(grid.x, cGrid.get(this.oldGrid));
              if (yy >= 0){grid.y = yy;}
              if (cGrid.moveCard(this.oldGrid, grid)){
                coords = gridToCoords(grid);
                this.animate(coords);
                if(this.menu){
                  this.menu = false;
                  var cloneCard = cGrid.get(grid).cloning();
                  //$("#debug4").text("typeof this");
                  cloneCard.coords.x = this.oldGrid.x;
                  cloneCard.coords.y = this.oldGrid.y;
                  cloneCard.display(cGrid.canvas);
                  cloneCard.drawShape.scale(0.65,0.65);
                  cloneCard.drawShape.x = this.oldCoords.x;
                  cloneCard.drawShape.y = this.oldCoords.y;
                  cloneCard.unlock(cGrid);
                  cloneCard.setId();
                  cloneCard.drawShape.menu = true;
                  cGrid.addCard(cloneCard);
                  cGrid.canvas.addChild(cloneCard.drawShape);
                  //$("#debug4").text(cloneCard.attribute);
                }
              } else {
                //グリッド内で動かせない場合
                if(this.menu){
                  this.scale(0.65,0.65);
                  this.animate(this.oldCoords);
                } else {
                  this.animate(gridToCoords(this.oldGrid));
                }
              }
            } else {
              //移動先がグリッド外の場合
              if(this.menu){
                this.scale(0.65,0.65);
                this.animate(this.oldCoords);
              } else {
                this.animate(gridToCoords(this.oldGrid));
              }
            }
            grid2 = coordsToGrid({x:this.x, y:this.y});
            //this.children[1].text = "(" + grid.x + "," + grid.y + ") \n" +
            //                      "(" + grid2.x + "," + grid2.y + ") \n";
            //cGrid.isMakingWall();
            //cGrid.unlockAll();
            
          }
          
        });
      }

      this.display = function(canvas){
        var coords = gridToCoords({x: this.coords.x, y: this.coords.y});
        this.drawShape = canvas.display.rectangle({
	      x: coords.x,
	      y: coords.y,
	      origin: this.origin,
	      width: this.width,
	      height: this.height,
	      fill: this.fill,
	      stroke: this.stroke,
	      join: this.join,
        });
        this.drawFrame = canvas.display.rectangle({
	      x: this.width > cardWidth? this.width / 2 - this.origin.x:0,
	      y: this.height > cardWidth?this.height / 2 - this.origin.y:0,
	      origin: { x: "center", y: "center" },
	      width: this.width+6,
	      height: this.height+6,
	      fill: "transparent",
	      stroke: "1 #000",
	      join: this.join,
        });
        this.drawShape.addChild(this.drawFrame);

        //テキストの描画位置は親のoriginを基準とするのでx,yで調整
        this.drawText = canvas.display.text({
	      x: this.width > cardWidth? this.width / 2 - this.origin.x:0,
	      y: this.height > cardWidth?this.height / 2 - this.origin.y:0,
	      origin: { x: "center", y: "center" },
          align: "center",
          font: "bold 13px sans-serif",
          text: this.text,
          fill: "#333",
        });
        this.drawShape.addChild(this.drawText);
 
        return this.drawShape;
      }
        
        this.toBeWall = function(){
          this.drawShape.stroke = cardStrokeWidth +' #444';
          this.drawText.text = "wall";
          this.type = "wall";
        };
      
      this.moveOnGrid = function(grid){
        coords = gridToCoords(grid);
        this.drawShape.animate(coords);        
      };
     return this;
    }
        
    // コアのプロトタイプ
    function corecard(x, y, rgb, hp, gp, chargeturn, attribute, text){
      card.call(this, x, y, cardWidth, cardWidth, rgb, hp, gp, chargeturn, attribute, text);
      this.type = 'core';
      return this;
    }
    //cardクラスの継承
    corecard.prototype = new card();

    // エリートのプロトタイプ
    function elitecard(x, y, rgb, hp, gp, chargeturn, attribute, text){
      card.call(this, x, y, cardWidth, cardWidth * 2 + cardMargin, rgb, hp, gp, chargeturn, attribute, text);
      this.type = 'elite';
      return this;
    }
    elitecard.prototype = new card();

    // チャンピオンのプロトタイプ
    function championcard(x, y, rgb, hp, gp, chargeturn, attribute, text){
      card.call(this, x, y, cardWidth * 2 + cardMargin, cardWidth * 2 + cardMargin, rgb, hp, gp, chargeturn, attribute, text);
      this.type = 'champion';
      return this;
    }
    championcard.prototype = new card(); 

    
    
$(document).ready(function(){
      var cGrid = new cardGrid(8,6);
        //debug用
  $("#debug2").append($("<table />"));

  //canvasを追加する
  $("#canvasarea").append($("<canvas />").attr({id: "canvas",width: "570", height: "570"}));
      
  //URL生成ボタン
  $("#canvasarea").after(("<button id='generateURL'>URL生成</button><input id='URL' type='text' size='90' />"));
  
  $("button#generateURL").click(function(){
    
    var long_url = location.protocol + "//" + location.host + location.pathname +"?"+ cGrid.printArray2();
    get_short_url(long_url, function(short_url) {
      $("input#URL").val(short_url);
    });
  });

    // Touch操作時にWindowスクロールなどを止める
      $('canvas').bind('touchstart', function() {
    	event.preventDefault();    
  	  });

      //canvasの作成
      var canvas = oCanvas.create({
        canvas: "#canvas"
      });
  
      cGrid.setCanvas(canvas);
  
  
      rgbarray = ['r','g','b'];
      
      cardBox = new Array(16);
      for(i=0;i<8;i++){
        for(j=0;j<2;j++){
          cardBox[i * 2 + j] = new corecard(i,j,rgbarray[(i*2+j)%3], 30,30,2,'ice','コア');
        }
      }
      //cardBox[1] = new elitecard(1,0,30,30,2,'fire','エリート');
      //cardBox[2] = new championcard(2,0,30,30,2,'thunder','チャンピオン');

      var selectedCard = false;
      var oldCoords = {x:0, y:0};
      var oldGrid = {x:0, y:0};

      //メニューを追加
      var menuBox = canvas.display.rectangle({
	      x: 5,
	      y: 435,
        width: 560,
        height: 130,
        //origin: {x:this.width/2,y:0},
        stroke: '2 #999',
	      fill: "#FFF"
      });
  
      canvas.addChild(menuBox);

      menu_dustbox = new corecard(0,7,'dustbox',1,1,1,'fire','ゴミ箱');
      menu_dustbox.display(canvas);
      menu_dustbox.drawShape.x = menuBox.x + menu_dustbox.origin.x*3;
      menu_dustbox.drawShape.y = menuBox.y + menu_dustbox.origin.y*3;
      menu_dustbox.setId();
      cGrid.addCard(menu_dustbox);
      canvas.addChild(menu_dustbox.drawShape);
  
      menu_coreR = new corecard(0,6,'r',1,1,1,'fire','コア');
      menu_coreR.display(canvas);
      menu_coreR.drawShape.scale(0.65,0.65); 
      menu_coreR.drawShape.x = menuBox.x + menu_coreR.origin.x;
      menu_coreR.drawShape.y = menuBox.y + menu_coreR.origin.y;
      menu_coreR.setId();
      cGrid.addCard(menu_coreR);
      canvas.addChild(menu_coreR.drawShape);
  
      menu_coreG = new corecard(1,6,'g',1,1,1,'fire','コア');
      menu_coreG.display(canvas);
      menu_coreG.drawShape.scale(0.65,0.65); 
      menu_coreG.drawShape.x = menuBox.x + menu_coreR.drawShape.x + menu_coreG.width*0.65+2;
      menu_coreG.drawShape.y = menuBox.y + menu_coreG.origin.y;
      menu_coreG.setId();
      cGrid.addCard(menu_coreG);
      canvas.addChild(menu_coreG.drawShape);
  
      menu_coreB = new corecard(2,6,'b',1,1,1,'fire','コア');
      menu_coreB.display(canvas);
      menu_coreB.drawShape.scale(0.65,0.65); 
      menu_coreB.drawShape.x = menuBox.x + menu_coreG.drawShape.x + menu_coreB.width*0.65+2;
      menu_coreB.drawShape.y =  menuBox.y + menu_coreB.origin.y;
      menu_coreB.setId();
      cGrid.addCard(menu_coreB);
      canvas.addChild(menu_coreB.drawShape);
  
      menu_eliteR = new elitecard(3,6,'r',1,1,1,'fire','エリート');
      menu_eliteR.display(canvas);
      menu_eliteR.drawShape.scale(0.65,0.65); 
      menu_eliteR.drawShape.x = menuBox.x + menu_coreB.drawShape.x + menu_coreG.width*0.65+2;
      menu_eliteR.drawShape.y = menuBox.y + menu_eliteR.origin.y;
      menu_eliteR.setId();
      cGrid.addCard(menu_eliteR);
      canvas.addChild(menu_eliteR.drawShape);
  
      menu_eliteG = new elitecard(4,6,'g',1,1,1,'fire','エリート');
      menu_eliteG.display(canvas);
      menu_eliteG.drawShape.scale(0.65,0.65); 
      menu_eliteG.drawShape.x = menuBox.x + menu_eliteR.drawShape.x + menu_coreG.width*0.65+2;
      menu_eliteG.drawShape.y = menuBox.y + menu_eliteG.origin.y;
      menu_eliteG.setId();
      cGrid.addCard(menu_eliteG);
      canvas.addChild(menu_eliteG.drawShape);
  
      menu_eliteB = new elitecard(5,6,'b',1,1,1,'fire','エリート');
      menu_eliteB.display(canvas);
      menu_eliteB.drawShape.scale(0.65,0.65); 
      menu_eliteB.drawShape.x = menuBox.x + menu_eliteG.drawShape.x + menu_coreG.width*0.65+2;
      menu_eliteB.drawShape.y = menuBox.y + menu_eliteG.origin.y;
      menu_eliteB.setId();
      cGrid.addCard(menu_eliteB);
      canvas.addChild(menu_eliteB.drawShape);
  
      menu_champR = new championcard(6,6,'r',1,1,1,'fire','チャンピオン');
      menu_champR.display(canvas);
      menu_champR.drawShape.scale(0.65,0.65);   
      menu_champR.drawShape.x = menuBox.x + menu_eliteB.drawShape.x + menu_eliteR.width*0.65+2;
      menu_champR.drawShape.y = menuBox.y + menu_champR.origin.y;
      menu_champR.setId();
      cGrid.addCard(menu_champR);
      cGrid.canvas.addChild(menu_champR.drawShape);

      menu_champG = new championcard(8,6,'g',1,1,1,'fire','チャンピオン');
      menu_champG.display(canvas);
      menu_champG.drawShape.scale(0.65,0.65); 
      menu_champG.drawShape.x = menuBox.x + menu_champR.drawShape.x + menu_champR.width*0.65+2;
      menu_champG.drawShape.y = menuBox.y + menu_champG.origin.y;
      menu_champG.setId();
      cGrid.addCard(menu_champG);
      cGrid.canvas.addChild(menu_champG.drawShape);
  
      menu_champB = new championcard(10,6,'b',1,1,1,'fire','チャンピオン');
      menu_champB.display(canvas);
      menu_champB.drawShape.scale(0.65,0.65); 
      menu_champB.drawShape.x = menuBox.x + menu_champG.drawShape.x + menu_champR.width*0.65+2;
      menu_champB.drawShape.y = menuBox.y + menu_champB.origin.y;
      menu_champB.setId();
      cGrid.addCard(menu_champB);
      canvas.addChild(menu_champB.drawShape);

  
  //menuBox.scale(0.65,0.65);

      menu_coreR.drawShape.menu = true;
      menu_coreG.drawShape.menu = true;
      menu_coreB.drawShape.menu = true;
      menu_eliteR.drawShape.menu = true;
      menu_eliteG.drawShape.menu = true;
      menu_eliteB.drawShape.menu = true;
      menu_champR.drawShape.menu = true;
      menu_champG.drawShape.menu = true;
      menu_champB.drawShape.menu = true;
      menu_coreR.unlock(cGrid);
      menu_coreG.unlock(cGrid);
      menu_coreB.unlock(cGrid);
      menu_eliteR.unlock(cGrid);
      menu_eliteG.unlock(cGrid);
      menu_eliteB.unlock(cGrid);
      menu_champR.unlock(cGrid);
      menu_champG.unlock(cGrid);
      menu_champB.unlock(cGrid);
      /*
      for (c=0;c < cardBox.length;c++){
      //カードをGridに追加
        cardBox[c].setId();
        cGrid.addCard(cardBox[c]);
        //カードを描画
        cardBox[c].display(canvas);
        canvas.addChild(cardBox[c].drawShape);
        cardBox[c].unlock(cGrid);

        
      }
      */
      //      cardBox[0].display(canvas);
      //cGrid.printArray();

  if(location.search !== ""){

    var array = eval(location.search.substring(1));  
    
  originalCorecard = new corecard(0,0,"r",1,1,1,'','コア');
  originalElitecard = new elitecard(0,0,"r",1,1,1,'','エリート');
  originalChampcard = new championcard(0,0,"r",1,1,1,'','チャンピオン');
  for(y = 0;y < 6;y++){
    for(x = 0;x < 8;x++){
      if(array[y][x][1] !== '' && cGrid.isBlank({x:x,y:y})){
        type = array[y][x][1];
        rgb = array[y][x][2];
        switch(type){
          case "core":
            cloneCard = originalCorecard.cloning();
            break;
          case "elite":
            cloneCard = originalElitecard.cloning();
            break;
          case "champion":
            cloneCard = originalChampcard.cloning();
            break;
          }
        cloneCard.coords.x = x;
        cloneCard.coords.y = y;
        cloneCard.rgb = rgb;
        cloneCard.setRGB(rgb);
        cloneCard.setId();
        cloneCard.display(canvas);
        cloneCard.drawShape.menu = false;
        cGrid.addCard(cloneCard);
        canvas.addChild(cloneCard.drawShape);
        cloneCard.unlock(cGrid);
      }
    }
  }
}
      
  //debug("メインの最後");
    });
  </script>
}}

**解説作成用
コアカード、エリートカード、チャンピオンカードを上の空白に出して動かす事ができます。
スクリーンショットを撮って解説等にご利用ください。

※速く動かしすぎるとおかしくなることがあります。
※不完全であることをご了承のうえご利用ください。

[[使用例>http://bit.ly/XdXgMy]]

#divid(canvasarea){}
#divid(debug){}
#divid(debug2){}
#divid(debug3){}
----
**コメント
#comment_num2(,num=10,size=100,log=解説作成用ログ,noname,vsize=1)

#javascript(){{
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ocanvas.org/source/ocanvas-2.2.2.min.js"></script>
  <script type="text/javascript">
    var cardWidth = 60;
    var cardMargin = 10;
    var cardStrokeWidth = 5;
    var gridAreaStart = {x:10, y:10};
    var idPool = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64];
    
    //デバッグ用
    function debug(text){
      $("#debug").text(text);
    }
    
    //URL短縮用 bit.ly
    function get_short_url(long_url, func){
      $.getJSON(
        "http://api.bitly.com/v3/shorten?callback=?", 
        { 
          "format": "json",
          "apiKey": "R_a7aa14904da006c24dbe346efad48a67",
          "login": "o_3v8tb0a47a",
          "longUrl": long_url
        },
        function(response){
            func(response.data.url);
        }
      );
    }
   
    function Sleep(T){ 
      var d1 = new Date().getTime(); 
      var d2 = new Date().getTime(); 
      while( d2 < d1+1000*T ){    //T秒待つ 
        d2=new Date().getTime(); 
      } 
      return; 
    }    
  
    //グリッド座標をキャンバス上の座標に変換する
    function gridToCoords(grid){
      return {
        x:gridAreaStart.x + grid.x * (cardWidth + cardMargin) + cardWidth / 2,
        y:gridAreaStart.y + grid.y * (cardWidth + cardMargin) + cardWidth / 2,
      };
    }
    
   //キャンバス上の座標をグリッド座標に変換する
    function coordsToGrid(coords, origin){
      return {
        x: Math.floor((coords.x - origin.x - gridAreaStart.x + cardWidth/2) / (cardWidth + cardMargin)),
        y: Math.floor((coords.y - origin.y - gridAreaStart.y + cardWidth/2) / (cardWidth + cardMargin)),
      };
    }
  
    function menu_gridToCoords(grid, origin){
      return {x:5 + Math.floor((grid.x * (cardWidth + cardMargin)+origin.x) * 0.65) + 10 ,
                  y:435+ Math.floor(((grid.y - 6) * (cardWidth + cardMargin)+origin.y) * 0.65)+10};
    }
  
    function menu_coordsToGrid(coords, origin){
      return {x: Math.round(((coords.x -15)/0.65 - origin.x)/(cardWidth + cardMargin)),
                  y: Math.round(((coords.y -445)/0.65 - origin.y)/(cardWidth + cardMargin))+6};
    }    
    
    function naverGrid(grid, diff){
      return {x: grid.x + diff.x, y:grid.y + diff.y};
    }
    
    function cardArea(grid, type){
      var area = [];
      switch (type){
        case 'core':
        case 'wall':
          area = [grid];
          break;
        case 'elite':
          area = [grid,naverGrid(grid,{x:0,y:1})];
          break;
        case 'champion':
          area = [grid,naverGrid(grid,{x:0,y:1}),naverGrid(grid,{x:1,y:0}),naverGrid(grid,{x:1,y:1})];
          break;
        case 'h3':
          area = [grid,naverGrid(grid,{x:1,y:0}),naverGrid(grid,{x:2,y:0})];
          break;
        case 'v3':
          area = [grid,naverGrid(grid,{x:0,y:1}),naverGrid(grid,{x:0,y:2})];
          break;
      }
      return area;
    }
    
    //オブジェクトの定義
    //判定用グリッド
    function cardGrid(width, height){
      this.data = new Array(12);
      this.data_buff = new Array(12); //バッファ
      this.width = width;
      this.height = height;
      this.canvas = new Object;
      for(i=0;i<12;i++){
        this.data[i] = new Array(8);
        this.data_buff[i] = new Array(8);
        for(j=0;j<8;j++){
          this.data[i][j] = 0;
          this.data_buff[i][j] = 0;
        }
      }
      
      //関数
      //現在のグリッドデータをバッファに保存する
      this.saveBuff = function(){
        for(i=0;i<this.data.length;i++){
          for(j=0;j<this.data[i].length;j++){
            this.data_buff[i][j] = this.data[i][j];
          }
        }        
      };
      
      //判定用グリッドの変数としてoCanvasを代入する
      this.setCanvas = function(canvas){
        this.canvas = canvas;
      };
      
      //グリッドの(x,y)座標からカードを取り出しす関数
      this.get = function(grid){
        return this.data[grid.x][grid.y];
      };
      
      //グリッドの(x,y)座標にカードを代入する関数
      this.set = function(coords,value){
        this.data[coords.x][coords.y] = value;
      };
      
      //引数の座標がグリッド内かどうかを判定する
      this.isIn = function(coords){
        return (coords.x >=0 && coords.x < this.width && coords.y >= 0 && coords.y < this.height);
      };
      
      this.isInArea = function(area){
        for(i = 0;i < area.length;i++){
          if(!this.isIn(area[i])){
            return false;
          }
        }
        return true;
      };
      
      //引数の座標が空いているか確認する
      this.isBlank = function(grid){
        return (this.get(grid) == 0);
      };
      
      this.isBlankArea = function(area){
        for (i=0;i < area.length;i++){
          if(!this.isBlank(area[i])){
            return false;
          }
        }
        return true;
      };
      
      //引数の座標が空いているか、引数2のカードと同じかどうか確認する      
      this.isBlankOrSameCard = function(grid, card){
        if(this.isBlank(grid)){
          return true;
        }
        if (card.id == this.get(grid).id){
          return true;
        }
        return false;
      }
        
      this.isBlankOrSameCardArea = function(area, card){
        for (i=0;i < area.length;i++) {
          if(!this.isBlankOrSameCard(area[i], card)){
            return false;
          }
        }
        return true;
      };
      
      //引数1の座標が空いている事を確認した上で、引数2のカードを代入する
      this.setCard = function(grid, card){
        var area = cardArea(grid, card.type);
  
        if(this.isBlankArea(area)){
          for (i=0;i < area.length;i++){
            this.set(area[i], card);
          }
          card.grid = grid;
          return true;
        } 
        return false;
      };
      
      //カードを再代入する（チャージ用）
      this.resetCard = function(card){
        this.removeCard(card);
        this.setCard(card.grid, card);
      };
      
      //引数1の座標の中身に関係なく、引数2のカードを代入する
      this.setCardForce = function(grid, card){
        var area = cardArea(grid, card.type);
        for (i=0;i < area.length;i++){
          this.set(area[i], card);
        }
        card.grid = grid;
        return true;
      };
      
      this.removeCard = function(card){
        var area = cardArea(card.grid, card.type);
        for (i=0;i < area.length;i++){
          if(this.isBlank(area[i])) continue;
          if(this.get(area[i]).id != card.id){ continue;}
          this.set(area[i], 0);
        }
        return true;
        //this.printArray();
      };
      
      this.addCard = function(card){
        this.setCard(card.grid, card);
      };

      //引数の座標にあるカードが移動可能かどうか判定する
      this.isMovable = function(grid){
        var card = this.get(grid);
        if(card.type == 'wall' ||
           card.charged){
          return false;
        };
        l = card.size.w;
        for(i=0;i<l;i++){
          for(j = grid.y;j < this.height;j++){
            if (!this.isBlankOrSameCard({x:grid.x + i,y:j}, card)){
              return false;
            }
          }
        }
        return true;
      };
      
      //引数1の座標のカードを引数2の座標へ移動する
      this.moveCard = function(oldGrid,newGrid){
        var card = this.get(oldGrid);
        var area = cardArea(newGrid, card.type);
        if(this.isBlankOrSameCard(newGrid, card)){
          this.removeCard(card);
          this.setCard(newGrid, card);
          //this.printArray();
          return true;
        }
        return false;
      };
      
      //引数1の座標のカードを引数2の座標の空きに関係なく移動する
      this.moveCardForce = function(oldGrid,newGrid){
        var card = this.get(oldGrid);
        var area = cardArea(newGrid, card.type);
        this.removeCard(card);
        this.setCardForce(newGrid, card);
        return true;
      };
      
      //引数1のX座標においてカードを配置するY座標を返す
      //配置できない場合は-1を返す
      this.getFirstBlankY = function(x, card){
        for(j = this.height - 1;j >= 0;j--){
          for (i=0;i < card.size.w;i++){
            if(!this.isBlankOrSameCard({x:x+i, y:j},card)){
              if(j < this.height - 1){
                return j + 1;
              }
              return -1;
            }
          }
        }
        return 0;
      };
      
      /*
      ///未使用
      //引数の座標のカードを除き、グリッド内のカードを全て移動不可にする
      this.lockAll = function(coords){
        for(i=0;i<this.data.length;i++){
          for(j=0;j<this.data[i].length;j++){
            if(i !== coords.x && j !== coords.y && this.data[i][j] !== 0){
              this.data[i][j].lock();
            }
          }
        }        
      };
      
      //グリッド内のカードを全て移動可にする
      this.unlockAll = function(){
        for(i=0;i<this.data.length;i++){
          for(j=0;j<this.data[i].length;j++){
            if(this.data[i][j] !== 0){
              this.data[i][j].unlock();
            }
          }
        }        
      };
      */
      
      return this;
    }

   //デバッグ用 グリッドの中身をTableに書き出す
  cardGrid.prototype.printArray = function(){
    table = $("<table />");
    for(j = 0;j < 8;j++){
      tr = $("<tr />");
      for(i = 0;i < 11;i++){
        value = this.get({x:i,y:j});
        if(value == 0){value={type:"",id:"",attribute:"", rgb: "",grid: {x:"", y:""}};}
        tr.append($("<td />").text(value.id + "," + value.type +"," + value.rgb +","+value.grid.x +","+value.grid.y));
      }
      table.append(tr);
    }
//  $("#debug2").text(text);
    $("#debug2 table").replaceWith(table);
  }
    
    //デバッグ用 グリッドの中身を3次元配列の定義として書き出す
  cardGrid.prototype.printArray2 = function(){
    arrayText = "[";
    for(j = 0;j < 8;j++){
      arrayText = arrayText + "[";
      for(i = 0;i < 11;i++){
        value = this.get({x:i,y:j});
        if(value == 0){value={type:"",id:"0",attribute:"", rgb: ""};}
        arrayText = arrayText + "[" + value.id + ",'" + value.type +"','" + value.rgb +"'],";
      }
      arrayText = arrayText + "],";
    }
    arrayText = arrayText + "]";
    return arrayText;
  }
    
    cardGrid.prototype.isCoreAndSameRGB = function(area){
      var result = true;
      var card = this.get(area[0]);
      //debug("isCoreAndSame");
      for(_i=0;_i<area.length;_i++){
        result = result && this.get(area[_i]).type == 'core' && this.get(area[_i]).rgb == card.rgb;
      }
      return result;
    }
      
    cardGrid.prototype.scanRow = function(col){
      for(var i = 0;i < this.width - 2;i++){
        var area = cardArea({x:i,y:col} ,'h3');
        if (this.isCoreAndSameRGB(area)){
          var rgb = this.get({x:i,y:col}).rgb;
          //alert("wall");
          i += 3;
          while(i < this.width && this.get({x:i,y:col}).type == 'core' && this.get({x:i,y:col}).rgb == rgb){
            area.push({x:i,y:col});
            i++;
          }
          var walls = [];
          for(var _j = 0;_j < area.length;_j++){
            walls.push(this.get(area[_j]));
          }
          for(var _j = 0;_j < walls.length;_j++){
            walls[_j].toBeWall();
          }
        }        
      }
    }

    cardGrid.prototype.scanCol = function(row){
      for(var j = 0;j < this.height - 2;j++){
        var grid = {x:row, y:j};
        var area = cardArea(grid ,'v3');
        var card = this.get(grid);
        var rgb = card.rgb;
        //コアカードのチャージ判定
        //同色フレームのコアが縦に3つ並んだ場合
        if (this.isCoreAndSameRGB(area)){
          //一番上のカードを縦に3マスの大きさにする
          card.size.h = 3;
          card.height = cardWidth * card.size.h + cardMargin * (card.size.h - 1);
          card.type = "v3";
          card.charged = true;
          //下に並んだ2枚のコアカードを消去する
          for(var i = 1;i < area.length;i++){
            var remove_card = this.get(area[i]);
            this.canvas.removeChild(remove_card.drawShape);
            this.removeCard(remove_card);
          }
          //3マスの大きさにしたカードをグリッドに再配置する
          this.resetCard(card);
          this.canvas.removeChild(card.drawShape);
          card.display(this.canvas)
          card.unlock(this);
          this.canvas.addChild(card.drawShape);
          return true;
        }        
      }
      return false;
    }
    
    cardGrid.prototype.isMakingWall = function(){
      for(var j=0;j<this.height;j++){
        this.scanRow(j);
      }
      return true;
    }
    
    cardGrid.prototype.isCharging = function(){
      for(var i=0;i < this.width;i++){
        this.scanCol(i);
      }
      return true;
    }
    
    cardGrid.prototype.searchWall = function(){
      var walls = [];
      for(var j = 1; j < this.height; j++){
        for(var i = 0; i < this.width; i++){
          var grid = {x:i, y:j};
          if(this.isBlank(grid)){
             continue;
          }
          var card = this.get({x:i, y:j});
          if(card.type == "wall"){
            walls.push(card);
            //alert("push");
          }
        }
      }
      return walls;      
    }

    cardGrid.prototype.searchCharged = function(){
      var charged = [];
      for(var j = 0; j < this.height; j++){
        for(var i = 0; i < this.width; i++){
          var grid = {x:i, y:j};
          if(this.isBlank(grid)){
             continue;
          }
          var card = this.get(grid);
          if(card.charged && grid.x == card.grid.x && grid.y == card.grid.y){
            charged.push(card);
            //alert("push");
          }
        }
      }
      return charged;
    }
    
    cardGrid.prototype.lift = function(grid, rows){
      //alert("lift " + grid.x + " : " + grid.y);
      if(this.isBlank(grid)){
        return true;
      }
      var card = this.get(grid);
      if(card.type == "wall" || card.charged){
        return true;
      }
      grid = card.grid;
      if(grid.y + card.size.h >= this.height){
        return false;
      }
      //alert(card.size.w);
      for(var i = 0; i < card.size.w; i++){
        //alert(i);
        if(!this.lift({x:grid.x + i, y:grid.y + card.size.h}, rows)){
          return false;
        }
        //alert("return lift " + grid.x + " : " + grid.y + " i=" + i + ", card.size.w=" + card.size.w);
      }
      if(this.moveCardForce(grid, {x:grid.x, y:grid.y + rows})){
        card.moveOnGrid({x:grid.x, y:grid.y + rows});
        return true;
      }
      return false;
    };
    
    cardGrid.prototype.liftCheck = function(grid, rows, call_card){
      //alert("x:" + grid.x + " y:" + grid.y + " rows:" + rows + " type:" + call_card.type);
      if(grid.y >= this.height){
        return this.height;
      }
      if(this.isBlank(grid)){
        if(rows == 1){
          return 0;
        } else {
          return this.liftCheck({x:grid.x, y:grid.y + 1}, rows - 1, call_card);
        }
      }
      var card = this.get(grid);
      //alert("---0---");
      if (card.id == call_card.id){
        //alert("---01---");
        return 0;
      }
      //alert("---02---");
      var col = grid.x;
      grid = card.grid;
      if(card.type == 'wall'){
        if(call_card.grid.x != card.grid.x || call_card.grid.y < card.grid.y){
          if(rows > 1){
            return this.liftCheck({x:grid.x, y:grid.y + 1}, rows - 1, call_card);
          }
          return 0;
        }
        if(grid.y + card.size.h + rows > this.height){
          return this.height;
        }
        //alert(card.size.h);
        var ret = this.liftCheck({x:col, y:grid.y + card.size.h}, rows, call_card);
        if(ret == 0){
          return grid.y + card.size.h;
        }
        return ret;
      }
      //alert("---1---");
      if(card.charged){
        if(call_card.grid.x == card.grid.x){
          if(grid.y + card.size.h + rows > this.height){
            return this.height;
          }
          var ret = this.liftCheck({x:col, y:grid.y + card.size.h}, rows, call_card);
          if(ret > 0){
            return ret;
          }
          if(call_card.type == "wall"){
            for(var i = grid.x; i < grid.x + card.size.w; i++){
              if(i == col){
                continue;
              }
              if(this.liftCheck({x:i, y:grid.y + card.size.h}, rows, call_card) > 0){
                return grid.y + card.size.h;
              }
            }
            return 0;
          }
          return grid.y + card.size.h;
        }
        if(card.size.h <= rows){
          return 0;
        }
        for(var i = grid.x; i < grid.x + card.size.w; i++){
          var ret = this.liftCheck({x:i, y:0}, card.size.h, card);
          if(ret == grid.y){
            if(grid.y + card.size.h + rows > this.height){
              return this.height;
            }
            var ret = this.liftCheck({x:col, y:grid.y + card.size.h}, rows, call_card);
            if(ret > 0){
             return ret;
            }
            for(var i = grid.x; i < grid.x + card.size.w; i++){
              if(i == col){
                continue;
              }
              if(this.liftCheck({x:i, y:grid.y + card.size.h}, rows, call_card) > 0){
                return grid.y + card.size.h;
              }
            }
            return 0;
          }
        }
        return 0;
      }
      //alert("---2---");
      if(grid.y + card.size.h + rows > this.height){
        return this.height;
      }
      var ret = this.liftCheck({x:col, y:grid.y + card.size.h}, rows, call_card);
      //alert("return");
      if(ret > 0){
       return ret;
      }
      for(var i = grid.x; i < grid.x + card.size.w; i++){
        if(i == col){
          continue;
        }
        if(this.liftCheck({x:i, y:grid.y + card.size.h}, rows, call_card) > 0){
          return grid.y + card.size.h;
        }
      }
      return 0;
    };
     
    //カード
    function card(x, y, width, height, rgb, hp, gp, chargeturn, attribute, text){
      this.grid = {x: x, y: y};
      this.size = {w: width, h: height};
      this.width = cardWidth * width + cardMargin * (width - 1);
      this.height = cardWidth * height + cardMargin * (height - 1);
      this.origin = {x: this.width/2, y: this.height/2};
      this.join = "round";
      this.hp = hp; //ヒットポイント
      this.gp = gp; //防御力
      this.chargeturn = chargeturn;
      this.attribute = attribute;
      this.text = text;
      this.type = 'card';
      this.id = 0;
      this.drawText = new Object();
      this.drawShape = new Object();
      this.rgb = rgb;
      this.charged = false;

      switch (rgb){
      case 'r':
        this.fill = '#666';
        this.stroke = cardStrokeWidth +' #F33';
        break;
      case 'g':
        this.fill = '#666';
        this.stroke = cardStrokeWidth +' #0B0';
        break;
      case 'b':
        this.fill = '#666';
        this.stroke = cardStrokeWidth +' #3AF';
        break;
      case 'wall':
        this.fill = '#666';
        this.stroke = cardStrokeWidth +' #333';
        break;
      case 'dustbox':
        this.fill = '#aaa';
        this.stroke = cardStrokeWidth +' #666';
        break;
      }
      
      this.setRGB = function(rgb){
        switch (rgb){
        case 'r':
          this.fill = '#666';
          this.stroke = cardStrokeWidth +' #F33';
          break;
        case 'g':
          this.fill = '#666';
          this.stroke = cardStrokeWidth +' #0B0';
          break;
        case 'b':
          this.fill = '#666';
          this.stroke = cardStrokeWidth +' #3AF';
          break;
        case 'wall':
          this.fill = '#666';
          this.stroke = cardStrokeWidth +' #333';
          break;
        }        
      };
      
      this.cloning = function(){
        _card = new (this.constructor);
        for (var p in this) {
          if (!this.hasOwnProperty(p)) continue;
          _card[p] = typeof this[p] == 'object' ? _card[p] : this[p];
        }
        _card.grid = {x:this.grid.x, y:this.grid.y};
        _card.size = {w:this.size.w, h:this.size.h};
        _card.origin = {x:this.origin.x,y:this.origin.y};
        _card.type = this.type;
        _card.rgb = this.rgb;
        _card.charged = this.charged;
        return _card;
      }
      
      this.setId = function(){
        this.id = idPool[0];
        idPool.shift();
      };
      
      this.lock = function(){
        this.drawShape.dragAndDrop(false);
      }
      
      this.unlock = function(cGrid){
        this.drawShape.dragAndDrop({ 
          changeZindex: true,

          start: function(){
            this.oldGrid = coordsToGrid({x: this.x, y:this.y},this.origin);
            this.oldCoords = {x: this.x, y:this.y};
            this.scale(1.5,1.5);
            if(this.menu){
              this.oldGrid = menu_coordsToGrid({x: this.x, y:this.y},this.origin);
            }
            //cGrid.lockAll(this.oldGrid);
            //        $("#debug2").text(this.oldGrid.x);
            //this.children[1].text = "test";
            //$("#debug3").text(this.oldGrid.x + "," + this.oldGrid.y + "," + this.x + "," + this.y);
          },
           
          move:function(){
            grid = coordsToGrid({x: this.x, y: this.y},this.origin);
            //ゴミ箱に入れた場合
            var dustbox = cGrid.get({x:0,y:7});
            if(dustbox.onThisOnCanvas({x:this.x, y:this.y}) &&
               this.menu == false){
              this.scale(0.65,0.65);
            } else {
              this.scale(1.5,1.5);
            }
            /*
            this.children[1].text = "new(" + grid.x + "," + grid.y + ") \n" +
                            "old(" + this.oldGrid.x + "," + this.oldGrid.y + ") \n" +
                            "(" + (this.x) + "," + (this.y) + ")";
            */
          },
          
          end:function(){

            this.scale(1,1);
            var grid = coordsToGrid({x: this.x, y: this.y},this.origin);
            var card = cGrid.get(this.oldGrid);
            var dustbox = cGrid.get({x:0,y:7});
            //ゴミ箱に入れた場合
            if(dustbox.onThisOnCanvas({x:this.x, y:this.y}) &&
               this.menu == false){
              idPool.push(card.id);
              cGrid.removeCard(card);
              cGrid.canvas.removeChild(this);
              
            }else if(cGrid.isIn(grid) && cGrid.isMovable(this.oldGrid)){
              yy = cGrid.getFirstBlankY(grid.x, card);
              if (yy >= 0){grid.y = yy;}
              if (cGrid.moveCard(this.oldGrid, grid)){
                coords = card.getCoords();
                this.animate(coords);
                if(this.menu){
                  this.menu = false;
                  var cloneCard = cGrid.get(grid).cloning();
                  //$("#debug4").text("typeof this");
                  cloneCard.grid.x = this.oldGrid.x;
                  cloneCard.grid.y = this.oldGrid.y;
                  cloneCard.display(cGrid.canvas);
                  cloneCard.drawShape.scale(0.65,0.65);
                  cloneCard.drawShape.x = this.oldCoords.x;
                  cloneCard.drawShape.y = this.oldCoords.y;
                  cloneCard.unlock(cGrid);
                  cloneCard.setId();
                  cloneCard.drawShape.menu = true;
                  cGrid.addCard(cloneCard);
                  cGrid.canvas.addChild(cloneCard.drawShape);
                  //$("#debug4").text(cloneCard.attribute);
                }
              } else {
                //グリッド内で動かせない場合
                if(this.menu){
                  this.scale(0.65,0.65);
                  this.animate(this.oldCoords);
                } else {
                  this.animate(card.getCoords());
                }
              }
            } else {
              //移動先がグリッド外の場合
              if(this.menu){
                this.scale(0.65,0.65);
                this.animate(this.oldCoords);
              } else {
                this.animate(card.getCoords());
              }
            }
            grid2 = coordsToGrid({x:this.x, y:this.y},this.origin);
            //this.children[1].text = "(" + grid.x + "," + grid.y + ") \n" +
            //                      "(" + grid2.x + "," + grid2.y + ") \n";
            
            /*
            //ウォールとチャージの判定と処理
            var loop = true;
            while(loop){
              loop = false;
              cGrid.isMakingWall();
              cGrid.isCharging();
              var walls = cGrid.searchWall();
              var charged = cGrid.searchCharged();
              for(var i = 0; i < walls.length; i++){
                var row = cGrid.liftCheck({x:walls[i].grid.x, y:0}, 1, walls[i]);
                //alert("" + row + " " + walls[i].grid.y);
                if(row != walls[i].grid.y){
                //alert(row);
                  cGrid.lift({x:walls[i].grid.x, y:row}, 1);
                  cGrid.removeCard(walls[i]);
                  cGrid.setCardForce({x:walls[i].grid.x, y:row}, walls[i]);
                  walls[i].moveOnGrid({x:walls[i].grid.x, y:row}, walls[i]);
                  loop = true;
                }
              }
              for(var i = 0; i < charged.length; i++){
                var row = cGrid.liftCheck({x:charged[i].grid.x, y:0}, charged[i].size.h, charged[i]);
                if(row != charged[i].grid.y){
                  //alert(row);
                  cGrid.lift({x:charged[i].grid.x, y:row}, charged[i].size.h);
                  cGrid.removeCard(charged[i]);
                  cGrid.setCardForce({x:charged[i].grid.x, y:row}, charged[i]);
                  charged[i].moveOnGrid({x:charged[i].grid.x, y:row}, charged[i]);
                  loop = true;
                }
              }
            }
            //alert("ret.length " + ret.length);
            */
            //cGrid.printArray();
          }
          
        });
      }

      this.display = function(canvas){
        var coords = this.gridToCoords(this.grid);
        this.drawShape = canvas.display.rectangle({
          x: coords.x,
          y: coords.y,
          origin: this.origin,
          width: this.width,
          height: this.height,
          fill: this.fill,
          stroke: this.stroke,
          join: this.join,
        });
        this.drawFrame = canvas.display.rectangle({
          x: this.width > cardWidth? this.width / 2 - this.origin.x:0,
          y: this.height > cardWidth?this.height / 2 - this.origin.y:0,
          origin: { x: "center", y: "center" },
          width: this.width+6,
          height: this.height+6,
          fill: "transparent",
          stroke: "1 #000",
          join: this.join,
        });
        this.drawShape.addChild(this.drawFrame);

        //テキストの描画位置は親のoriginを基準とするのでx,yで調整
        this.drawText = canvas.display.text({
          x: this.width > cardWidth? this.width / 2 - this.origin.x:0,
          y: this.height > cardWidth?this.height / 2 - this.origin.y:0,
          origin: { x: "center", y: "center" },
          align: "center",
          font: "bold 13px sans-serif",
          text: this.text,
          fill: "#333",
        });
        this.drawShape.addChild(this.drawText);
 
        return this.drawShape;
      }
        
        this.toBeWall = function(){
          this.drawShape.stroke = cardStrokeWidth +' #444';
          this.drawText.text = "wall";
          this.type = "wall";
        };
      
      this.moveOnGrid = function(grid){
        coords = this.gridToCoords(grid);
        this.drawShape.animate(coords);        
      };
      
      //canvas上の座標を返す
      this.getCoords = function(){
        return this.gridToCoords(this.grid);
        //return {x:this.drawShape.x, this.drawShape.y};
      };
      
      //グリッド上の座標を返す
      this.getGrid = function(){
        return this.grid;
      };
      
      //グリッド座標をcanvas座標に変換する
      this.gridToCoords = function(grid){
        return {x: gridAreaStart.x + grid.x * (cardWidth + cardMargin) + this.origin.x,
                y: gridAreaStart.y + grid.y * (cardWidth + cardMargin) + this.origin.y};
      };
      
      this.onThisOnCanvas = function(coords){
        var topLeftCoords = {x:this.drawShape.x - this.origin.x,
                             y:this.drawShape.y - this.origin.y};
        if(topLeftCoords.x <= coords.x &&
           coords.x <= topLeftCoords.x + this.width &&
           topLeftCoords.y <= coords.y &&
           coords.y <= topLeftCoords.y + this.height ){
          return true;
        }
        return false;
      };
     return this;
    }
        
    // コアのプロトタイプ
    function corecard(x, y, rgb, hp, gp, chargeturn, attribute, text){
      card.call(this, x, y, 1, 1, rgb, hp, gp, chargeturn, attribute, text);
      this.type = 'core';
      return this;
    }
    //cardクラスの継承
    corecard.prototype = new card();

    // コア(チャージ済み)のプロトタイプ
    function corecardCharged(x, y, rgb, hp, gp, chargeturn, attribute, text){
      card.call(this, x, y, 1, 3, rgb, hp, gp, chargeturn, attribute, text);
      this.type = 'core_charged';
      return this;
    }
    //cardクラスの継承
    corecardCharged.prototype = new card();

    // エリートのプロトタイプ
    function elitecard(x, y, rgb, hp, gp, chargeturn, attribute, text){
      card.call(this, x, y, 1, 2, rgb, hp, gp, chargeturn, attribute, text);
      this.type = 'elite';
      return this;
    }
    elitecard.prototype = new card();

    // チャンピオンのプロトタイプ
    function championcard(x, y, rgb, hp, gp, chargeturn, attribute, text){
      card.call(this, x, y, 2, 2, rgb, hp, gp, chargeturn, attribute, text);
      this.type = 'champion';
      return this;
    }
    championcard.prototype = new card(); 

    
    
$(document).ready(function(){
  var cGrid = new cardGrid(8,6);
        //debug用
  $("#debug2").append($("<table />"));

  //canvasを追加する
  $("#canvasarea").append($("<canvas />").attr({id: "canvas",width: "570", height: "570"}));
      
  //URL生成ボタン
  $("#canvasarea").after(("<button id='generateURL'>URL生成</button><input id='URL' type='text' size='90' />"));
  
  $("button#generateURL").click(function(){
    
    var long_url = location.protocol + "//" + location.host + location.pathname +"?"+ cGrid.printArray2();
    get_short_url(long_url, function(short_url) {
      $("input#URL").val(short_url);
    });
  });

  // Touch操作時にWindowスクロールなどを止める
  $('canvas').bind('touchstart', function() {
    event.preventDefault();    
  });

  //canvasの作成
  var canvas = oCanvas.create({
    canvas: "#canvas"
  });
  
  cGrid.setCanvas(canvas);
  
  //メニューを追加
  var menuBox = canvas.display.rectangle({
        x: 5,
        y: 435,
        width: 560,
        height: 130,
        //origin: {x:this.width/2,y:0},
        stroke: '2 #999',
        fill: "#FFF"
      });
       
  canvas.addChild(menuBox);
  
  
  var tmp_coords = {x:0, y:0};

  menu_dustbox = new corecard(0,7,'dustbox',1,1,1,'fire','ゴミ箱');
  menu_dustbox.display(canvas);
  //tmp_coords = menu_gridToCoords(menu_dustbox.grid, menu_dustbox.origin);
  menu_dustbox.drawShape.x = menuBox.x + menu_dustbox.origin.x*3;
  menu_dustbox.drawShape.y = menuBox.y + menu_dustbox.origin.y*3;
  menu_dustbox.setId();
  cGrid.addCard(menu_dustbox);
  canvas.addChild(menu_dustbox.drawShape);
  
  menu_coreR = new corecard(0,6,'r',1,1,1,'fire','コア');
  menu_coreR.display(canvas);
  menu_coreR.drawShape.scale(0.65,0.65);
  tmp_coords = menu_gridToCoords(menu_coreR.grid, menu_coreR.origin);
  menu_coreR.drawShape.x = tmp_coords.x;
  menu_coreR.drawShape.y = tmp_coords.y;
  menu_coreR.setId();
  cGrid.addCard(menu_coreR);
  canvas.addChild(menu_coreR.drawShape);
  
  menu_coreG = new corecard(1,6,'g',1,1,1,'fire','コア');
  menu_coreG.display(canvas);
  menu_coreG.drawShape.scale(0.65,0.65); 
  tmp_coords = menu_gridToCoords(menu_coreG.grid, menu_coreG.origin);
  menu_coreG.drawShape.x = tmp_coords.x;
  menu_coreG.drawShape.y = tmp_coords.y;
  menu_coreG.setId();
  cGrid.addCard(menu_coreG);
  canvas.addChild(menu_coreG.drawShape);
  
  menu_coreB = new corecard(2,6,'b',1,1,1,'fire','コア');
  menu_coreB.display(canvas);
  menu_coreB.drawShape.scale(0.65,0.65); 
  tmp_coords = menu_gridToCoords(menu_coreB.grid, menu_coreR.origin);
  menu_coreB.drawShape.x = tmp_coords.x;
  menu_coreB.drawShape.y = tmp_coords.y;
  menu_coreB.setId();
  cGrid.addCard(menu_coreB);
  canvas.addChild(menu_coreB.drawShape);
  
  menu_eliteR = new elitecard(3,6,'r',1,1,1,'fire','エリート');
  menu_eliteR.display(canvas);
  menu_eliteR.drawShape.scale(0.65,0.65); 
  tmp_coords = menu_gridToCoords(menu_eliteR.grid, menu_eliteR.origin);
  menu_eliteR.drawShape.x = tmp_coords.x;
  menu_eliteR.drawShape.y = tmp_coords.y;
  menu_eliteR.setId();
  cGrid.addCard(menu_eliteR);
  canvas.addChild(menu_eliteR.drawShape);
  
  menu_eliteG = new elitecard(4,6,'g',1,1,1,'fire','エリート');
  menu_eliteG.display(canvas);
  menu_eliteG.drawShape.scale(0.65,0.65); 
  tmp_coords = menu_gridToCoords(menu_eliteG.grid, menu_eliteG.origin);
  menu_eliteG.drawShape.x = tmp_coords.x;
  menu_eliteG.drawShape.y = tmp_coords.y;
  menu_eliteG.setId();
  cGrid.addCard(menu_eliteG);
  canvas.addChild(menu_eliteG.drawShape);
  
  menu_eliteB = new elitecard(5,6,'b',1,1,1,'fire','エリート');
  menu_eliteB.display(canvas);
  menu_eliteB.drawShape.scale(0.65,0.65); 
  tmp_coords = menu_gridToCoords(menu_eliteB.grid, menu_eliteB.origin);
  menu_eliteB.drawShape.x = tmp_coords.x;
  menu_eliteB.drawShape.y = tmp_coords.y;
  menu_eliteB.setId();
  cGrid.addCard(menu_eliteB);
  canvas.addChild(menu_eliteB.drawShape);
  
  menu_champR = new championcard(6,6,'r',1,1,1,'fire','チャンピオン');
  menu_champR.display(canvas);
  menu_champR.drawShape.scale(0.65,0.65);   
  tmp_coords = menu_gridToCoords(menu_champR.grid, menu_champR.origin);
  menu_champR.drawShape.x = tmp_coords.x;
  menu_champR.drawShape.y = tmp_coords.y;
  menu_champR.setId();
  cGrid.addCard(menu_champR);
  cGrid.canvas.addChild(menu_champR.drawShape);

  menu_champG = new championcard(8,6,'g',1,1,1,'fire','チャンピオン');
  menu_champG.display(canvas);
  menu_champG.drawShape.scale(0.65,0.65); 
  tmp_coords = menu_gridToCoords(menu_champG.grid, menu_champG.origin);
  menu_champG.drawShape.x = tmp_coords.x;
  menu_champG.drawShape.y = tmp_coords.y;
  menu_champG.setId();
  cGrid.addCard(menu_champG);
  cGrid.canvas.addChild(menu_champG.drawShape);
  
  menu_champB = new championcard(10,6,'b',1,1,1,'fire','チャンピオン');
  menu_champB.display(canvas);
  menu_champB.drawShape.scale(0.65,0.65); 
  tmp_coords = menu_gridToCoords(menu_champB.grid, menu_champB.origin);
  menu_champB.drawShape.x = tmp_coords.x;
  menu_champB.drawShape.y = tmp_coords.y;
  menu_champB.setId();
  cGrid.addCard(menu_champB);
  canvas.addChild(menu_champB.drawShape);
  
  //menuBox.scale(0.65,0.65);

  menu_coreR.drawShape.menu = true;
  menu_coreG.drawShape.menu = true;
  menu_coreB.drawShape.menu = true;
  menu_eliteR.drawShape.menu = true;
  menu_eliteG.drawShape.menu = true;
  menu_eliteB.drawShape.menu = true;
  menu_champR.drawShape.menu = true;
  menu_champG.drawShape.menu = true;
  menu_champB.drawShape.menu = true;
  menu_coreR.unlock(cGrid);
  menu_coreG.unlock(cGrid);
  menu_coreB.unlock(cGrid);
  menu_eliteR.unlock(cGrid);
  menu_eliteG.unlock(cGrid);
  menu_eliteB.unlock(cGrid);
  menu_champR.unlock(cGrid);
  menu_champG.unlock(cGrid);
  menu_champB.unlock(cGrid);
  /*
  for (c=0;c < cardBox.length;c++){
  //カードをGridに追加
    cardBox[c].setId();
    cGrid.addCard(cardBox[c]);
    //カードを描画
    cardBox[c].display(canvas);
    canvas.addChild(cardBox[c].drawShape);
    cardBox[c].unlock(cGrid);

    
  }
  */
  //  cardBox[0].display(canvas);
  //cGrid.printArray();

  if(location.search !== ""){

    var array = eval(location.search.substring(1));  
    
  originalCorecard = new corecard(0,0,"r",1,1,1,'','コア');
  originalElitecard = new elitecard(0,0,"r",1,1,1,'','エリート');
  originalChampcard = new championcard(0,0,"r",1,1,1,'','チャンピオン');
  for(y = 0;y < 6;y++){
    for(x = 0;x < 8;x++){
      if(array[y][x][1] !== '' && cGrid.isBlank({x:x,y:y})){
        type = array[y][x][1];
        rgb = array[y][x][2];
        switch(type){
          case "core":
            cloneCard = originalCorecard.cloning();
            break;
          case "elite":
            cloneCard = originalElitecard.cloning();
            break;
          case "champion":
            cloneCard = originalChampcard.cloning();
            break;
          }
        cloneCard.grid.x = x;
        cloneCard.grid.y = y;
        cloneCard.rgb = rgb;
        cloneCard.setRGB(rgb);
        cloneCard.setId();
        cloneCard.display(canvas);
        cloneCard.drawShape.menu = false;
        cGrid.addCard(cloneCard);
        canvas.addChild(cloneCard.drawShape);
        cloneCard.unlock(cGrid);
      }
    }
  }
}

  //debug("メインの最後");
    });
  </script>
}}