给DOM开发者的游戏开发指南-05.精灵Sprite

仓库地址：github.com/haiyoucuv/W…

引入概念：精灵 Sprite

经过上一节的操作，我们已经得到了一只性能很高的Bird

如果一款游戏只有大红大绿的方块，那一定也是没人玩的

所以本节我们将要介绍游戏中的一个重要的概念精灵，即Sprite

各位可将它理解为图片即<img/>

• 1.创建一个<img/>模拟精灵的创建。这样将会更容易理解
  你也可以使用一个<div><img/></div>， 因为在游戏开发中，组合优于继承，组件化游戏开发多采用此方案

<img id="bird" src="../images/bird/bird_01.png"/>

• 2.给精灵一个样式

#bird {
    /* 位置 */
    position: absolute;

    /* 旋转、缩放等属性 */
    transform: scale(1, 1) rotate(0deg);
    transform-origin: center; /* 锚点 */
}

到此结束，我们已经有了第一个有头有脸的显示对象