-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblock-maker.html
69 lines (69 loc) · 3.68 KB
/
block-maker.html
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
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<title>Block Maker</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<style>
body {background-color: #222; position: relative; left: 10px; width: 90vw; height: 90vh;}
a, h1, p, span {color: #fff; font-family: verdana;}
input {width: 680px; font-size: 120%; font-family: consolas;}
canvas {display: block; margin: 8px 0px;}
button {position: relative; left: 3px;}
</style>
</head>
<body>
<h1>Block Maker</h1>
<p>A Minecraft-like block maker with 64 colours and 64 pixels. Pixels are bottom-to-top.<br>Base64 for colours, = symbol for empty pixel.</p>
<input id="blockData" value="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/" maxlength="64">
<canvas id="myCanvas" width="512" height="512"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let base64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
shade = 17;
setInterval(function() {
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "#ddd";
ctx.fillRect(0, 0, 512, 512);
function drawPixel(x, y, colour) {
r = Math.floor(colour / 16) * 85;
g = Math.floor(colour / 4) % 4 * 85;
b = colour % 4 * 85;
if (!(colour === 64)) {
ctx.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")";
ctx.fillRect(16 + x, 16 + y, 80, 80);
ctx.fillStyle = "rgb(" + (r - shade) + ", " + (g - shade) + ", " + (b - shade) + ")";
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(16 + x, 16 + y);
ctx.lineTo(16 + x, 96 + y);
ctx.lineTo(x, 80 + y);
ctx.fill();
ctx.fillStyle = "rgb(" + (r + shade) + ", " + (g + shade) + ", " + (b + shade) + ")";
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(80 + x, y);
ctx.lineTo(96 + x, 16 + y);
ctx.lineTo(16 + x, 16 + y);
ctx.fill();
}
}
for (i = 0; i < 64; i++) {
if (!(blockData.value.charAt(i) === "")) {
drawPixel(304 - (i % 4 * 80) + (Math.floor(i / 4) % 4 * 16), 304 + (Math.floor(i / 4) % 4 * 16) - (Math.floor(i / 16) % 4 * 80), base64.indexOf(blockData.value.charAt(i)));
}
}
});
function loadData(data) {
document.getElementById("blockData").value = data;
}
</script>
<span>Presets:</span>
<button onclick="loadData("kkkkkkqkkkkkkqkkkkkkqkkkkkkqkkkkkkqkkkkkkqkkkkkkIIIIIIIIIIIIIIII")">Grass Block</button>
<button onclick="loadData("kkkkk55kk55kkkkkkkkkk55kk55kkkkkkkkkk55kk55kkkkkkkkkk55kk55kkkkk")">Oak Log</button>
<button onclick="loadData("E=E==E=EE=E==E=E=E=EE=E==E=EE=E=E=E==E=EE=E==E=E=E=EE=E==E=EE=E=")">Oak Leaves</button>
<button onclick="loadData("wwwwwwwwwwwwwwww/A/AA/A//A/AA/A/A/A//A/AA/A//A/AwwwwwAAwwAAwwwww")">TNT</button>
<button onclick="loadData("qqqqqqPqqqqqqPqqqqqqPqqqqqqPqqqqqqPqqqqqqPqqqqqqPqqqqqqPqqqqqqPq")">Diamond Ore</button>
<button onclick="loadData("t=t==t=tt=t==t=tt=t==t=tt=t==t=tt=t==t=tt=t==t=tt=t==t=tt=t==t=t")">Sugar Canes</button>
</body>
</html>