M's Funhouse

Website Shimeji

One of my first creations that I can confidently say I completed on my own: a webpage shimeji! It can only walk and jump, but its still a cute addition to any webpage! You can find the code here!
The CSS and javascript are embedded into the html so all you need to do is copy and paste the code in the proper places of your html! Feel free to edit anything, and there is no need to credit me! Just don't claim you made it on your own, because that would be kind of weird...
I don't have any current plans to create a version that includes wall+ceiling climbing or duplicating or anything, but if enough people want it, maybe I will! I hope you guys are able to have a lot of fun with this.

Here is the code if for some reason, the pastebin doesn't work!

#shimeji {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100px;
        height: auto;
        z-index: 9999;
        transition: left 2s linear, bottom 0.5s ease-in-out;
        pointer-events: none;
    }

#shimeji.flip-horizontal {
        transform: scaleX(-1);
    }
</style>
</head>
<body>
    <img id="shimeji" src="images/idle.gif" alt="Shimeji" />

function walk(toX = null, callback = idle) {
            const screenWidth = window.innerWidth;
            const maxX = screenWidth - shimeji.offsetWidth;
            let targetX;

if (toX !== null) {
                targetX = toX;
                goingRight = targetX > positionX;
            } else {
                if (positionX <= 0) {
                    goingRight = true;
                } else if (positionX >= maxX) {
                    goingRight = false;
                } else {
                    if (Math.random() < 0.5) {
                        goingRight = !goingRight;
                    }
                }

const maxDistance = 300;
                const minDistance = 50;
                const distance = Math.floor(Math.random() * (maxDistance - minDistance)) + minDistance;

targetX = goingRight
                    ? Math.min(positionX + distance, maxX)
                    : Math.max(positionX - distance, 0);
            }

shimeji.src = goingRight
                ? "images/walk-right.gif"
                : "images/walk-left.gif";

const distanceToWalk = Math.abs(targetX - positionX);
            const speed = 100;
            const duration = (distanceToWalk / speed) * 1000;

shimeji.style.transition = `left ${duration}ms linear`;
            shimeji.style.left = `${targetX}px`;
            positionX = targetX;

setTimeout(() => {
                callback();
            }, duration);
        }

function jump() {
            shimeji.src = "images/jump.gif";
            shimeji.style.transition = "bottom 0.4s ease-out";
            shimeji.style.bottom = "150px";

setTimeout(() => {
                shimeji.style.transition = "bottom 0.4s ease-in";
                shimeji.style.bottom = "0px";

setTimeout(idle, 400);
            }, 400);
        }

function idle() {
            shimeji.src = "images/idle.gif";
            isIdle = true;

setTimeout(() => {
                isIdle = false;
                loop();
            }, 2000 + Math.random() * 1500);
        }

function loop() {
            if (isIdle) return;

const r = Math.random();
            if (r < 0.3) jump();
            else walk();
        }

idle();
    </script>
</body>

My Santa Monica Dream

Website Shimeji

CONTENTS