30年前的街头霸王,我用代码还原它,致敬经典

处输入图片描述

今天想给大家分享一款30年的游戏,具体思路和方法都写在文章中了,希望大家能够喜欢这个游戏,程序员很多都和年纪相仿了,这游戏相信很多人也玩过,所以今天就做了出来。

这里还是要说一下我的前端学习裙的哦:68536,2217,从我一个人到现在的1270人都是我每篇文章每个特效聚集的小伙伴,可以说都是我们大前端的学霸啊,不定期分享干货。想学到东西的都可以来,欢迎初学和进阶中的小伙伴。

我的朋友都知道,年轻时候我非常痴迷《街头霸王》游戏,而当我看到了这个素材….你知道我的脑子里想到了什么吗?

让我们来做出第一个CSS动作

首先我们要实现的是直拳(就是下面图案中的第三个)。第一步是打开Photoshop,抠出这几个图,这些图都要保持着70px宽和80px高。有一个很好的网站Texture Packer,它能帮你处理这些图片。最终,你的图片应该是这个样子:

下面我们需要有一个DIV,动作将显示到这个DIV里:

这里我省略了可能需要的浏览器CSS前缀。那么,打直拳的CSS代码就应该是这样:

我们这里做的就是定义一个动画CSS类(.punch),基本的动作就是让background-position从0px

运动到-280px(沿x轴)。这个动作有四帧(steps(4)就是对应的4副打拳的图片),这个动作在0.15秒里完成;这里的设置是循环播放。

我们还需要有个增加/删除DIV.ken上的.punch类的方法,当控制键被按下时,会调用这个方法。

如果有人按下了“D”键,我们使用jQuery的addClass('punch')来增添CSS类,而且用setTimeout设置了150毫秒时间的延迟后,删除它(因为我们的动作是在0.15s完成的)。基本上这就是创造所有动画需要的基础知识了。

使用SASS改进代码

如果你留心我们所做的事情,你会发现代码里有些值永远不会改变(图片的长宽等),而且,在创建了一些动画后,你会发现有很多重复的代码,这会让我们的代码很难阅读和维护。SASS能帮助我们消除重复的代码。

首先我们要创建几个基本的@mixins,比如animation()和keyframes():

我们要把图片的长度和宽度存储到变量里,SASS变量在这里就有了很大的用处:

最终,我们把这些组合到一起,创建一个复杂的SASS mixin,用来声明我们的动画动作和计算背景移动的位置:

现在,你可以用一行代码创建一个动画动作:

这个$animNbr变量很重要:我们的动画中的计算要基于这个数字。事实上,它就是动画中的动作序列的编号。我们第一个例子是长拳,它在图片中的位置是3,踢腿是7,以此类推。

对光电球发生碰撞的检测

我需要一个很高的频率对碰撞进行检测。每50毫秒对光电球的位置(偏移)检查一次,如果光电球的偏移量超出了窗口宽度,这意味着这个球要撞击到边框,我们要马上应用.explode

游戏源码领取地址:

CSS类。

下面就是如何实现的;虽然不完美,但完全可以运行:

学习javascript也是有门槛的,就是你的html和css至少还比较熟练,您不能连html这东东是干啥的都不知道就开始学javascript了,学乘除前,学好加减法总是有益无害的。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180711A1YUSH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券