https://potch.me/js/sirius.js?1780095800090

1const SIZE = 24;
2const SCALE = 3;
3const SSIZE = SCALE * SIZE;
4
5const standing = {
6  speed: 750,
7  frames: [0, 2],
8};
9const walking = {
10  speed: 150,
11  frames: [10, 8, 9, 8],
12};
13const sleeping = {
14  speed: 1000,
15  frames: [5, 6, 7, 6],
16};
17const sitting = {
18  speed: 500,
19  frames: [3],
20};
21const laying = {
22  speed: 1000,
23  frames: [4],
24};
25
26let pose = sleeping;
27let direction = 1;
28let frame = 0;
29let cooldown = 10;
30
31function go(img) {
32  const el = document.createElement("div");
33  Object.assign(el.style, {
34    width: SSIZE + "px",
35    height: SSIZE + "px",
36    overflow: "hidden",
37    position: "fixed",
38    bottom: 0,
39    left: document.body.offsetWidth * 0.9 - SSIZE + "px",
40  });
41  el.append(img);
42  Object.assign(img.style, {
43    position: "absolute",
44    top: "0",
45    left: 0,
46    imageRendering: "pixelated",
47    width: img.width * SCALE + "px",
48    height: img.height * SCALE + "px",
49    filter: "drop-shadow(0 1px 3px #0006)",
50  });
51  document.body.append(el);
52
53  const setSprite = (pos) => {
54    pos += direction * 16;
55    const y = (pos / 8) | 0;
56    const x = pos % 8;
57    img.style.left = -x * SSIZE + "px";
58    img.style.top = -y * SSIZE + "px";
59  };
60
61  function changePose(p) {
62    pose = p;
63    frame = 0;
64    cooldown = 10;
65  }
66
67  function update() {
68    frame = (frame + 1) % pose.frames.length;
69    if (pose === walking) {
70      if (cooldown > 0) {
71        cooldown--;
72      } else {
73        if (Math.random() > 0.95) {
74          changePose(sitting);
75        } else if (Math.random() > 0.85) {
76          changePose(standing);
77        }
78      }
79      if (pose === walking && direction) {
80        if (el.offsetLeft + SSIZE + SCALE * 2 < document.body.offsetWidth) {
81          el.style.left = el.offsetLeft + SCALE * 2 + "px";
82        } else {
83          if (Math.random() > 0.5) {
84            changePose(standing);
85          } else {
86            direction = 0;
87          }
88        }
89      }
90      if (pose === walking && !direction) {
91        if (el.offsetLeft - SCALE * 2 > 0) {
92          el.style.left = el.offsetLeft - SCALE * 2 + "px";
93        } else {
94          if (Math.random() > 0.5) {
95            changePose(standing);
96          } else {
97            direction = 1;
98          }
99        }
100      }
101    } else if (pose === standing) {
102      if (cooldown > 0) {
103        cooldown--;
104      } else {
105        if (Math.random() > 0.9) {
106          direction = Math.random() > 0.5 ? 1 : 0;
107          changePose(walking);
108        } else if (Math.random() > 0.85) {
109          changePose(sitting);
110        }
111      }
112    } else if (pose === sitting) {
113      if (cooldown > 0) {
114        cooldown--;
115      } else {
116        if (Math.random() > 0.95) {
117          direction = Math.random() > 0.5 ? 1 : 0;
118          changePose(walking);
119        } else if (Math.random() > 0.9) {
120          changePose(laying);
121        }
122      }
123    } else if (pose === laying) {
124      if (Math.random() > 0.95) {
125        changePose(sitting);
126      } else if (Math.random() > 0.9) {
127        changePose(sleeping);
128      }
129    } else if (pose === sleeping) {
130      if (cooldown > 0) {
131        cooldown--;
132      } else {
133        if (Math.random() > 0.95) {
134          changePose(laying);
135        }
136      }
137    }
138
139    setSprite(pose.frames[frame]);
140    setTimeout(update, pose.speed);
141  }
142
143  el.onclick = () => {
144    if (pose === sleeping) {
145      changePose(laying);
146    } else if (pose === laying) {
147      changePose(sitting);
148    }
149  };
150  update();
151}
152
153const i = new Image();
154i.onload = () => go(i);
155i.src = "/img/sirius-sprite.png";