创意无限：“码上掘金”好友想玩游戏机，我用CSS绘制了一个套圈水机

前端

2023-11-13 11:31:54

“码上掘金”好友想玩游戏机，我用CSS绘制了一个套圈水机

在“码上掘金”活动中，一位好友想玩游戏机。作为一名热衷于创意编程的人，我决定用CSS绘制一个套圈水机，让好友体验游戏般的乐趣。

一、灵感来源

灵感来源于儿时在游乐场玩套圈游戏的经历。套圈游戏简单有趣，考验玩家的准度和技巧。我希望通过CSS编程，将这种经典游戏搬到电脑上，让好友在家也能享受套圈的乐趣。

二、套圈水机设计

套圈水机由两部分组成：水机和套圈。水机由CSS绘制，套圈由HTML元素表示。

1.水机

水机由一个圆柱体和一个底座组成。圆柱体用CSS的border-radius属性绘制，底座用border属性绘制。为了让水机看起来更逼真，我还添加了水波纹和水滴的动画效果。

2.套圈

套圈由HTML元素表示。每个套圈都是一个<div>元素，并用CSS设置了相应的样式。套圈的颜色和图案可以自由定制。

三、套圈水机的实现

套圈水机的实现主要分为两个部分：套圈的生成和套圈的移动。

1.套圈的生成

套圈的生成通过JavaScript代码实现。JavaScript代码会随机生成一定数量的套圈，并将它们添加到水机中。

2.套圈的移动

套圈的移动也通过JavaScript代码实现。JavaScript代码会监听鼠标的移动，并根据鼠标的移动来控制套圈的移动。

四、使用说明

套圈水机使用起来非常简单。只需将鼠标移动到套圈上方，然后点击鼠标左键即可套圈。套中的水机会从水龙头中流出。

五、结语

套圈水机是一个非常有趣的小项目，它不仅展示了CSS和JavaScript的强大功能，还展现了创意编程的无限可能性。我希望这个项目能给读者带来启发，让更多人爱上创意编程。

六、代码分享

<!DOCTYPE html>
<html>
<head>
  
  <style>
    /* 水机样式 */
    #water-machine {
      width: 200px;
      height: 300px;
      border: 1px solid black;
      border-radius: 50%;
      position: relative;
    }

    /* 底座样式 */
    #base {
      width: 200px;
      height: 50px;
      border: 1px solid black;
      border-top: none;
      position: absolute;
      bottom: 0;
    }

    /* 水波纹动画 */
    @keyframes water-ripple {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    /* 水波纹样式 */
    .water-ripple {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: blue;
      opacity: 0;
      position: absolute;
      animation: water-ripple 1s infinite;
    }

    /* 水滴样式 */
    .water-drop {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: blue;
      position: absolute;
      animation: water-drop 1s infinite;
    }

    /* 套圈样式 */
    .ring {
      width: 20px;
      height: 20px;
      border: 1px solid black;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>
<body>
  <!-- 水机 -->
  <div id="water-machine">
    <!-- 底座 -->
    <div id="base"></div>

    <!-- 水波纹 -->
    <div class="water-ripple" style="left: 50px; top: 100px;"></div>
    <div class="water-ripple" style="left: 100px; top: 150px;"></div>
    <div class="water-ripple" style="left: 150px; top: 100px;"></div>

    <!-- 水滴 -->
    <div class="water-drop" style="left: 50px; top: 150px;"></div>
    <div class="water-drop" style="left: 100px; top: 200px;"></div>
    <div class="water-drop" style="left: 150px; top: 150px;"></div>
  </div>

  <!-- 套圈 -->
  <div class="ring" style="left: 50px; top: 100px;"></div>
  <div class="ring" style="left: 100px; top: 150px;"></div>
  <div class="ring" style="left: 150px; top: 100px;"></div>

  <!-- JavaScript代码 -->
  <script>
    // 生成套圈
    function generateRings() {
      for (var i = 0; i < 10; i++) {
        var ring = document.createElement("div");
        ring.className = "ring";
        ring.style.left = Math.random() * 200 + "px";
        ring.style.top = Math.random() * 300 + "px";
        document.body.appendChild(ring);
      }
    }

    // 移动套圈
    function moveRings() {
      var rings = document.getElementsByClassName("ring");
      for (var i = 0; i < rings.length; i++) {
        var ring = rings[i];
        ring.style.left = parseInt(ring.style.left) + 1 + "px";
        if (parseInt(ring.style.left) > 200) {
          ring.style.left = "0px";
        }
      }
    }

    // 启动游戏
    generateRings();
    setInterval(moveRings, 10);
  </script>
</body>
</html>