用CSS3和JavaScript开发《街头霸王》游戏_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了用CSS3和JavaScript开发《街头霸王》游戏_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4454字，纯文字阅读大概需要7分钟。

内容图文

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

观看演示

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

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

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

/* html */
/* 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毫秒对光电球的位置(偏移)检查一次，如果光电球的偏移量超出了窗口宽度，这意味着这个球要撞击到边框，我们要马上应用 .explode CSS类。

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

var $fireball = $('
', { 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 .)

内容总结

以上是互联网集市为您收集整理的用CSS3和JavaScript开发《街头霸王》游戏_html/css_WEB-ITnose全部内容，希望文章能够帮你解决用CSS3和JavaScript开发《街头霸王》游戏_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端