我一直想用JavaScript编写一些游戏开发教程。 该系列的第一个内容是创建玩家角色（正式称为sprite ）。 我用像素化的角色写了一些蓝图，但是对于我的口味，本教程太冗长了。 但是，这是假期，所以（whoop-de-do和山胡桃码头！）让我们来看看堆雪人。 他们不需要胳膊和腿，这大大降低了为他们创建子画面的复杂性。
在线上的许多Sprite开发教程都鼓励使用Sprite工作表。 那就是当您创建角色可能看待的所有可能方式的图像，然后让您的游戏随时将其裁剪为所需的图像时。
这是创建游戏角色的经典方法。 但是，SVG功能最近已包含在所有浏览器中。 这带来了一些好处，例如可伸缩性（即，如果用户放大并拉伸，一个很小的图像看起来不会很糟糕）。
另一个好处是可以轻松地通过CSS更改精灵。 这使您可以在玩游戏时更改颜色或更改形状。 它还减少了要下载的图像的大小以及渲染图像所需的时间。
如果您对将CSS的剪切功能与静态图像结合使用感到好奇，请参阅Prashant Ram的精彩教程。
创建雪人的SVG时，我将所有设置都设置为雪人的前向位置，将其设置为默认值。 我没有给他他著名的玉米芯烟斗和纽扣鼻，但是如果您要编辑它们，SVG可以轻松地做到这一点。 我想让它尽可能简单，所以一切都只是一个圆圈。
与Sprite表不同，SVG仅在默认位置即可完成并准备就绪……也无需向SVG添加左，右和后向图像。 至少对于这个超级简单的精灵，可以使用CSS动态创建从此开始的所有内容。
为了使雪人朝右，我将其右眼向右移动并隐藏其左眼。 我也将其按钮也向右移动。
我将CSS选择器与子组合器一起使用，因此我们只需要向父项Snowman添加“ right”类即可更改所有这些功能。
/ *朝右* /
.snowman.right> .right.eye，.snowman.right> .button
{
转换：translate（4px）;
} .snowman.right> .left.eye
{
显示：无；
} .snowman.right> .mouth
{
转换：translate（5px）;
}
为了让他面对左侧，我只是反转了右侧的CSS。
/ *朝左* /
.snowman.left> .right.eye
{
显示：无；
} .snowman.left> .left.eye，.snowman.left> .button
{
转换：translate（-4px）;
} .snowman.left> .mouth
{
转换：translate（-5px）;
}
最后，为了得到他的支持，我只是使所有内容都不显示。 您看不到他的脸或按钮。
/ *背面* /
.snowman.rear> .eye，.snowman.rear> .button，.snowman.rear> .mouth
{
显示：无；
}
我创建了一个CodePen，以便您可以看到实际的效果。 每个按钮上附加的JavaScript只是为您更改了雪人的类。
现在您已经有了一个基本的雪人精灵，显而易见的下一步就是赋予它移动的能力。 这将通过可检测按键或按钮按下的JavaScript来完成。
其他一些想法：
- 您还可以通过使用JavaScript而不是类逐渐更改CSS翻译来为雪人创建各种旋转角度
- 您可以使用
fill: yellow;来改变他的按钮或眼睛的颜色（或使他从黄色的雪中变出）fill: yellow;在CSS中 - 您可以制作出更具个性的精灵，例如戴着帽子和背包的人。 如果我绘制的不仅仅是圆形的字符听起来太令人生畏，请查看我的有关使用Inkscape创建SVG戳记的教程。
如果您觉得这有帮助，请考虑在其中加上👏。 如果您没有，请给我留言，以便我改善它！
关注我以获取更多内容！
