순수 CSS 및 Javascript로 코인업 게임 애니메이션 만들기

이 스크린캐스트에서는 순수한 CSS와 자바스크립트로 코인업 게임 애니메이션을 만드는 방법을 배우게 됩니다. 또한 Slingcode 온라인 편집기를 사용하여 HTML5 및 Javascript로 이러한 게임 같은 CSS 애니메이션을 빠르게 만드는 과정에 대해서도 배우게 됩니다.

👇 전체 HTML 및 CSS 소스 코드는 아래를 참조하세요!

저는 최근 HTML5 게임을 위한 이 육즙이 풍부한 게임 같은 애니메이션을 작업하는 데 많은 재미를 느끼고 있습니다. 이러한 유형의 애니메이션은 웹 게임에 블링을 더할 수 있는 좋은 방법입니다.

곧 HTML5 게임에서 사용할 수 있는 전체 애니메이션 세트를 출시할 예정이므로 계속 지켜봐 주시기 바랍니다.

소스 코드

<!doctype html>
<html lang="en-us">
  <head>
    <title>Pure CSS coin-up animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="description" content="Blank HTML file for you to create something.">
    <link rel="stylesheet" href="animation.css">
    <script src="https://sfxr.me/riffwave.js"></script>
    <script src="https://sfxr.me/sfxr.js"></script>
    <style>
      * {
        user-select: none;
      }

      body {
        max-width: 800px; width: 100%; margin: 1em auto; font-size: 2em;
        font-family: arial;
        text-align: center;
      }

      #coinup {
        width: 200px;
        height: 100px;
        background-color: #178A94;
        margin: auto;
        margin-top: 300px;
      }

      #coin {
        width: 64px;
        animation: bounce 2s forwards;
        transform-origin: center bottom;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3>Coin up animation</h3>
      <div id="coinup" onclick="addcoin();"></div>
    </div>
  </body>
  <script>
  const s = new SoundEffect("34T6PkrBW3jQjhYnpdxv8qMiiuXscEMoYasigAhYRms6DWnYCKZ6dDYujNHfBWDv6o1fL1SfJbCreRwiyG1i4iKbpBKxZiMLPzbW9vMBhRaew3nBCVS1eaGF1").generate();
  function addcoin() {
    s.getAudio().play();
    const c = document.createElement("img");
    c.id = "coin";
    c.src = "coin.png";
    c.onanimationend = function() {
      document.getElementById("coinup").removeChild(c);
    }
    document.getElementById("coinup").appendChild(c);
  }
  </script>
</html>

@keyframes bounce {
  from,
  33%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  20%,
  23% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -200px, 0) scaleY(1.1);
  }

  50% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -100px, 0) scaleY(1.05);
  }

  60% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -50px, 0) scaleY(1.02);
  }

  80% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, 0, 0);
  }
}

Reference

이 문제에 관하여(순수 CSS 및 Javascript로 코인업 게임 애니메이션 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chr15m/make-a-coin-up-game-animation-in-pure-css-and-javascript-3bj4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다