<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);
This Pen doesn't use any external CSS resources.