Creeper
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
function clearCanvas() {
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
k.clearRect(0, 0, 200, 200);
}
function drawLegs() {
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
k.fillStyle = “#00AA00”;
k.fillRect(20, 150, 50, 50);
k.fillRect(130, 150, 50, 50);
}
function drawBody() {
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
k.fillStyle = “#00AA00”;
k.fillRect(65, 50, 70, 120);
}
function drawHead() {
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
k.fillStyle = “#00AA00”;
k.fillRect(50, 0, 100, 60);
}
function drawEyes() {
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
k.fillStyle = “#000000”;
k.fillRect(75, 20, 10, 10);
k.fillRect(115, 20, 10, 10);
}
function drawMouth() {
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
k.fillStyle = “#000000”;
k.fillRect(96, 40, 15, 10);
k.fillRect(86, 45, 10, 15);
k.fillRect(111, 45, 10, 15);
}
function drawDots(){
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
k.fillStyle = “#DDF3C2”;
k.fillRect(115, 80, 12, 12);
k.fillRect(70, 100, 13, 13);
k.fillRect(80, 110, 12, 12);
k.fillRect(105, 135, 12, 12);
}
function drawEnergy(){
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
k.fillStyle = “lightblue”;
//left
k.fillRect(10, 140, 5, 60);
k.fillRect(10, 137, 47, 5);
k.fillRect(52, 75, 5, 62);
k.fillRect(37, 75, 15, 5);
k.fillRect(37, 0, 5, 80);
//right
k.fillRect(185, 140, 5, 60);
k.fillRect(185, 140, -40, 5);
k.fillRect(145, 80, 5, 62);
k.fillRect(145, 75, 15, 5);
k.fillRect(160, 0, 5, 80);
}
function drawExplosion() {
let k = document.getElementById(“kriperCanvas”).getContext(“2d”);
k.clearRect(0, 0, 200, 200);
k.strokeStyle = “orange”;
k.lineWidth = 2;
// Center
k.moveTo(100, 100);
k.lineTo(100, 70);
// Top
for (let i = 0; i < 360; i += 30) {
const angle = (i * Math.PI) / 180;
const x = 100 + 60 * Math.cos(angle);
const y = 70 + 60 * Math.sin(angle);
k.moveTo(100, 70);
k.lineTo(x, y);
}
k.stroke();
}
function drawCreeper() {
clearCanvas();
drawLegs();
drawBody();
drawHead();
drawEyes();
drawMouth();
drawDots();
drawEnergy();
}