emooo_suda

In this example below you will see how to do a emooo_suda with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tonkotsuboy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tonkotsuboy ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

<div class="container">
  <div class="cube">
    <div class="surface">
      
    </div>

    <div class="surface">
    </div>

    <div class="surface">
    </div>

    <div class="surface">
    </div>

    <div class="surface">
    </div>

    <div class="surface">
    </div>


  </div>
</div>
<!-- ハァッ〜〜〜〜!!! -->

/*Downloaded from https://www.codeseek.co/tonkotsuboy/emooo_suda-NMqYLp */
    html,
body {
  width: 100%;
  height: 100%;
}

:root {
  --width: 400px;
}


body {
  font-family: "Mplus 1p";
  font-size: 16px;
  line-height: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow:hidden;
}

.container {
  position: relative;
  perspective: 2000px;
  perspective-origin: 50% 50%;
}

.cube {
  position: relative;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  width: var(--width);
  height: var(--width);
  animation: rotate 30s infinite linear;
}

.surface {
  border: 1px solid #666;
  position: absolute;
  width: var(--width);
  height: var(--width);
  top: 0;
  left: 0;
  
  
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/221808/aa2%EF%BC%9354.gif);
  background-position: 50% 50%;
  

  display: grid;
  grid-template-rows: repeat(auto-fit, calc(100% / 3));
  grid-template-columns: repeat(auto-fit, calc(100% / 3));

  align-content: center;
  justify-content: center;
  align-items: center;
  opacity: 0.95;
}

/* front */
.surface:nth-of-type(1) {
  transform: translateZ(calc(var(--width) / 2));
}

/* right */
.surface:nth-of-type(2) {
  transform: rotateY(90deg) translateZ(calc(var(--width) / 2));
}

/* back */
.surface:nth-of-type(3) {
  transform: rotateY(180deg) translateZ(calc(var(--width) / 2));
}

/* left */
.surface:nth-of-type(4) {
  transform: rotateY(-90deg) translateZ(calc(var(--width) / 2));
}

/* top */
.surface:nth-of-type(5) {
  transform: rotateX(90deg) translateZ(calc(var(--width) / 2));
}

/* bottom */
.surface:nth-of-type(6) {
  transform: rotateX(-90deg) translateZ(calc(var(--width) / 2));
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }

  50% {
    transform: rotateY(360deg) rotateX(180deg);
  }

  100% {
    transform: rotateY(720deg) rotateX(360deg);
  }
}

/* ハァッ〜〜〜〜〜〜〜!!!! */


/*Downloaded from https://www.codeseek.co/tonkotsuboy/emooo_suda-NMqYLp */
    class Main {
  init() {
    this.sudaList = [];

    this.domSetup();

    const allSet = document.querySelectorAll(".set");

    allSet.forEach((set, index) => {
      const sudaView = set.querySelector(".suda");
      const wordView = set.querySelector(".word");
      const suda = new Suda(sudaView, wordView, index);
      this.sudaList.push(suda);
    });

    setInterval(() => {
      this.update();
    }, 80);
  }

  domSetup() {
    const sudaUnit = `
      <div class="set">
        <p class="suda"></p>
        <p class="word"></p>
      </div>`;

    document.querySelectorAll(".surface").forEach(surface => {
      for (let i = 0; i < 9; i++) {
        surface.innerHTML += sudaUnit;
      }
    });
  }

  update() {
    for (const suda of this.sudaList) {
      suda.update();
    }
  }
}

class Suda {
  constructor(view, word, shift) {
    this.view = view;
    this.word = word;
    this.life = shift;

    this.piyo = "┌(┌^o^┐)┐";

    this.source = [
      this.piyo,
      this.piyo,
      this.piyo,
      this.piyo,
      this.piyo,
      "┌(^o^┐)┐",
      " (o^┐ ┐)",
      " (^┐ ┐ )",
      " (┐ ┐ )",
      " ( ┐ )",
      " (   )",
      " (   )",
      " (   )",
      " (   )",
      " (   )",
      " (  ┌ )",
      " ( ┌ ┌)",
      " ( ┌ ┌^)",
      " (┌ ┌^o)",
      "┌( ┌^o^)┐"
    ];

    this.maxLife = this.source.length;
  }

  update() {
    this.view.innerText = this.source[this.life];

    if (this.source[this.life] == this.piyo) {
      this.word.innerHTML = "エモォ...";
    } else {
      this.word.innerHTML = " ";
    }

    this.life -= 1;

    if (this.life < 0) this.life = this.maxLife - 1;
  }
}

new Main().init();

/*
_人人人人人人人人人人人人人_
> ハァッ〜〜〜〜〜〜〜!!!! <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
*/


Comments