## 1. 游戏设计是什么？

游戏设计，即决定一款游戏应该是怎样的。游戏设计就是做决定，决定游戏相关的一切事务，包括决定规则、视觉、奖励、惩罚、听觉、剧情等等一切玩家需要体验的东西。所以游戏设计师不是一个职位，而是游戏开发团队中的角色。所有参与游戏开发的开发者，都可能是游戏设计师。比如美工参与视觉的设计，音效师参与听觉的设计，团队中的每个开发者，都或多或少的参与游戏设计。因此，不管你在团队中的角色如何，了解游戏设计的原理能让你开发中更好的游戏。



## 2.游戏设计没有统一理论

游戏设计没有固定的公式高告诉我们怎样做出好游戏，我们好比处于门捷列夫发现元素周期表之前的时代，炼金术士只能靠一堆拼凑起来的简单规则来解释化学物质是怎样合成的。当然这些规则不完整的，甚至是错的。但就是靠着这些规则，炼金术士造出了很低意想不到的东西，他们对真理的不断追求最终发展出了现在化学。

眼下游戏设计师还在等待他们的“门捷列夫”，我们没有元素周期表，但我们也有一些自己拼凑的原理和规则，虽然不完美，但足以完成任务。我尝试将其中的精华整合，并加以研究、思考和应用。

若能从尽可能多的视角来观察自己的游戏，优秀的游戏设计就会出现，我把这些视角成为“透镜”，因为每一个透镜都是观察你设计的一种角度。**透镜不是蓝图或者配方，而是检视自己设计的工具。** 这些透镜都不完美，但在特定环境下非常有用，因为每一个透镜都提供了观察自己设计的独特角度。从非常多角度区观察你的问题，并加以思考，就可以找出最佳设计。游戏设计中艺术多于科学，游戏设计更像烹饪，所以游戏设计中的“门捷列夫”永远不会到来。

## 3.必须打牢基础

很多人都认为学习游戏设计最好方法是，研究3A或者网游大作，这种方法完全错误！电子游戏只不过是传统游戏在新媒介中的自然发展，其中规则并未改变。设计摩天大楼之前，一定要懂得设计小屋。所以我们要从简单的游戏开始研究学习，其中一些是电子游戏，但有些是简单而经典的游戏，比如骰子游戏、扑克牌游戏等等。如果不能理解这些经典游戏的原理，又怎么可能理解更复杂的游戏呢？经典游戏中有很多特质，需要我们学习和研究它。

除了研究经典游戏，还需要学习游戏设计中最深刻、最基础的原理，而不是专注于特定品类的原理(比如RPG游戏的15条心得)。**虽然游戏品类非常多，但是游戏设计的基础原理是人类心理学的原理。** 充分理解这些基础原理后，就可以掌握任何品类游戏的设计，甚至自己创造新的品类！

## 4.需要自己去做

不要以为读了任何一本书，你就能成为游戏设计师，更别说成为一名优秀的游戏设计师了。游戏设计不是一套原理，而是一种行动。光读书成为不了歌手、运动员，也不能成为游戏设计师。

**成为游戏设计师只有一条路，就是自己设计游戏**，更准确点说，是设计让别人爱玩的游戏。也是就说，随便把游戏创意记录下来是不够的，必须要做出游戏，自己玩，完了让别人玩。如果感觉不满意，就要不断的去修改完善，直到创作出的游戏让大家都爱玩。只有这样经历过几次，你才会明白游戏设计究竟是什么。游戏设计师之间有种说法：“你做的前10个游戏都是垃圾，所以快把他们丢一边去吧。”所以只有不断的学习、**实践**、吸收、归纳总结才能成为一名优秀的游戏设计师！

01-游戏设计是什么？

三国自走棋羁绊系统

## 基础概念

  animation-delay 这个 CSS 属性在平时开发中经常使用，它可以指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。通俗来讲就是可以定义动画什么时候开始播放，比如我们希望动画延迟2s再播放，那么可以这样设置：
  


```css
    animation-delay: 2s;
```


animation-delay 不但支持正数，同时还可以支持负值， [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay) 是这样表述的：
> 负值会导致动画立即开始，但是从动画循环的某个时间点开始。例如，如果你将 -1s 作为动画延迟时间，则动画将立即开始，但是将在动画序列的第 1 秒开始。如果你为动画延迟指定负值，但起始值是隐含的，则起始值取自应用动画到元素的时刻。

例如你使用 CSS 声明了一个元素的动画如下：

```css
      @keyframes move {
        0% {
          left: 0;
        }
        100% {
          left: 100px;
        }
      }
      
      .item {
         animation: 10s move -1s linear infinite;
      }
```

上例中 item 使用名为 `move` 的 keyframes，它会从 `left: 0px` 开始线性运动到 `left: 100px`，总计 10s， 速度为 10px/s。这里将animation-delay的值设为 -1s，item 将会从`left: 10px`立即开始运动。
总结起来就一句话，**将 `animation-delay` 设置为负值，可以改变当前元素动画的初始帧**。和平时看视频拖动进度条一样，拖到视频的30s处播放，那就相当于是 `animation-delay: -30s`。

## 应用场景

那知道了基本用法后，实际项目中有什么应用场景呢？

接上例，假如我们需要做一个动画效果，需要将 5 个 item 同时做 `left: 0px` 到 `left: 100px`线性运动，每个元素宽高均为10px的正方形，彼此间隔 10px ，类似队列的效果。item-1 的初始位置是`left: 0px`, item-2是`left: 20px`依次类推。那么我们就可以这样使用，非常方便的设置每个元素的初始位置。

```css
      @keyframes move {
        0% {
          left: 0;
        }
        100% {
          left: 100px;
        }
      }
      
      .item {
        animation: 10s move linear infinite;
      }

      .item.item-1 {
        animation-delay: 0s;
      }

      .item.item-2 {
        animation-delay: -2s;
      }

      .item.item-3 {
        animation-delay: -4s;
      }

      .item.item-4 {
        animation-delay: -6s;
      }

      .item.item-5 {
        animation-delay: -8s;
      }
```