黑基网 首页 学院 电脑技术 查看内容

用CSS3和JavaScript开发《街头霸王》游戏

2014-10-12 17:19| 投稿: computer

摘要: 最近我学到了一种很酷的技术,使用CSS3的steps()动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。我的朋友都知道,年轻时候我非常痴迷《街头...
最近我学到了一种很酷的技术,使用CSS3的steps()动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。我的朋友都知道,年轻时候我非常痴迷《街头霸王》游戏,而当我看到了这个素材….你知道我的脑子里想到了什么吗?观看演示让我们来做出第一个CSS动作首先我们要实现的是直拳(就是下面图案中的第三个)。第一步是打开Photoshop,抠出这几个图,这些图都要保持着70px宽和80px高。有一个很好的网站Texture Packer,它能帮你处理这些图片。最终,你的图片应该是这个样子:下面我们需要有一个DIV,动作将显示到这个DIV里:/* html */ <div class="ken lazy "></div> /* css */ .ken { width:70px; height:80px; /* exactly the size of an image in our sprite */ background-image:url('../images/sprite.png'); }这里我省略了可能需要的浏览器CSS前缀。那么,打直拳的CSS代码就应该是这样:/* css */ .punch { animation: punch steps(4) 0.15s infinite; } @keyframes punch { from { background-position:0px -160px; } to { background-position:-280px -160px; } }我们这里做的就是定义一个动画CSS类(.punch),基本的动作就是让background-position从0px运动到-280px(沿x轴)。这个动作有四帧(steps(4)就是对应的4副打拳的图片),这个动作在0.15秒里完成;这里的设置是循环播放。我们还需要有个增加/删除DIV.ken上的.punch类的方法,当控制键被按下时,会调用这个方法。/* javascript */ $(document).on('keydown', function(e) { if (e.keyCode === 68) { // 68 是键盘上的D字符 $('.ken').addClass('punch'); setTimeout(function() { $ken.removeClass('punch'); }, 150); } });如果有人按下了“D”键,我们使用jQuery的addClass('punch')来增添CSS类,而且用setTimeout设置了150毫秒时间的延迟后,删除它(因为我们的动作是在0.15s完成的)。基本上这就是创造所有动画需要的基础知识了。使用SASS改进代码如果你留心我们所做的事情,你会发现代码里有些值永远不会改变(图片的长宽等),而且,在创建了一些动画后,你会发现有很多重复的代码,这会让我们的代码很难阅读和维护。SASS能帮助我们消除重复的代码。首先我们要创建几个基本的@mixins,比如animation()和keyframes():@mixin animation($params) { -webkit-animation:$params; -moz-animation:$params; -ms-animation:$params; 小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册黑基账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!



免责声明:本文由投稿者转载自互联网,版权归原作者所有,文中所述不代表本站观点,若有侵权或转载等不当之处请联系我们处理,让我们一起为维护良好的互联网秩序而努力!联系方式见网站首页右下角。


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论


新出炉

返回顶部