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

资讯频道 → Web前端

3顶
0踩

2014-04-18 11:10 by 副主编 WnouM 评论(4) 有7687人浏览

css3 javascript html5 游戏

使用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;
    animation:$params;
}
@mixin keyframes($name) { 
    @-webkit-keyframes $name { @content }
    @-moz-keyframes    $name { @content }
    @-ms-keyframes     $name { @content }
    @keyframes         $name { @content }
}

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

$spriteWidth:70px;
$spriteHeight:80px;

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

@mixin anim($animName, $steps, $animNbr, $animParams){
    .#{$animName} { 
        @content;
        @include animation($animName steps($steps) $animParams); 
    }
    @include keyframes($animName) {
        from { background-position:0px (-$spriteHeight * ($animNbr - 1)); }
        to { background-position:-($spriteWidth * $steps) (-$spriteHeight * ($animNbr - 1)); }
    }
}

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

$spriteWidth:70px;
$spriteHeight:80px;

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

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

对光电球发生碰撞的检测

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

下面就是如何实现的；虽然不完美，但完全可以运行：

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

var isFireballColision = function(){ 
    return $fireballPos.left + 75 > $(window).width();
};

var explodeIfColision = setInterval(function(){
    $fireballPos = $fireball.offset();
    if (isFireballColision()) {
        $fireball.addClass('explode'); 
        clearInterval(explodeIfColision);
        setTimeout(function() { $fireball.remove(); }, 500); 
    }
}, 50);

观看演示

下一步需要做的

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

英文：Build a Street Fighter Demo with CSS Animations and JavaScript. 译文： webhek.com

关注ITeye官微，随时随地查看最新开发资讯、技术文章。

查看图片附件

来自: webhek

分享到：

3
顶

0
踩

评论共 4 条请登录后发表评论

4 楼 flasheep 2014-04-22 15:25

3 楼 LinApex 2014-04-20 11:29

哎哟，不错哦

2 楼 xp_zed 2014-04-20 02:26

斜跳不能?

1 楼 lsjinpeng 2014-04-19 09:09

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

LigerUI 表单和表格中的combobox如何初始化值

在修改基础信息的时候，通常会遇到需要修改值为选择值的时候，这时候，数据库存的一般是value，而不是显示的text值，但页面显示的时候如果显示成数字型的值，通常会给人不够直观的感觉。因此，要求页面在加载的时候...

ExtJs 之 ComboBox级联使用

刚接触ExtJs不到一周，项目使用ExtJs框架，有个版块用到了combobox的级联(两级)，遇到了一系列的问题，两天来一直查API、网络资料，终于解决了。先列出遇到的一系列问题(也许你也遇到过！)，再看是如何一步步解决...

flex的datagrid内嵌combobox和itemclick

private function hsComResult(event:ResultEvent):void{ //表格有结果 dataXML=XMLList(XML(event.result.valueOf()).children()); datalist.dataProvider = dataXML; selectedItems = new Array(); ...

使用jquery、EasyUI 实现可编辑表格复杂功能

表格行内下拉：日期控件：弹框下拉表单：上传导入文件：模态框，处理状态提示：源代码： ; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE ...

EasyUI 的应用

EasyUI怎么应用？ author:songfuwfei 1.先在myeclipse搭好一个ssm的框架。 2.在mysql里面建好需求表。 3.创建好表，搭好框架写个index文件跑一下项目看框架好使不。 4.导入一些 ...

C#学生管理系统——班级列表（查询功能）

简单写下，查询这个浅色的框框是GroupBox，其功能是带有标题的框框（只是为了美观，没啥卵用），年级这些都是Label标签，选择年级的下拉菜单框用combobox，班级textbox，查询按钮button。下半部分因为要...

S:标签实际大全(struts2)

（1）： ---- 文本...如果是要显示值的话可以这样：value = “实体Bean。Get***()”。? （4）： ---- 单选按钮? 使用：其中list 属性是必须要有的。? :第一种方式：list = “#{‘male’:’男’,’female’:’女’}

Struts2标签使用

转载觉得不错转自：... Struts2标签使用（1）： ---- 文本输入框使用：（2）： ----- 文本域输入框 ...如果是要显示值的话可以这样：value = “实体Bean。Get***()”。

Struts2常用标签

Struts2标签使用（1）： ---- 文本输入框 ...如果是要显示值的话可以这样：value = “实体Bean。Get***()”。（4）： ---- 单选按钮使用：其中list 属性是必须要有的。 :第一种方式：list = “#{‘mal

struts2标签总结

<s:param name="gId" value="20"></s:param> value="50"></s:param> value="30"></s:param> </s:url>"> insert</a> （21）：<s:set/> --- Set标签用户将某一值赋给某一变量，因此，任何对该项值的引用...

EXT属性

top.Ext.Msg.alert("值"); top.Ext.Msg.confirm("值"); top.Ext.Msg.notify("值"); Ext.getCmp("控件ID").setText("值"); //设置控件的Text值 Ext.getCmp("控件ID").setValue("值");...

18第一章 ASP.Net内建对象

第一章 ASP.Net内建对象第一章 ASP.Net内建对象 ASP.Net为保持用户的数据和信息，内建了许多对象，...// Cookies中的值不能修改，只能覆盖 label1.Text="您是第"+Num.ToString()+"次访问本站"; } ...

EASYUI

EasyUI数据表格DataGrid 需要引入： < link rel = "stylesheet" type = "text/css" href = "themes/default/easyui.css" > < link rel = "stylesheet" type = "text/css" href = "themes/...

EasyUI的简单应用

EasyUI怎么应用？ author:songfuwfei 1.先在myeclipse搭好一个ssm的框架。 2.在mysql里面建好需求表。 3.创建好表，搭好框架写个index文件跑一下项目看框架好使不。 4.导入一些 css js 小图标插件放到web...

孙允中临证实践录.pdf

rqapha的改造学习，集成大鱼金融提供的Jaqs分钟数据源Mod，拥抱开源，学习量化.zip

Rqalpha-myquant-learning对开源项目Rqalpha的改造，在应用上面更适合个人的应用。学习量化策略，对量化策略进行开发调试。2018-05-25程序更新集成大鱼金融提供的分钟线回测Mod，用来提供Jaqs分钟线数据源，测试程序通过。目前的改造情况1.增加ats.main.py，来驱动起回测，使程序可以使用pycharm进行开发调试2.增加批量回测功能3.在AlgoTradeConfig中进行配置回测的策略和所需要的参数信息，参数信息通过excel文件进行配置4.在ats.main.py中设置参数为batch，运行回测，会将输出的.csv文件放在cvsResult目录下，将回测的图片保存在picResult目录下。5.读取回测的.csv文件，提取账户信息，可以将不同参数回测的结果输出在同一张图片上，更加清晰的看清同一个策略，不同参数所带来的变化。6.从广发信号站点获取历史交易信号（站点已停止，此处无法继续）7.增加通用函数的封装，现阶段增加了对TA_LIB的调用封装（未完整完成）8.增加了对增量资金定投的情况的模拟，用

携程大数据比赛-预测航班是否延误涵盖源代码，以及过程记录.zip

航班背景随着国内民航的不断发展，航空出行已经成为人们比较普遍的出行方式，但是航班延误却成为旅客们比较头疼的问题。台风，雾霾或飞机故障等因素都有可能导致大面积航班延误的情况。大面积延误给旅客出行带来很多不便，如何在计划起飞前2小时预测航班延误情况，让出行旅客更好的规划出行方式，成为一个重大课题。要求提前2小时（航班计划起飞时间前2小时），预测航班是否会延误3小时以上（给出延误3小时以上的概率）

comsol变压器绝缘油中流注放电仿真，使用PDE模块建立MIT飘逸扩散模型模型到手即用，提供MIT鼻祖lunwen中文版，及相关学习笔记资料流注放电，绝缘油，油纸绝缘

comsol变压器绝缘油中流注放电仿真，使用PDE模块建立MIT飘逸扩散模型。模型到手即用，提供MIT鼻祖lunwen中文版，及相关学习笔记资料。流注放电，绝缘油，油纸绝缘。

3顶0踩