Contents for a bookmarklet that adds an ATTACK GOAT to your page! Hover over an element and press `delete`, then the Goat will ATTACK!

attack_goat.js

var goatSource = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB6VBMVEX////8whv8whv8whv8whv8whv8whv8whv8whv8whv8whv8whv8whv8whv8whv8whvkvDZ4o614o614o614o63bukC9s2CPqJR4o614o614o614o614o614o614o614o62QrqiLsLmfvsWyytCqxcuRsbF4o614o63M2tqWt797pa/K29+GrLWNsbq/1Ni3ztOAqLKsx82Ps7ukwciiwMZ4o62ausKBqbKHrbbC1dqBqbN5pK2RtLx7pa+IrreRtLx7pa94o618pq94o63B1dmwyc/T4eSdvMS0zNKEq7T8whvbukC6smShrYCQqZJ4o62ApaSZq4mxsG3CtFvjvDaIp5upr3eZsqWZs6m7ybrV4uXu8/X////d6OrM2tiyxbiIqqeyxr67y8GRr6rE08v3+frm7vDM3OCiwMaIrreRtLzH2d22zdPY2NiXl5fl5eWKioovLy/y8vKkpKRvb2+busLLy8t8fHxiYmJVVVWXuMDM3eDZ5ejX4+fa5ui+vr6xsbGrxszf6evv9PWAqbLu9PW80dbN3eB7pa+IrrZHR0dISEiGrbV6pa+zy9E7Ozu/1Nimwsm70daZusGMsbmAqLLE19uyy9B/qLH1+PmJr7fS4OSqxcyYuMCoxMrI2t670NWLsLifvsVPs21lAAAASnRSTlMAEJDAsIAwIGCg8OBQQNBwrEBggHC/qHQQUKDwsCCQwP7g4uDk6zDQ/eL29ujk7vDu6+jt6ODr8Ov3+/719e3r+ej3fvn59dzo5WAeJyQAAAABYktHRACIBR1IAAAAB3RJTUUH4QYCEwsWPcUuHwAAB+dJREFUeNrVW/d/20QUV+qmbpq2IMuAIg9hOzjETpM4rZuwWmYpbkEdjGJLbDkd1KmTQhtWAi1lBFJoSICy+UuxT7Ju6LQl58P7JR+v+3711r337sIwFjKwIxbbObiLcSHx3UOxPbXh2GCcCVEGa0CGdzt9cW+sZsi+8Al0KNiuug+Br9V2h0ggDpfdwVjbCYWvDQ8wUaigVhuyWHjXfgx/zy4mVEFW30/H34Ph74+Hi8/EkfWHnPGH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';
var goatId = 'attack-goat';
var goatDiv = (
	document.getElementById(goatId)
	|| document.createElement('div')
);
goatDiv.id = goatId;
goatDiv.style = `
	background: url('${goatSource}');
	width: 128px;
	height: 128px;
	top: 0;
	left: 0;
	z-index: 1000;
	position: absolute;
`;
document.body.appendChild(goatDiv);
var goatPosition = {
	x: 0,
	y: 0
};
if(handleMouseMove) {
	document.removeEventListener('mousemove', handleMouseMove);
	document.removeEventListener('keyup', eatElement);
}
var lastHoveredElement = null;
var handleMouseMove = function(event) {
	//console.log(event);
	//goatDiv.style.left = (event.pageX + 100) + 'px';
	//goatDiv.style.top = event.pageY + 'px';
	lastHoveredElement = event.target;
};
document.addEventListener('mousemove', handleMouseMove);
var lerp = function(a, b, x) {
	return a + (( b - a ) * x);
};
var eatElement = function(event) {
	//console.log(event);
	if(event.key === 'Delete') {
		var goatSpeed = 1;
		var startTime = performance.now();
		var progress = 0;
		var elementRect = lastHoveredElement.getBoundingClientRect();
		var elementPosition = {
			x: elementRect.right,
			y: elementRect.top
		};
		var goatPreviousPosition = Object.assign(
			{},
			goatPosition
		);
		var distance = Math.sqrt(
			Math.pow(elementPosition.x-goatPosition.x, 2)
			+ Math.pow(elementPosition.y-goatPosition.y, 2)
		);
		var duration = distance / goatSpeed;
		var animate = function(time) {
			progress = Math.min(1, (time - startTime) / duration);
			if(progress !== 1) {
				requestAnimationFrame(animate);
			}else{
				lastHoveredElement.parentNode.removeChild(lastHoveredElement);
			}
			goatPosition.x = lerp(
				goatPreviousPosition.x,
				elementPosition.x,
				progress
			);
			goatPosition.y = lerp(
				goatPreviousPosition.y,
				elementPosition.y,
				progress
			);
			goatDiv.style.left = goatPosition.x + 'px';
			goatDiv.style.top = goatPosition.y + 'px';
		};
		requestAnimationFrame(animate);
	}
};
document.addEventListener('keyup', eatElement);