Skip to content

Instantly share code, notes, and snippets.

@dolphin-wood

dolphin-wood/nyan.js

Last active November 29, 2018 11:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dolphin-wood/9561ff59d1f508969b6a3c77ac8047f6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dolphin-wood/9561ff59d1f508969b6a3c77ac8047f6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dolphin-wood revised this gist Nov 29, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions nyan.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,7 @@ class Nyan {
    img.style.position = 'fixed';
    img.style.top = '0px';
    img.style.left = '0px';
    img.style.zIndex = '99999';

    document.body.appendChild(img);

  2. dolphin-wood revised this gist Nov 29, 2018. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions nyan.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,6 +18,8 @@ class Nyan {
    img.addEventListener('load', () => {
    this.init();
    });

    window.addEventListener('resize', this.refresh.bind(this));
    }

    init() {
  3. dolphin-wood created this gist Nov 29, 2018.
    88 changes: 88 additions & 0 deletions nyan.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    class Nyan {
    constructor(speed = 3) {
    this.x = 0;
    this.y = 0;
    this.max_x = 0;
    this.max_y = 0;
    this.vx = this.vy = speed;

    const img = this.img = new Image();
    img.src = 'http://www.nyan.cat/images/thumbs/balloon.gif';

    img.style.position = 'fixed';
    img.style.top = '0px';
    img.style.left = '0px';

    document.body.appendChild(img);

    img.addEventListener('load', () => {
    this.init();
    });
    }

    init() {
    this.refresh();

    this.x = Math.random() * this.max_x | 0;
    this.y = Math.random() * this.max_y | 0;

    this.play();
    }

    play() {
    this.update();
    this.render();

    this.rafID = requestAnimationFrame(() => {
    this.play();
    });
    }

    pause() {
    cancelAnimationFrame(this.rafID);
    }

    refresh() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    this.max_x = width - this.img.width;
    this.max_y = height - this.img.height;

    this.x = Math.min(this.max_x, this.x);
    this.y = Math.min(this.max_y, this.y);
    }

    update() {
    const {
    vx, vy,
    max_x, max_y,
    } = this;

    const nextX = this.x + vx;
    const nextY = this.y + vy;

    if (nextX <= 0 || nextX >= max_x) {
    this.x = Math.max(0, Math.min(nextX, max_x));
    this.vx = -vx;
    } else {
    this.x = nextX;
    }

    if (nextY <= 0 || nextY >= max_y) {
    this.y = Math.max(0, Math.min(nextY, max_y));
    this.vy = -vy;
    } else {
    this.y = nextY;
    }
    }

    render() {
    const {
    img,
    x, y,
    } = this;

    img.style.transform = `translate3d(${x}px, ${y}px, 0) rotateY(${this.vx >= 0 ? 0 : 180}deg)`;
    }
    }