neko/neko.js

// Description: Neko 
// Author: Jeff Clement
// License: MIT

// Size of the neko, in pixels
const nekoSize = 32;

// Speed of running animation
const runSpeed = 0.2;

// The neko statemachine
const stateMachine = {
    sleep: {
        images: ['sleep1', 'sleep2'],
        imageInterval: 1,
        click: 'awake',
    },
    yawn: {
        images: ['yawn'],
        nextState: ['sleep'],
        nextStateDelay: 1,
    },
    awake: {
        images: ['alert'],
        nextState: ['normal'],
        nextStateDelay: 1,
    },
    itch: {
        images: ['itch1','itch2'],
        imageInterval: 0.5,
        nextState: ['normal'],
        nextStateDelay: 2,
        click: 'dying', // OMG.  Don't click an itchin' neko!
    },
    normal: {
        awake: true,
        images: ['still'],
        nextState: ['normal','normal','normal','itch', 'yawn'],
        nextStateDelay: 1,
    },

    nrun: {
        awake: true,
        imageInterval: runSpeed,
        images: ['nrun1','nrun2'],
    },
    nerun: {
        awake: true,
        imageInterval: runSpeed,
        images: ['nerun1','nerun2'],
    },
    erun: {
        awake: true,
        imageInterval: runSpeed,
        images: ['erun1','erun2'],
    },
    serun: {
        awake: true,
        imageInterval: runSpeed,
        images: ['serun1','serun2'],
    },
    srun: {
        awake: true,
        imageInterval: runSpeed,
        images: ['srun1','srun2'],
    },
    swrun: {
        awake: true,
        imageInterval: runSpeed,
        images: ['swrun1','swrun2'],
    },
    wrun: {
        awake: true,
        imageInterval: runSpeed,
        images: ['wrun1','wrun2'],
    },
    nwrun: {
        awake: true,
        imageInterval: runSpeed,
        images: ['nwrun1','nwrun2'],
    },


    dying: {
        images: ['alert','dying1','dying2','dying3','dying4','dying5'],
        imageInterval: 0.5,
        nextState: ['dead'],
        nextStateDelay: 3,
    },
    dead: {
        images: ['dying6'],
        imageInterval: 0.5,
    },
}

// Preload all the images
var images={};
for(let state in stateMachine) {
    stateMachine[state].images.forEach(function(x) {
        let img = new Image(nekoSize, nekoSize);
        img.src = 'res/'+x+'.gif';
        images[x] = img;
    });
}

class Neko {
    // Neko's current state
    state = null;

    // Neko's current animation frame and timer to flip to the next one
    animationInterval = null;
    animationIndex = 0;

    // Timer to switch to the next state
    nextStateDelay = null;

    // where is Neko heading (current mouse position, or last press)
    targetX = -1;
    targetY = -1;

    constructor(x = window.innerWidth - nekoSize,y = window.innerHeight - nekoSize) {
        this.x = x;
        this.y = y;

        // build up the placeholder for the neko in the DOM
        this.image = new Image(nekoSize, nekoSize);
        this.image.style.position = 'fixed';
        this.image.onclick = this.handleClick.bind(this);
        document.body.appendChild(this.image);

        // start the movement loop
        setInterval(this.update.bind(this), 100);

        // hook into event handlers
        window.addEventListener('resize', this.handleResize.bind(this));
        window.addEventListener('mousemove', this.handleMouseMove.bind(this));
        window.addEventListener('touchstart', this.handleTouch.bind(this));

        // start the neko in the sleep state
        this.setState('sleep');

        // force a resize
        this.handleResize();
    }

    setState(state) {
        clearInterval(this.animationInterval);
        clearTimeout(this.nextStateDelay);

        this.state = state;
        this.animationIndex = 0;

        if (stateMachine[state].images.length > 1) {
            this.animationInterval = setInterval(this.nextFrame.bind(this), (stateMachine[state].imageInterval || 1) * 1000);
        }

        if (stateMachine[state].nextState && stateMachine[state].nextState.length > 0) {
            this.nextStateDelay = setTimeout(() => {
                this.setState(stateMachine[state].nextState[Math.floor(Math.random() * stateMachine[state].nextState.length)]);
            }, (stateMachine[state].nextStateDelay || 1) * 1000);
        }
    }

    nextFrame() {
        this.animationIndex = (this.animationIndex + 1) % stateMachine[this.state].images.length;
    }

    handleTouch(event) {
        this.targetX = event.touches[0].clientX - nekoSize/2;
        this.targetY = event.touches[0].clientY - nekoSize/2;
    }

    handleMouseMove(event) {
        this.targetX = event.clientX - nekoSize/2;
        this.targetY = event.clientY - nekoSize/2;
    }

    handleClick() {
        if (stateMachine[this.state].click) {
            this.setState(stateMachine[this.state].click);
        }
    }

    handleResize() {
        // adjust Neko's X and Y speed based on window size
        this.speedX = document.body.clientWidth / 100 * nekoSize/32.0;
        this.speedY = document.body.clientHeight / 100 * nekoSize/32.0;

        // keep Neko on the screen
        if (this.x > document.body.clientWidth - nekoSize) {
            this.x = document.body.clientWidth - nekoSize;
        }
        if (this.y > document.body.clientHeight - nekoSize) {
            this.y = document.body.clientHeight - nekoSize;
        }
    }
  
    update() {
        const state = stateMachine[this.state];
        if (state.awake) {
            
            const distanceX = this.targetX - this.x;
            const distanceY = this.targetY - this.y;

            // If we're close enough to the target, stop moving
            const dx = Math.abs(distanceX) < this.speedX ? 0 : Math.sign(distanceX);
            const dy = Math.abs(distanceY) < this.speedY ? 0 : Math.sign(distanceY);

            // determine our new state
            var newState = 'normal';
            if (dx == 1 && dy == 0) newState = 'erun';
            if (dx == 1 && dy == 1) newState = 'serun';
            if (dx == 0 && dy == 1) newState = 'srun';
            if (dx == -1 && dy == 1) newState = 'swrun';
            if (dx == -1 && dy == 0) newState = 'wrun';
            if (dx == -1 && dy == -1) newState = 'nwrun';
            if (dx == 0 && dy == -1) newState = 'nrun';
            if (dx == 1 && dy == -1) newState = 'nerun';
            if (newState != this.state) {
                this.setState(newState);
            }

            // move Neko, if required
            this.x += dx * this.speedX;
            this.y += dy * this.speedY;
        }

        // Draw the neko
        this.image.src = images[state.images[this.animationIndex]].src;
        this.image.style.top = this.y + 'px';
        this.image.style.left = this.x + 'px';
    }
  }

const neko = new Neko();