在按钮按下时如何生成随机对象（JavaScript）

前端开发 2026-07-09

我正在为我的网站开发一个受Chao Garden启发的虚拟宠物JavaScript游戏。现在我有一个可正常工作的生成器来创建宠物，但它在你点击生成按钮时会随机决定得到哪一个宠物。按下按钮时将调用这个函数：

function spawnChao() {

  let c = new Chao(

    Math.random() * 560,
    Math.random() * 360
  );
  chaos.push(c);
}

生成的chao使用这个类的属性：

class Chao {
  constructor(x, y) {
    this.x = x;
    this.y = y;

    this.hunger = 50;
    this.happiness = 50;
    this.energy = 50;

    this.alignment = 0; // -100 dark → +100 hero
    this.speed = 1 + Math.random();

    this.target = null;

    this.el = document.createElement("div");
    this.el.classList.add("chao", "gerbomination");
    garden.appendChild(this.el);
  }

“gerbomination”是它当前唯一会生成的生物的名字。

我尝试在实现随机输出的函数中使用以下代码，但那样做会让生成器完全无法工作：

function spawnChao() {

  let c = new Chao(
     var creatures = ["gerbomination", "hero","dark"];
     let r = () => Math.floor(Math.random() * creatures.length);

    Math.random() * 560,
    Math.random() * 360
  );
  chaos.push(c);
}

最好的解决方案是什么？

解决方案

解决方法很简单：你不能在函数调用的参数列表中声明变量。你可能需要在new Chao()之前进行随机选择，并将结果作为第三个参数传递。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chao Garden</title>

  <!--
    Source - https://stackoverflow.com/q/XXXXXXX (Chao Garden virtual pet)
    Retrieved 2026-04-25, License - CC BY-SA 4.0 
  -->

  <style>
    #garden {
      position: relative;
      width: 600px;
      height: 400px;
      background: #a8d8a8;
      border: 2px solid #555;
      overflow: hidden;
    }
    .chao {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
    }
    .gerbomination { background: #f4a261; }
    .hero          { background: #90e0ef; }
    .dark          { background: #6a0572; color: #fff; }
  </style>
</head>
<body>
  <div id="garden"></div>
  <button onclick="spawnChao()">Spawn Chao</button>

  <script>
    // Source - https://stackoverflow.com/q/XXXXXXX
    // Retrieved 2026-04-25, License - CC BY-SA 4.0

    const garden = document.getElementById("garden");
    const chaos = [];
    const creatures = ["gerbomination", "hero", "dark"];

    class Chao {
      constructor(x, y, type) {
        this.x = x;
        this.y = y;
        this.type = type;

        this.hunger    = 50;
        this.happiness = 50;
        this.energy    = 50;

        this.alignment = 0;
        this.speed     = 1 + Math.random();
        this.target    = null;

        this.el = document.createElement("div");
        this.el.classList.add("chao", type);
        this.el.title = type;
        this.el.style.left = x + "px";
        this.el.style.top  = y + "px";

        const emoji = { gerbomination: "🐹", hero: "😇", dark: "😈" };
        this.el.textContent = emoji[type] ?? "🐣";

        garden.appendChild(this.el);
      }
    }

    function spawnChao() {

      const type = creatures[Math.floor(Math.random() * creatures.length)];
      const c = new Chao(
        Math.random() * 560,
        Math.random() * 360,
        type
      );
      chaos.push(c);
    }
  </script>
</body>
</html>

JavaScript