Last active
September 10, 2021 16:39
-
-
Save DaltonWebDev/82d623c253e29d15567e8d164df96fdf to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | |
} | |
]); | |
} | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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