Recipe - Chip Cursor Pet - just for fun

Skill level: Beginner

Organization: Houston's First Baptist Church

---

{# strip images & classes from the HTML but otherwise leave structure #}

A tiny pixel-art Chip the Lobster cursor pet that follows your mouse around any Rock page. He runs after your cursor, flips direction to face where he's goin. 

How-To

1. Add an HTML Block to your desired page (or add this to the pre/post html of a block maybe your check-in block haha)

2. Paste the following code into the HTML Block:

   <script>
   (function () {
     const canvas = document.createElement('canvas');
     canvas.width = 48;
     canvas.height = 48;
     const ctx = canvas.getContext('2d');
     const S = 48;
   
     canvas.style.cssText = 'position:fixed;width:48px;height:48px;image-rendering:pixelated;pointer-events:none;z-index:99999;left:0;top:0;';
     document.body.appendChild(canvas);
   
     let petX = window.innerWidth / 2;
     let petY = window.innerHeight / 2;
     let mouseX = petX, mouseY = petY;
     let running = false, facingLeft = false;
     let frame = 0, tick = 0, idleTimer = null;
   
     const C = {
       shell:  '#e84a0c',
       dark:   '#a32800',
       claw:   '#c03800',
       eye:    '#1a0a00',
       white:  '#ffffff',
       rock:   '#c8d0d8',
       rockDk: '#8898a8',
       belly:  '#f9c49a',
     };
   
     function px(x, y, color, w=1, h=1) {
       ctx.fillStyle = color;
       ctx.fillRect(x*2, y*2, w*2, h*2);
     }
   
     function draw(run, left) {
       ctx.clearRect(0, 0, S, S);
       ctx.save();
       if (left) { ctx.translate(S, 0); ctx.scale(-1, 1); }
   
       const b = run ? (frame % 2 === 0 ? -1 : 0) : 0;
       const br = run ? 0 : (Math.sin(Date.now() / 500) > 0 ? 1 : 0);
   
       px(8, 17+b, C.dark, 8, 1);
       px(7, 18+b, C.shell, 10, 5);
       px(6, 18+b, C.dark, 1, 5);
       px(17, 18+b, C.dark, 1, 5);
       px(8, 23+b, C.dark, 8, 1);
       px(5, 22+b, C.shell, 3, 2);
       px(4, 23+b, C.dark, 2, 1);
       px(16, 22+b, C.shell, 3, 2);
       px(18, 23+b, C.dark, 2, 1);
       px(8, 24+b, C.dark, 8, 1);
       px(9, 19+b, C.belly, 6, 3);
   
       px(7, 11+b, C.dark, 10, 1);
       px(6, 12+b, C.white, 12, 6+br);
       px(5, 12+b, C.dark, 1, 6+br);
       px(17, 12+b, C.dark, 1, 6+br);
       px(6, 18+b+br, C.dark, 12, 1);
       px(9, 13+b, C.rock, 6, 4);
       px(11, 14+b, C.rockDk, 2, 2);
   
       px(7, 6+b, C.dark, 10, 1);
       px(6, 7+b, C.shell, 12, 5);
       px(5, 7+b, C.dark, 1, 5);
       px(17, 7+b, C.dark, 1, 5);
       px(6, 12+b, C.dark, 12, 1);
       px(10, 4+b, C.dark, 4, 3);
       px(11, 5+b, C.shell, 2, 2);
   
       px(7, 8+b, C.dark, 3, 3);
       px(8, 9+b, C.eye, 1, 1);
       px(14, 8+b, C.dark, 3, 3);
       px(15, 9+b, C.eye, 1, 1);
       px(8, 8+b, C.white, 1, 1);
       px(15, 8+b, C.white, 1, 1);
   
       px(9, 3+b, C.dark, 1, 4);
       px(8, 2+b, C.dark, 1, 2);
       px(7, 1+b, C.dark, 1, 1);
       px(14, 3+b, C.dark, 1, 4);
       px(15, 2+b, C.dark, 1, 2);
       px(16, 1+b, C.dark, 1, 1);
   
       px(17, 10+b, C.dark, 5, 2);
       px(18, 9+b, C.claw, 7, 6);
       px(17, 9+b, C.dark, 1, 6);
       px(25, 9+b, C.dark, 1, 6);
       px(18, 8+b, C.dark, 7, 1);
       px(18, 15+b, C.dark, 7, 1);
       px(22, 10+b, C.dark, 1, 2);
       px(22, 13+b, C.dark, 1, 2);
   
       px(2, 11+b, C.dark, 4, 2);
       px(1, 12+b, C.claw, 4, 4);
       px(0, 12+b, C.dark, 1, 4);
       px(5, 13+b, C.dark, 1, 3);
       px(1, 11+b, C.dark, 4, 1);
       px(1, 16+b, C.dark, 4, 1);
   
       if (run) {
         const lo = frame % 2 === 0 ? 1 : -1;
         px(8,  19+b+lo, C.dark, 1, 4);
         px(11, 19+b-lo, C.dark, 1, 4);
         px(14, 19+b+lo, C.dark, 1, 4);
         px(8,  23+b+lo, C.shell, 1, 1);
         px(11, 23+b-lo, C.shell, 1, 1);
         px(14, 23+b+lo, C.shell, 1, 1);
       } else {
         px(8,  19+b, C.dark, 1, 3);
         px(11, 19+b, C.dark, 1, 3);
         px(14, 19+b, C.dark, 1, 3);
       }
   
       ctx.restore();
     }
   
     document.addEventListener('mousemove', e => {
       mouseX = e.clientX;
       mouseY = e.clientY;
       running = true;
       clearTimeout(idleTimer);
       idleTimer = setTimeout(() => { running = false; }, 1400);
     });
   
     function loop() {
       tick++;
       if (tick % 7 === 0) frame++;
   
       const dx = mouseX - petX;
       const dy = mouseY - petY;
       const dist = Math.sqrt(dx*dx + dy*dy);
   
       if (running && dist > 12) {
         facingLeft = dx < 0;
         petX += (dx / dist) * 3.5;
         petY += (dy / dist) * 3.5;
       }
   
       canvas.style.left = (petX - S/2) + 'px';
       canvas.style.top  = (petY - S/2) + 'px';
   
       draw(running && dist > 12, facingLeft);
       requestAnimationFrame(loop);
     }
   
     loop();
   })();
   </script>
   

3. Save the block. Chip will appear immediately on page load and follow your cursor. (big chip is not included in this recipe, for him go here: All Seeing Chip - just for fun.)

Screenshots

• /GetImage.ashx?guid=f17d5fc1-4a86-4421-9d71-9e5cd2a77574