Skip to content

Instantly share code, notes, and snippets.

@DaltonWebDev

DaltonWebDev/index.html

Last active September 10, 2021 16:39
Show Gist options
  • Save DaltonWebDev/82d623c253e29d15567e8d164df96fdf to your computer and use it in GitHub Desktop.
Save DaltonWebDev/82d623c253e29d15567e8d164df96fdf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>BlockBuddies</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="card">
<canvas id="blockbuddy"></canvas>
<div id="cardContent">
<h1 id="buddyName">BlockBuddy</h1>
<h2 id="buddyNumber">#0</h2>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
for(var i = 1;i <= 10000;i++) {
try{throw i}
catch(ii) {
setTimeout(function(){
generate(ii);
},1000);
}
}
function generate(i) {
let card = document.querySelector("#card");
if (i == 1 || i == 420 || i == 5555 || i == 10000) {
card.classList.add("limitedEdition");
} else {
card.classList.remove("limitedEdition");
}
let buddyNumber = document.querySelector("#buddyNumber");
let int = new Intl.NumberFormat("en-IN", { maximumSignificantDigits: 3 }).format(i);
buddyNumber.innerText = `#${int}`;
let canvas = document.querySelector("#blockbuddy");
let ctx = canvas.getContext("2d");
ctx.canvas.width = 24;
ctx.canvas.height = 24;
let hairTypes = [
"short",
"messy",
"default"
];
let hairType = hairTypes[Math.floor(Math.random()*hairTypes.length)];
let hairColors = [
"#725430",
"#5e4425",
"#b28753",
"#e3bb8a",
"#9a7140",
"#303030",
"#e0e0e0",
"#9f3a07",
"#6e569e", // rare
"#a32e41", // rare
"#38513d", // rare
"#ffcbd4" // rare
];
let hairColor = hairColors[Math.floor(Math.random()*hairColors.length)];
let eyeTypes = [
"sunglasses",
"3d-glasses",
"angry",
"surprised",
"skeptical",
"default"
];
let eyeType = eyeTypes[Math.floor(Math.random()*eyeTypes.length)];
let eyeColors = [
"#27626f",
"#494716",
"#553122",
"#625d48",
"#b6ffbe",
"#bcfaff",
"#56682d",
"#ead490", // rare
"#91a3b0", // rare
"#c26eaa", // rare
"#aba0ba", // rare
"#168768", // rare
"#e0a3ae" // rare
];
let eyeColor = eyeColors[Math.floor(Math.random()*eyeColors.length)];
let mouthTypes = [
"happy",
"sad",
"default"
];
let mouthType = mouthTypes[Math.floor(Math.random()*mouthTypes.length)];
let skinTones = [
"#d6b49c",
"#cea58b",
"#c18f76",
"#936f59",
"#d19c88",
"#fce3cf",
"#fad7c1",
"#fadbc1",
"#fce0ca",
"#fad8bc"
];
let skinTone = skinTones[Math.floor(Math.random()*skinTones.length)];
generateBuddy(hairType, hairColor, eyeType, eyeColor, mouthType, skinTone);
/* Functions */
function draw(drawingArray) {
drawingArray.forEach(element => {
ctx.fillStyle = element.color;
ctx.fillRect(element.x, element.y, 1, 1);
});
}
function generateBuddy(hairType, hairColor, eyeType, eyeColor, mouthType, skinColor) {
// Face Outline
ctx.fillStyle = "black";
ctx.fillRect(5, 7, 14, 12);
// Face Background
ctx.fillStyle = skinColor;
ctx.fillRect(6, 8, 12, 10);
switch(hairType) {
case "short":
draw([
{
"x": 5,
"y": 6,
"color": hairColor
},
{
"x": 6,
"y": 6,
"color": hairColor
},
{
"x": 7,
"y": 6,
"color": hairColor
},
{
"x": 8,
"y": 6,
"color": hairColor
},
{
"x": 9,
"y": 6,
"color": hairColor
},
{
"x": 10,
"y": 6,
"color": hairColor
},
{
"x": 11,
"y": 6,
"color": hairColor
},
{
"x": 12,
"y": 6,
"color": hairColor
},
{
"x": 13,
"y": 6,
"color": hairColor
},
{
"x": 14,
"y": 6,
"color": hairColor
},
{
"x": 15,
"y": 6,
"color": hairColor
},
{
"x": 16,
"y": 6,
"color": hairColor
},
{
"x": 17,
"y": 6,
"color": hairColor
},
{
"x": 18,
"y": 6,
"color": hairColor
},
{
"x": 5,
"y": 7,
"color": hairColor
},
{
"x": 6,
"y": 7,
"color": hairColor
},
{
"x": 7,
"y": 7,
"color": hairColor
},
{
"x": 8,
"y": 7,
"color": hairColor
},
{
"x": 9,
"y": 7,
"color": hairColor
},
{
"x": 10,
"y": 7,
"color": hairColor
},
{
"x": 11,
"y": 7,
"color": hairColor
},
{
"x": 12,
"y": 7,
"color": hairColor
},
{
"x": 13,
"y": 7,
"color": hairColor
},
{
"x": 14,
"y": 7,
"color": hairColor
},
{
"x": 15,
"y": 7,
"color": hairColor
},
{
"x": 16,
"y": 7,
"color": hairColor
},
{
"x": 17,
"y": 7,
"color": hairColor
},
{
"x": 18,
"y": 7,
"color": hairColor
},
{
"x": 5,
"y": 8,
"color": hairColor
},
{
"x": 6,
"y": 8,
"color": hairColor
},
{
"x": 17,
"y": 8,
"color": hairColor
},
{
"x": 18,
"y": 8,
"color": hairColor
}
]);
break;
case "messy":
draw([
{
"x": 5,
"y": 6,
"color": hairColor
},
{
"x": 6,
"y": 6,
"color": hairColor
},
{
"x": 7,
"y": 6,
"color": hairColor
},
{
"x": 8,
"y": 6,
"color": hairColor
},
{
"x": 9,
"y": 6,
"color": hairColor
},
{
"x": 10,
"y": 6,
"color": hairColor
},
{
"x": 11,
"y": 6,
"color": hairColor
},
{
"x": 12,
"y": 6,
"color": hairColor
},
{
"x": 13,
"y": 6,
"color": hairColor
},
{
"x": 14,
"y": 6,
"color": hairColor
},
{
"x": 15,
"y": 6,
"color": hairColor
},
{
"x": 16,
"y": 6,
"color": hairColor
},
{
"x": 17,
"y": 6,
"color": hairColor
},
{
"x": 18,
"y": 6,
"color": hairColor
},
{
"x": 5,
"y": 7,
"color": hairColor
},
{
"x": 6,
"y": 7,
"color": hairColor
},
{
"x": 7,
"y": 7,
"color": hairColor
},
{
"x": 8,
"y": 7,
"color": hairColor
},
{
"x": 9,
"y": 7,
"color": hairColor
},
{
"x": 10,
"y": 7,
"color": hairColor
},
{
"x": 11,
"y": 7,
"color": hairColor
},
{
"x": 12,
"y": 7,
"color": hairColor
},
{
"x": 13,
"y": 7,
"color": hairColor
},
{
"x": 14,
"y": 7,
"color": hairColor
},
{
"x": 15,
"y": 7,
"color": hairColor
},
{
"x": 16,
"y": 7,
"color": hairColor
},
{
"x": 17,
"y": 7,
"color": hairColor
},
{
"x": 18,
"y": 7,
"color": hairColor
},
{
"x": 12,
"y": 8,
"color": hairColor
},
{
"x": 11,
"y": 9,
"color": hairColor
},
{
"x": 11,
"y": 5,
"color": hairColor
},
{
"x": 17,
"y": 5,
"color": hairColor
},
{
"x": 16,
"y": 4,
"color": hairColor
},
{
"x": 12,
"y": 4,
"color": hairColor
},
{
"x": 18,
"y": 8,
"color": hairColor
},
{
"x": 17,
"y": 9,
"color": hairColor
},
{
"x": 5,
"y": 8,
"color": hairColor
},
{
"x": 6,
"y": 9,
"color": hairColor
},
{
"x": 6,
"y": 5,
"color": hairColor
},
{
"x": 7,
"y": 4,
"color": hairColor
},
{
"x": 9,
"y": 5,
"color": hairColor
},
{
"x": 14,
"y": 5,
"color": hairColor
},
]);
break;
default:
// bald
}
switch(eyeType) {
// Sunglasses
case "sunglasses":
draw([
// Left Eye (Eyebrow)
{
"x": 8,
"y": 10,
"color": hairColor
},
{
"x": 9,
"y": 10,
"color": hairColor
},
// Left Eye (Ear)
{
"x": 7,
"y": 11,
"color": "black"
},
{
"x": 6,
"y": 11,
"color": "black"
},
{
"x": 5,
"y": 11,
"color": "black"
},
// Left Eye (Lense)
{
"x": 8,
"y": 11,
"color": "black"
},
{
"x": 9,
"y": 11,
"color": "black"
},
{
"x": 8,
"y": 12,
"color": "black"
},
{
"x": 9,
"y": 12,
"color": "black"
},
// Right Eye (Eyebrow)
{
"x": 15,
"y": 10,
"color": hairColor
},
{
"x": 14,
"y": 10,
"color": hairColor
},
// Right Eye (Lense)
{
"x": 14,
"y": 11,
"color": "black"
},
{
"x": 15,
"y": 11,
"color": "black"
},
{
"x": 14,
"y": 12,
"color": "black"
},
{
"x": 15,
"y": 12,
"color": "black"
},
// Right Eye (Ear)
{
"x": 16,
"y": 11,
"color": "black"
},
{
"x": 17,
"y": 11,
"color": "black"
},
{
"x": 18,
"y": 11,
"color": "black"
},
// Nose
{
"x": 10,
"y": 11,
"color": "black"
},
{
"x": 11,
"y": 11,
"color": "black"
},
{
"x": 12,
"y": 11,
"color": "black"
},
{
"x": 13,
"y": 11,
"color": "black"
}
]);
break;
// 3D Glasses
case "3d-glasses":
draw([
// Left Eye (Eyebrow)
{
"x": 8,
"y": 10,
"color": hairColor
},
{
"x": 9,
"y": 10,
"color": hairColor
},
// Left Eye (Ear)
{
"x": 7,
"y": 11,
"color": "white"
},
{
"x": 6,
"y": 11,
"color": "white"
},
{
"x": 5,
"y": 11,
"color": "white"
},
// Left Eye (Lense)
{
"x": 8,
"y": 11,
"color": "blue"
},
{
"x": 9,
"y": 11,
"color": "blue"
},
{
"x": 8,
"y": 12,
"color": "blue"
},
{
"x": 9,
"y": 12,
"color": "blue"
},
// Right Eye (Eyebrow)
{
"x": 15,
"y": 10,
"color": hairColor
},
{
"x": 14,
"y": 10,
"color": hairColor
},
// Right Eye (Lense)
{
"x": 14,
"y": 11,
"color": "red"
},
{
"x": 15,
"y": 11,
"color": "red"
},
{
"x": 14,
"y": 12,
"color": "red"
},
{
"x": 15,
"y": 12,
"color": "red"
},
// Right Eye (Ear)
{
"x": 16,
"y": 11,
"color": "white"
},
{
"x": 17,
"y": 11,
"color": "white"
},
{
"x": 18,
"y": 11,
"color": "white"
},
// Nose
{
"x": 10,
"y": 11,
"color": "white"
},
{
"x": 11,
"y": 11,
"color": "white"
},
{
"x": 12,
"y": 11,
"color": "white"
},
{
"x": 13,
"y": 11,
"color": "white"
}
]);
break;
// Angry Eyes
case "angry":
draw([
// Left Eye (Eyebrow)
{
"x": 8,
"y": 10,
"color": hairColor
},
{
"x": 9,
"y": 11,
"color": hairColor
},
// Left Eye (Pupil)
{
"x": 9,
"y": 12,
"color": eyeColor
},
// Left Eye (White)
{
"x": 8,
"y": 12,
"color": "white"
},
{
"x": 8,
"y": 11,
"color": "white"
},
// Right Eye (Eyebrow)
{
"x": 15,
"y": 10,
"color": hairColor
},
{
"x": 14,
"y": 11,
"color": hairColor
},
// Right Eye (Pupil)
{
"x": 14,
"y": 12,
"color": eyeColor
},
// Right Eye (White)
{
"x": 15,
"y": 12,
"color": "white"
},
{
"x": 15,
"y": 11,
"color": "white"
}
]);
break;
case "surprised":
draw([
// Left Eye (Eyebrow)
{
"x": 8,
"y": 9,
"color": hairColor
},
{
"x": 9,
"y": 9,
"color": hairColor
},
// Left Eye (Pupil)
{
"x": 9,
"y": 11,
"color": "white"
},
{
"x": 9,
"y": 12,
"color": eyeColor
},
// Left Eye (White)
{
"x": 8,
"y": 12,
"color": "white"
},
{
"x": 8,
"y": 11,
"color": "white"
},
// Right Eye (Eyebrow)
{
"x": 15,
"y": 9,
"color": hairColor
},
{
"x": 14,
"y": 9,
"color": hairColor
},
// Right Eye (Pupil)
{
"x": 14,
"y": 12,
"color": eyeColor
},
{
"x": 14,
"y": 11,
"color": "white"
},
// Right Eye (White)
{
"x": 15,
"y": 12,
"color": "white"
},
{
"x": 15,
"y": 11,
"color": "white"
}
]);
break;
case "skeptical":
draw([
// Left Eye (Eyebrow)
{
"x": 8,
"y": 10,
"color": hairColor
},
{
"x": 9,
"y": 10,
"color": hairColor
},
// Left Eye (Pupil)
{
"x": 9,
"y": 11,
"color": eyeColor
},
{
"x": 9,
"y": 12,
"color": eyeColor
},
// Left Eye (White)
{
"x": 8,
"y": 12,
"color": "white"
},
{
"x": 8,
"y": 11,
"color": "white"
},
// Right Eye (Eyebrow)
{
"x": 15,
"y": 9,
"color": hairColor
},
{
"x": 14,
"y": 9,
"color": hairColor
},
// Right Eye (Pupil)
{
"x": 14,
"y": 12,
"color": eyeColor
},
{
"x": 14,
"y": 11,
"color": eyeColor
},
// Right Eye (White)
{
"x": 15,
"y": 12,
"color": "white"
},
{
"x": 15,
"y": 11,
"color": "white"
}
]);
break;
// Default
default:
draw([
// Left Eye (Eyebrow)
{
"x": 8,
"y": 10,
"color": hairColor
},
{
"x": 9,
"y": 10,
"color": hairColor
},
// Left Eye (Pupil)
{
"x": 9,
"y": 11,
"color": eyeColor
},
{
"x": 9,
"y": 12,
"color": eyeColor
},
// Left Eye (White)
{
"x": 8,
"y": 12,
"color": "white"
},
{
"x": 8,
"y": 11,
"color": "white"
},
// Right Eye (Eyebrow)
{
"x": 15,
"y": 10,
"color": hairColor
},
{
"x": 14,
"y": 10,
"color": hairColor
},
// Right Eye (Pupil)
{
"x": 14,
"y": 12,
"color": eyeColor
},
{
"x": 14,
"y": 11,
"color": eyeColor
},
// Right Eye (White)
{
"x": 15,
"y": 12,
"color": "white"
},
{
"x": 15,
"y": 11,
"color": "white"
}
]);
}
switch(mouthType) {
// Happy Mouth
case "happy":
draw([
{
"x": 10,
"y": 14,
"color": "black"
},
{
"x": 11,
"y": 15,
"color": "black"
},
{
"x": 12,
"y": 15,
"color": "black"
},
{
"x": 13,
"y": 14,
"color": "black"
}
]);
break;
// Sad Mouth
case "sad":
draw([
{
"x": 10,
"y": 15,
"color": "black"
},
{
"x": 11,
"y": 14,
"color": "black"
},
{
"x": 12,
"y": 14,
"color": "black"
},
{
"x": 13,
"y": 15,
"color": "black"
}
]);
break;
// Neutral
default:
draw([
{
"x": 10,
"y": 15,
"color": "black"
},
{
"x": 11,
"y": 15,
"color": "black"
},
{
"x": 12,
"y": 15,
"color": "black"
},
{
"x": 13,
"y": 15,
"color": "black"
}
]);
}
}
};
Raw
style.css
#card {
background-color: black;
width: 340px;
height: 440px;
padding-top: 20px;
margin: 0 auto;
font-family: "Press Start 2P", cursive;
font-size: 16px;
}
.preview {
width: 340px;
image-rendering: pixelated;
}
.limitedEdition {
background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
#blockbuddy {
width: 300px;
max-width: 100%;
margin: 0 auto;
aspect-ratio: 1 / 1;
background-color: lightgrey;
image-rendering: pixelated;
display: block;
}
#cardContent {
color: #fff;
width: 300px;
margin: 0 auto;
margin-top: 40px;
text-align: center;
}
#buddyName {
margin-top: 0px;
margin-bottom: 20px;
font-size: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment