CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 用CSS3和JavaScript开发《街头霸王》游戏

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

    最近我学到了一种很酷的技术,使用CSS3的steps()动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。

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

观看演示

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

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



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


  1. /* html */
  2. <div class="ken lazy "></div>
  3. /* css */
  4. .ken {
  5.     width:70px; height:80px; /* exactly the size of an image in our sprite */
  6.     background-image:url('../images/sprite.png');
  7. }
复制代码


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


  1. /* css */
  2. .punch {
  3.     animation: punch steps(4) 0.15s infinite;
  4. }
  5. @keyframes punch {
  6.     from { background-**ition:0px -160px; }
  7.     to { background-**ition:-280px -160px; }
  8. }
复制代码


       我们这里做的就是定义一个动画CSS类(.punch),基本的动作就是让background-**ition从0px运动到-280px(沿x轴)。这个动作有四帧(steps(4)就是对应的4副打拳的图片),这个动作在0.15秒里完成;这里的设置是循环播放。


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


  1. /* javascript */
  2. $(document).on('keydown', function(e) {
  3.     if (e.keyCode === 68) { // 68 是键盘上的D字符
  4.         $('.ken').addClass('punch');
  5.         setTimeout(function() { $ken.removeClass('punch'); }, 150);
  6.     }
  7. });
复制代码


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


       使用SASS改进代码

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

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

  1. @mixin animation($params) {
  2.     -webkit-animation:$params;
  3.     -moz-animation:$params;
  4.     -ms-animation:$params;
  5.     animation:$params;
  6. }
  7. @mixin keyframes($name) {
  8.     @-webkit-keyframes $name { @content }
  9.     @-moz-keyframes    $name { @content }
  10.     @-ms-keyframes     $name { @content }
  11.     @keyframes         $name { @content }
  12. }
复制代码


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


  1. $spriteWidth:70px;
  2. $spriteHeight:80px;
复制代码


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


  1. @mixin anim($animName, $steps, $animNbr, $animParams){
  2.     .#{$animName} {
  3.         @content;
  4.         @include animation($animName steps($steps) $animParams);
  5.     }
  6.     @include keyframes($animName) {
  7.         from { background-**ition:0px (-$spriteHeight * ($animNbr - 1)); }
  8.         to { background-**ition:-($spriteWidth * $steps) (-$spriteHeight * ($animNbr - 1)); }
  9.     }
  10. }
复制代码


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


  1. $spriteWidth:70px;
  2. $spriteHeight:80px;

  3. /* 直拳 */
  4. @include anim($animName:punch, $steps:3, $animNbr:3, $animParams:.15s infinite);
  5. /* 踢腿 */
  6. @include anim($animName:kick, $steps:5, $animNbr:7, $animParams:.5s infinite);
  7. /* 波動拳 */
  8. @include anim($animName:hadoken, $steps:4, $animNbr:1, $animParams:.5s infinite);
  9. ...
复制代码

        

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


对光电球发生碰撞的检测

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


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


  1. var $fireball = $('<div/>', { class:'fireball' });
  2. $fireball.appendTo($ken);

  3. var isFireballColision = function(){
  4.     return $fireball**.left + 75 > $(window).width();
  5. };

  6. var explodeIfColision = setInterval(function(){
  7.     $fireball** = $fireball.offset();
  8.     if (isFireballColision()) {
  9.         $fireball.addClass('explode');
  10.         clearInterval(explodeIfColision);
  11.         setTimeout(function() { $fireball.remove(); }, 500);
  12.     }
  13. }, 50);
复制代码

在线观看

下一步需要做的

         我们可以很容易的往里面添加一些声效、背景音乐、其它视觉效果,还可以增加web RTC功能,让多台计算机控制多个人物。(也许你可以使用NodeJS和Socket.io,或Meteor framework);这些就是我喜欢web开发的原因:给你无限可能。





【用CSS3和JavaScript开发《街头霸王》游戏】相关文章

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

2. HTML5街头霸王

3. Office15将支持HTML5和JavaScript开发

4. 方向感知CSS3和jQuery的悬停效果

5. 方向感知CSS3和jQuery的悬停效果

6. 一款基于css3和jquery实现的动画弹出层

7. 使用CSS3和RGBa创建超酷的按钮

8. 原生体验挡不住!JavaScript开源跨平台框架NativeScript

9. JavaScript开源跨平台框架NativeScript

10. 使用CSS媒体查询和JavaScript判断浏览器类型

本文来源:https://www.51html5.com/a1021.html

点击展开全部

﹝用CSS3和JavaScript开发《街头霸王》游戏﹞相关内容

「用CSS3和JavaScript开发《街头霸王》游戏」相关专题

其它栏目

也许您还喜欢