ゲームのようなブロック落下風のデザイン

$(function(){
  var board_xcount = parseInt($(document.body).width()/100);
  var board_ycount = parseInt($(document.body).height()/100);

  var frame_block = $("<div>").
    css("opacity", 0.5).
    css("width", 100).
    css("height", 100);
  var clearance_width = 5;
  var clearance_height = 5;

  for(var i=0;i<board_xcount;i++){
    for(var j=0;j<board_ycount;j++){
      var panel = create_panel();

      $(panel).on('click',function(){
          $(this).remove();
                fall_move_chain(this);
      });
      $(document.body).append(panel);
    }
  }

  //panel作成
  function create_panel(){
    return $(frame_block).clone().
        css("backgroundColor", getRandomColor()).
        css("position", "absolute").
        css("left", i*$(frame_block).width()+(i*clearance_width)).
        css("top", j*$(frame_block).height()+(j*clearance_height)).
        attr("id", i+"-"+j).
        attr("class", "panel");
  }

  //移動連鎖
  function fall_move_chain(element){
    if($(element).hasClass("panel")){
            var top_element = getPanel(element, "top");
      if(!$(top_element).is(':animated')){
                $(top_element).animate(
                    { top: parseInt($(top_element).css("top"))+($(frame_block).height()+clearance_height)+"px" },
                    { complete: function(){
                        var bottom_element = getPanel(element, "bottom");
                        if($(bottom_element).hasClass("panel")){
                            fall_move_chain(element);
                        }
                    }}
                );
                fall_move_chain(top_element);
            }
    }
  }

    function getPanel(element, direction){
        var x = parseInt( $(element).css("left"));
        var y = parseInt( $(element).css("top"));

        switch(direction){
            case "top":
                return document.elementFromPoint(x, (y-$(frame_block).height()));
            break;
            case "bottom":
                return document.elementFromPoint(x, (y+$(frame_block).height()));
            break;
        }
    }

  //ランダム色取得
  function getRandomColor(){
    return "rgb("+
    Math.floor( Math.random()*255)+","+
    Math.floor( Math.random()*255)+","+
    Math.floor( Math.random()*255)+")";
  }
});

詳細は下記の記事に記載

surumereflection.hatenadiary.jp