巧用CSS 3D变幻，自制趣味魔方游戏

2023-10-20 18:15:34

前言

魔方，风靡全球的益智玩具，用它训练思维和锻炼手速，让许多人着迷。为了追求更为新颖有趣的魔方体验，今天我们就将踏上一段奇幻之旅，运用CSS、JavaScript和HTML5，用编程打造一个虚拟魔方游戏。

通过CSS的3D变换特性，我们可以实现魔方转动效果，让您在屏幕上体验手指滑动、魔方转动的快感。本指南将详细介绍如何实现这一效果，还将提供示例代码和演示，让您轻松上手。

构建CSS 3D魔方

我们首先从魔方的基础元素说起。一个标准的魔方由6个面、26个小方块组成。每个面有9个小方块，可以沿水平、垂直或纵深方向转动。为了用CSS创建一个这样的魔方，我们需要对每个小方块创建一个HTML元素，然后使用CSS来定义它们的样式和布局。

<div class="cube-container">
  <div class="cube">
    <div class="cube-face cube-face--front"></div>
    <div class="cube-face cube-face--back"></div>
    <div class="cube-face cube-face--left"></div>
    <div class="cube-face cube-face--right"></div>
    <div class="cube-face cube-face--top"></div>
    <div class="cube-face cube-face--bottom"></div>
  </div>
</div>

在这个HTML结构中，我们用一个.cube-container元素包裹住魔方，并在其中包含一个.cube元素来表示魔方本身。每个.cube元素包含了6个.cube-face元素，分别代表魔方的6个面。

现在，让我们来用CSS来定义魔方的外观和布局。

.cube-container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  perspective: 1000px;
}

.cube {
  width: 100px;
  height: 100px;
  depth: 100px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

.cube-face {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border: 1px solid #000000;
}

这段CSS代码设置了魔方的容器大小和透视效果，让魔方具有3D空间感。.cube元素的大小和转换样式也在这里定义，.cube-face元素的背景颜色和边框样式也在这里定义。

现在，我们的魔方已经有了基本的外观和布局，接下来，我们需要让它能够转动。

实现魔方转动效果

为了让魔方转动，我们需要使用JavaScript来操纵CSS的转换属性。我们可以使用事件侦听器来监听鼠标或触屏事件，然后根据用户的输入来更新魔方的转换属性，从而实现魔方转动效果。

const cube = document.querySelector('.cube');

cube.addEventListener('mousedown', (event) => {
  const startPosition = {
    x: event.clientX,
    y: event.clientY
  };

  const startRotation = {
    x: cube.style.transform.match(/rotateX\((.+?)deg\)/)[1],
    y: cube.style.transform.match(/rotateY\((.+?)deg\)/)[1]
  };

  const moveCube = (event) => {
    const deltaX = event.clientX - startPosition.x;
    const deltaY = event.clientY - startPosition.y;

    const newRotation = {
      x: startRotation.x - deltaY * 0.5,
      y: startRotation.y + deltaX * 0.5
    };

    cube.style.transform = `rotateX(${newRotation.x}deg) rotateY(${newRotation.y}deg)`;
  };

  document.addEventListener('mousemove', moveCube);

  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', moveCube);
  });
});

这段JavaScript代码使用事件侦听器来监听鼠标按下事件，当用户按下鼠标时，它会记录下鼠标的初始位置和魔方的初始旋转角度。然后，它会添加一个mousemove事件侦听器，当用户移动鼠标时，它会计算出鼠标移动的距离并更新魔方的旋转角度。当用户松开鼠标时，它会移除mousemove事件侦听器。

现在，我们的魔方就可以通过鼠标拖动来转动了。