如何使用 JavaScript 制作 Plinko 游戏

Plinko 游戏是一种基于概率和运气的游戏，在该游戏中，玩家会将小球投入一个斜面槽道，在下方会有许多障碍物，小球在与障碍物碰撞后选择向左或向右移动，最终落在底部的奖金槽中。

在这篇文章中，我们将介绍如何使用 JavaScript 制作 Plinko 游戏，包括创建游戏板、设置障碍物、投掷小球等。让我们开始吧！

创建游戏板

首先，我们需要创建一个游戏板来布置我们的 Plinko 游戏，我们可以使用 HTML 和 CSS 来创建游戏板，并将其与 JavaScript 集成。

<div id="game-board">
  <div id="plinko-board"></div>
  <div id="ball"></div>
</div>

<style>
  #game-board {
    height: 500px;
    width: 300px;
    border: 2px solid black;
    position: relative;
  }
  
  #plinko-board {
    height: 400px;
    width: 200px;    
    position: absolute;
    top: 50px;
    left: 50px;
    border: 2px solid gray;
  }
  
  #ball {
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: red;
    animation: drop-ball 2s linear forwards;
  }
  
  @keyframes drop-ball {
    0% { left: 100px; }
    50% { left: 150px; }
    100% { left: 200px; }
  }
</style>

上面的代码创建了一个 game-board 容器，其中包含一个 plinko-board 容器和一个 ball 容器。在 CSS 样式中，我们将 plinko-board 放置在 game-board 容器的中央，ball 则在底部右侧。

由于我们想要在游戏板上添加障碍物，我们将使用 JavaScript 动态地创建棋盘。

添加障碍物

接下来，我们需要定义我们的障碍物，并在游戏板上放置它们。

const rows = 8;
const cols = 7;
const spacing = 30;
const radius = 10;
const colors = ['blue', 'green', 'orange', 'purple'];

const obstacles = [];

for (let i = 0; i < rows; i++) {
  const rowObstacles = [];
  for (let j = 0; j < cols; j++) {
    const x = j * spacing + (i % 2 === 0 ? 0 : spacing / 2);
    const y = i * spacing + radius;
    const color = colors[Math.floor(Math.random() * colors.length)];
    rowObstacles.push({ x, y, color });
  }
  obstacles.push(rowObstacles);
}

const plinkoBoard = document.getElementById('plinko-board');

obstacles.forEach((row) => {
  row.forEach((obstacle) => {
    const { x, y, color } = obstacle;
    const obstacleNode = document.createElement('div');
    obstacleNode.style.background = color;
    obstacleNode.style.borderRadius = '50%';
    obstacleNode.style.width = `${radius * 2}px`;
    obstacleNode.style.height = `${radius * 2}px`;
    obstacleNode.style.position = 'absolute';
    obstacleNode.style.left = `${x}px`;
    obstacleNode.style.top = `${y}px`;
    plinkoBoard.appendChild(obstacleNode);
  });
});

在上面的代码中，我们使用了一个二维数组来保存障碍物的位置信息。每个障碍物都包含了 x 和 y 坐标以及一个颜色。

接下来，我们使用两个循环将障碍物放置在我们之前创建的 plinkoBoard 容器中。使用 createElement 来创建并设置样式。

投掷小球

最后，我们需要添加投掷功能，使小球在游戏板上活动。

const ball = document.getElementById('ball');
const gameBoard = document.getElementById('game-board');

gameBoard.addEventListener('click', () => {
  ball.style.bottom = '0';
  ball.style.left = '100px';
  const fall = setInterval(() => {
    const ballRect = ball.getBoundingClientRect();
    const ballX = ballRect.x + ballRect.width / 2;
    const ballY = ballRect.y - ballRect.height / 2;
    obstacles.forEach((row, i) => {
      row.forEach((obstacle, j) => {
        const obstacleNode = plinkoBoard.children[i * cols + j];
        const obstacleRect = obstacleNode.getBoundingClientRect();
        const obstacleX = obstacleRect.x + obstacleRect.width / 2;
        const obstacleY = obstacleRect.y + obstacleRect.height / 2;
        const distance = Math.sqrt((ballX - obstacleX) ** 2 + (ballY - obstacleY) ** 2);
        if (distance < radius) {
          ball.style.bottom = `${obstacleNode.offsetTop + radius}px`;
          if (j % 2 === 0) {
            ball.style.left = `${obstacleNode.offsetLeft - spacing / 2}px`;
          } else {
            ball.style.left = `${obstacleNode.offsetLeft + spacing / 2}px`;
          }
        }
      });
    });
    if (ballY <= radius) {
      clearInterval(fall);
    } else {
      ball.style.bottom = `${ballY - spacing}px`;
    }
  }, 16);
});

上面的代码将单击游戏板时添加了一个 fall 定时器，该定时器将逐帧更新小球的位置，并控制其如何与障碍物碰撞。当小球到达最底部时，我们清除定时器并结束游戏。

就这样，我们已经完成了 Plinko 游戏的制作。现在，您可以在游戏板上投掷小球，并期待它落在奖金槽中！