一款有趣的游戏 CSS 特效，灵感来源于《咱们裸熊》动画片

前端

2023-10-19 12:17:53

在当今快节奏的互联网时代，吸引用户注意力的最佳方法之一就是使用醒目的视觉效果。CSS 特效就是一种可以为网页增添视觉趣味的利器。今天，我们要分享一款有趣的游戏 CSS 特效，灵感来源于《咱们裸熊》动画片。

《咱们裸熊》是一部非常受欢迎的动画片，讲述了三只熊熊兄弟——棕熊大大、熊猫胖达和白熊阿奇——在旧金山的生活故事。这三只熊熊兄弟性格迥异，经常闹出各种各样的笑话。

这款游戏 CSS 特效完美地再现了《咱们裸熊》动画片的欢乐氛围。特效中，这三只熊熊兄弟会像弹簧一样蹦来蹦去，非常可爱。此外，特效还加入了游戏元素，熊熊兄弟可以收集金币，金币数量会实时显示在屏幕上。

这款特效非常适合在网页游戏中使用，也可以用作网页装饰。如果你想为你的网页增添一些趣味性，不妨试试这款特效。

如何使用这款游戏 CSS 特效

将特效代码复制到你的网页中。
在特效代码中，找到 #game 元素，并将其替换成你想要特效应用到的元素的 ID。
在特效代码中，找到 #coins 元素，并将其替换成你想要用来显示金币数量的元素的 ID。
保存你的网页，然后刷新页面。

特效就会生效了。

特效代码

<!DOCTYPE html>
<html>
<head>
  
  <style>
    #game {
      width: 500px;
      height: 500px;
      position: relative;
      overflow: hidden;
    }

    #熊熊兄弟 {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      top: 0;
    }

    #棕熊大大 {
      background: #ff9900;
    }

    #熊猫胖达 {
      background: #000000;
    }

    #白熊阿奇 {
      background: #ffffff;
    }

    #金币 {
      width: 50px;
      height: 50px;
      position: absolute;
      left: 0;
      top: 0;
      background: #ff0000;
      border-radius: 50%;
    }

    .bounce {
      animation: bounce 1s infinite;
    }

    @keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -100px;
      }

      100% {
        top: 0;
      }
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="熊熊兄弟" class="bounce">
      <div id="棕熊大大"></div>
      <div id="熊猫胖达"></div>
      <div id="白熊阿奇"></div>
    </div>
    <div id="金币"></div>
  </div>

  <div id="coins">0</div>

  <script>
    var game = document.getElementById('game');
    var coins = document.getElementById('coins');
    var 熊熊兄弟 = document.getElementById('熊熊兄弟');
    var金币 = document.getElementById('金币');

    var 熊熊兄弟速度 = 5;
    var 金币速度 = 10;

    function update() {
      requestAnimationFrame(update);

      // 更新熊熊兄弟的位置
      var熊熊兄弟Top = 熊熊兄弟.offsetTop;
      var熊熊兄弟Left = 熊熊兄弟.offsetLeft;

      if (熊熊兄弟Top > game.offsetHeight - 熊熊兄弟.offsetHeight) {
        熊熊兄弟速度 = -熊熊兄弟速度;
      } else if (熊熊兄弟Top < 0) {
        熊熊兄弟速度 = -熊熊兄弟速度;
      }

      if (熊熊兄弟Left > game.offsetWidth - 熊熊兄弟.offsetWidth) {
        熊熊兄弟速度 = -熊熊兄弟速度;
      } else if (熊熊兄弟Left < 0) {
        熊熊兄弟速度 = -熊熊兄弟速度;
      }

      熊熊兄弟.style.top = 熊熊兄弟Top + 熊熊兄弟速度 + 'px';
      熊熊兄弟.style.left = 熊熊兄弟Left + 熊熊兄弟速度 + 'px';

      // 更新金币的位置
      var 金币Top = 金币.offsetTop;
      var 金币Left = 金币.offsetLeft;

      if (金币Top > game.offsetHeight - 金币.offsetHeight) {
        金币速度 = -金币速度;
      } else if (金币Top < 0) {
        金币速度 = -金币速度;
      }

      if (金币Left > game.offsetWidth - 金币.offsetWidth) {
        金币速度 = -金币速度;
      } else if (金币Left < 0) {
        金币速度 = -金币速度;
      }

      金币.style.top = 金币Top + 金币速度 + 'px';
      金币.style.left = 金币Left + 金币速度 + 'px';

      // 检测碰撞
      if (熊熊兄弟.getBoundingClientRect().intersects(金币.getBoundingClientRect())) {
        coins.innerHTML = parseInt(coins.innerHTML) + 1;
        金币.style.top = Math.random() * (game.offsetHeight - 金币.offsetHeight) + 'px';
        金币.style.left = Math.random() * (game.offsetWidth - 金币.offsetWidth) + 'px';
      }
    }

    update();
  </script>
</body>
</html>