<blockquote class="js-minecraft-score">
Score: 0, Depth: 0, Tools: [] []
</blockquote>

<p class="js-minecraft-container">
	<img class="js-minecraft-transparent hidden" src="https://d3e7x39d4i7wbe.cloudfront.net/uploads/photo/image/2428/Transparent-1437499239.png">
	<img class="js-minecraft-block hidden" src="https://d3e7x39d4i7wbe.cloudfront.net/uploads/photo/image/2432/MinecraftTextures-1437739495.png">
</p>

<blockquote class="js-minecraft-alert">
Click to mine.
</blockquote>
.js-minecraft-transparent.hidden {
  display: none;
}

blockquote {
  margin: 0;
}
(function() {
  $(function() {
    var $alertDiv, $container, $defaultMinecraftBlock, $scoreDiv, $transparentMinecraftOverlay, block, block_id, block_types, blocks, bucket, checkIfDone, currentDepth, doDestroy, doLavaAlert, doNoteAlert, getNextBlock, getSpriteOffsetString, getTreasureFromChest, handleClick, i, j, numBlocks, ref, score, spriteSheetUrl, tool, transparentUrl, updateScore;
    $container = $(".js-minecraft-container");
    if ($container.length) {
      $defaultMinecraftBlock = $(".js-minecraft-block");
      $transparentMinecraftOverlay = $(".js-minecraft-transparent");
      $scoreDiv = $(".js-minecraft-score");
      $alertDiv = $(".js-minecraft-alert");
      spriteSheetUrl = $defaultMinecraftBlock.attr("src");
      transparentUrl = $transparentMinecraftOverlay.attr("src");
      block_types = {
        "grass": {
          image_offset: {
            0: [0, 0],
            1: [0, 1]
          },
          durability: 2,
          point_value: 1
        },
        "dirt": {
          image_offset: {
            0: [0, 2],
            1: [0, 3]
          },
          durability: 2,
          point_value: 1
        },
        "stone": {
          image_offset: {
            0: [1, 0],
            1: [1, 1],
            2: [1, 2],
            3: [1, 3]
          },
          durability: 4,
          point_value: 2
        },
        "iron_ore": {
          image_offset: {
            0: [2, 0],
            1: [2, 1],
            2: [2, 2],
            3: [2, 3],
            4: [2, 4],
            5: [2, 5]
          },
          durability: 6,
          point_value: 3,
          treasure: "iron_ingot"
        },
        "gold_ore": {
          image_offset: {
            0: [3, 0],
            1: [3, 1],
            2: [3, 2],
            3: [3, 3],
            4: [3, 4],
            5: [3, 5]
          },
          durability: 6,
          point_value: 4,
          treasure: "gold_ingot"
        },
        "diamond_ore": {
          image_offset: {
            0: [4, 0],
            1: [4, 1],
            2: [4, 2],
            3: [4, 3],
            4: [4, 4],
            5: [4, 5],
            6: [4, 6],
            7: [4, 7]
          },
          durability: 8,
          point_value: 5,
          treasure: "diamond"
        },
        "lava": {
          image_offset: {
            0: [5, 0]
          },
          durability: 0,
          point_value: 0
        },
        "cobalt": {
          image_offset: {
            0: [5, 5]
          },
          durability: 0,
          point_value: 0
        },
        "bedrock": {
          image_offset: {
            0: [5, 6]
          },
          durability: 0,
          point_value: 0
        },
        "chest": {
          image_offset: {
            0: [6, 0]
          },
          durability: 1,
          point_value: 0,
          treasure: "chest_treasure"
        },
        "iron_pickaxe": {
          image_offset: {
            0: [6, 1]
          },
          durability: 1,
          point_value: 0
        },
        "iron_ingot": {
          image_offset: {
            0: [6, 2]
          },
          durability: 1,
          point_value: 10
        },
        "gold_ingot": {
          image_offset: {
            0: [6, 3]
          },
          durability: 1,
          point_value: 25
        },
        "diamond": {
          image_offset: {
            0: [6, 4]
          },
          durability: 1,
          point_value: 50
        },
        "cake": {
          image_offset: {
            0: [6, 5]
          },
          durability: 1,
          point_value: -1
        },
        "note": {
          image_offset: {
            0: [6, 6]
          },
          durability: 1,
          point_value: 0
        },
        "water_bucket": {
          image_offset: {
            0: [6, 7]
          },
          durability: 1,
          point_value: 10
        }
      };
      blocks = {};
      numBlocks = 27;
      score = 0;
      tool = "";
      bucket = "";
      currentDepth = 0;
      updateScore = function() {
        $scoreDiv.text("Score: " + score + ", Tools: [" + tool + "] [" + bucket + "]");
        return $alertDiv.text("Depth: " + currentDepth);
      };
      handleClick = function(b_id) {
        var block;
        block = blocks[b_id];
        if (block_types[block.type].durability === 0) {
          return;
        }
        block.clicks++;
        if (block.clicks >= block_types[block.type].durability) {
          doDestroy(b_id);
        }
        currentDepth = block.depth;
        updateScore();
        checkIfDone();
        return $("#" + b_id).css("background", getSpriteOffsetString(b_id));
      };
      getNextBlock = function(depth) {
        var rand;
        rand = Math.random();
        if (depth >= 16) {
          if (rand < 0.1) {
            return "diamond_ore";
          } else if (rand < 0.5) {
            return "bedrock";
          } else {
            return "lava";
          }
        } else if (depth >= 12) {
          if (rand < 0.1) {
            return "chest";
          } else if (rand < 0.12) {
            return "lava";
          } else if (rand < 0.17) {
            return "diamond_ore";
          } else if (rand < 0.27) {
            return "gold_ore";
          } else if (rand < 0.57) {
            return "iron_ore";
          } else {
            return "stone";
          }
        } else if (depth >= 8) {
          if (rand < 0.1) {
            return "chest";
          } else if (rand < 0.15) {
            return "gold_ore";
          } else if (rand < 0.45) {
            return "iron_ore";
          } else {
            return "stone";
          }
        } else if (depth >= 4) {
          if (rand < 0.1) {
            return "chest";
          } else if (rand < 0.13) {
            return "gold_ore";
          } else if (rand < 0.35) {
            return "iron_ore";
          } else {
            return "stone";
          }
        } else if (depth >= 2) {
          if (rand < 0.1) {
            return "chest";
          } else if (rand < 0.15) {
            return "iron_ore";
          } else {
            return "stone";
          }
        } else {
          return "dirt";
        }
      };
      getTreasureFromChest = function() {
        var rand;
        rand = Math.random();
        if (tool !== "iron_pickaxe") {
          if (rand < 0.5) {
            return "iron_pickaxe";
          } else {
            return "iron_ingot";
          }
        } else {
          if (rand < 0.05) {
            return "cake";
          } else if (rand < 0.3) {
            return "water_bucket";
          } else if (rand < 0.7) {
            return "iron_ingot";
          } else if (rand < 0.9) {
            return "gold_ingot";
          } else if (rand < 0.998) {
            return "diamond";
          } else if (rand < 0.998 && rand <= 1) {
            return "note";
          } else {
            return "iron_ingot";
          }
        }
      };
      doDestroy = function(b_id) {
        var block, block_type;
        block = blocks[b_id];
        block_type = block_types[block.type];
        score += block_type.point_value;
        if (block.type === "iron_pickaxe") {
          tool = "iron_pickaxe";
        }
        if (block.type === "water_bucket") {
          bucket = "water_bucket";
        }
        if (block.type === "note") {
          setTimeout((function() {
            return doNoteAlert();
          }), 100);
        }
        updateScore();
        if (block_type.treasure === "chest_treasure") {
          block.type = getTreasureFromChest();
        } else if (block_type.treasure && tool === "iron_pickaxe") {
          block.type = block_type.treasure;
        } else {
          block.depth++;
          block.type = getNextBlock(block.depth);
        }
        block.clicks = 0;
        if (block.type === "lava") {
          return setTimeout((function() {
            return doLavaAlert(b_id);
          }), 2000);
        }
      };
      checkIfDone = function() {
        var block_id, i, j, ref;
        for (i = j = 0, ref = numBlocks; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
          block_id = "block_" + i;
          if (block_types[blocks[block_id].type].durability !== 0) {
            return;
          }
        }
        return $alertDiv.text("You have mined to the core of the Earth. Tweet your score to #EdsurgeMinecraft @brrr80 @edsurge. Thanks for playing!");
      };
      doNoteAlert = function() {
        return $alertDiv.text("Congratulations! You have discovered the secret treasure! Claim your prize by sending a tweet with the tags:\n\n  #EdsurgeSecretTreasure\n  #EdsurgeMinecraft\n  @brrr80\n  @edsurge");
      };
      doLavaAlert = function(b_id) {
        var block_id, i, j, ref, results;
        if (bucket === "water_bucket") {
          bucket = "";
          blocks[b_id].type = "cobalt";
          $("#" + b_id).css("background", getSpriteOffsetString(b_id));
          return updateScore();
        } else {
          $alertDiv.text("You struck a vein of lava and have burned to death. Tweet your score to #EdsurgeMinecraft @brrr80 @edsurge. Thanks for playing!");
          results = [];
          for (i = j = 0, ref = numBlocks; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
            block_id = "block_" + i;
            blocks[block_id] = {
              id: block_id,
              type: "lava",
              depth: 16,
              clicks: 0
            };
            results.push($("#" + block_id).css("background", getSpriteOffsetString(block_id)));
          }
          return results;
        }
      };
      getSpriteOffsetString = function(block_id) {
        var clicks, type;
        clicks = blocks[block_id].clicks;
        type = blocks[block_id].type;
        return "url(" + spriteSheetUrl + ") " + (block_types[type].image_offset[clicks][1] * -64) + "px " + (block_types[type].image_offset[clicks][0] * -64) + "px";
      };
      for (i = j = 0, ref = numBlocks; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
        block_id = "block_" + i;
        blocks[block_id] = {
          id: block_id,
          type: "grass",
          depth: 0,
          clicks: 0
        };
        block = $defaultMinecraftBlock.clone().appendTo($container);
        block.attr("id", block_id).attr("src", transparentUrl).css({
          position: "relative",
          width: "64px",
          height: "64px",
          background: getSpriteOffsetString(block_id)
        }).show().click(function() {
          return handleClick($(this).attr("id"));
        });
      }
      $defaultMinecraftBlock.remove();
      if (location.hash === "#minecraft") {
        return $('html, body').animate({
          scrollTop: ($container.offset().top) + 'px'
        }, 'fast');
      }
    }
  });

}).call(this);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js