html5 版街头霸王,用CSS3和JavaScript开发《街头霸王》游戏
最近我学到了一种很酷的技术,使用CSS3的steps()动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。
我的朋友都知道,年轻时候我非常痴迷《街头霸王》游戏,而当我看到了这个素材….你知道我的脑子里想到了什么吗?
让我们来做出第一个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毫秒对光电球的位置(偏移)检查一次,如果光电球的偏移量超出了窗口宽度,这意味着这个球要撞击到边框,我们要马上应用.explodeCSS类。
下面就是如何实现的;虽然不完美,但完全可以运行:
var $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开发的原因:给你无限可能。
html5 版街头霸王,用CSS3和JavaScript开发《街头霸王》游戏相关推荐
- JavaScript开发数独游戏(一)
这段时间看了一些技术的书籍,想做些游戏来玩玩.中途突然发现自己好像很久没写技术博客了,一来写一下开发过程分享给其他人,二来自己也当做做一些笔记以后没事可以看看.先介绍一下数独这个游戏以及相关技术和构建 ...
- javaScript开发扫雷游戏
前言 扫雷是windows自带的游戏,通过翻开小方块,来推理雷的位置 本文讲解如何通过javaScript制作扫雷游戏,并运用canvas画布绘制windows扫雷效果 一.技术拆分 canvas画图 ...
- 8个超棒的使用javascript开发的视觉特效网站
日期:2012-8-17 来源:GBin1.com 随着flash的落寞及其HTML5和CSS3的发展,更多的网站开始使用javascript,CSS3和HTML5来开发炫酷的特效.今天我们挑选了8 ...
- 用html可以写游戏,javascript可以写游戏吗?
JavaScript可以写游戏.很多页游,主要前端就是用javascript开发的:还有微信小游戏也可以用js写.基于JavaScript开发的游戏是唯一一个能够跨桌面,Web和移动三种平台的. 随着 ...
- iOS Web应用开发:运用HTML5、CSS3与JavaScript
<iOS Web应用开发:运用HTML5.CSS3与JavaScript> 基本信息 原书名:Pro iOS web design and development:HTML5, CSS3, ...
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——导读
本节书摘来自异步社区<iOS应用开发指南--使用HTML5.CSS3和JavaScript>一书中的目录,作者 [美]Kristofer Layon,更多章节内容可以访问云栖社区" ...
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——第1章 变小的巨大影响1.1 移动魔力和掌上电脑...
本节书摘来自异步社区<iOS应用开发指南--使用HTML5.CSS3和JavaScript>一书中的第1章,第1.1节,作者: [美]Kristofer Layon 更多章节内容可以访问云 ...
- HTML5和CSS3 WEB技术开发
HTML5和CSS3 WEB技术开发 B站视频参考:https://www.bilibili.com/video/BV1H44y1k7ze/ 课程目标: 使用HTML5进行网站布局 使用CSS3进行网 ...
- html5web前段页面,HTML5+CSS3 Web前端开发
HTML5+CSS3 Web前端开发 编辑 锁定 讨论 上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪.ISBN为97873024 ...
最新文章
- 六周第三次课 9.6/9.7 awk
- 神经网络预测mnist时候如果不归一化,则准确率仅仅10%下文作者svm也遇到了。
- 不是内部或外部命令,也不是可运行的程序 或批处理文件。(如果放了环境变量还是没有用的话)(已经解决)
- ASP.NET MVC3 权限验证
- Duilib教程-非DUI控件
- SAP Spartacus把指定产品添加到购物车的API
- 白杨SEO:SEM和SEO有什么区别呢?
- 解决QQ聊天自动转成表情
- 实用机器人设计(一)-机器人技术基础
- c语言 队列长度,c语言 队列
- linux查看md5值
- 柜员需要掌握的计算机知识,有多少计算机专业去银行后悔的,可以说说吗?
- Racket Cheat Sheet
- python中的get用法
- 一朵花的组成结构图_花是由哪几个部分组成的?
- USACO 2018 February Contest, Silver-Rest Stops
- 企业数字化最核心的数据智能,它的价值到底在哪?
- 双节将至,XMind给你最好的礼遇
- 微信跳wap有哪些作用?
- 摄像头poe供电原理_带你简单了解一下什么是POE供电
热门文章
- 《中国人工智能学会通讯》——11.70 基于黎曼流形稀疏表示的视觉目 标跟踪方法...
- 计算机专业的三行情书,计算机科学学院成功举办“三行情书”活动
- 【博学谷学习记录】超强总结,用心分享 | 狂野大数据HDFS的Archive机制~个人学习复习记录~PART-04
- 初探SQL注入之GGBond版
- ibaanalyzer使用教程_ibaPDAclient软件快速设置方法.doc
- 前端学习之品优购项目(一)
- AI画图 Disco-diffusion 本地搭建测试
- Firewalld中的whitelist并不是规则白名单
- [个人心得]敏捷管理Agile中Epic, story 和task的用途和管理目标
- 关于人工智能不会使大脑变懒惰的议论文_家长学校 | 家长进课堂,带“变”入校园...