经典街机游戏“街头霸王”对于80后的童鞋们来说一定不陌生。Ken和隆的华丽冲击波、将军的半月斩、春丽的倒挂旋风腿不禁让许多人都回到了童年的美好时光。今天，我们就用和技术来还原“街头霸王”的风采。在这个教程中，将制作Ken的移动、跳跃、出拳、出腿、回旋踢、升龙霸和冲击波的动画，你可以通过界面上的按钮或键盘来控制这些动作。还等上面，让我们开始吧！
创建CSS动画
我们将从人物出拳动画开始制作。看下边边的人物Ken的sprite图，我们将使用第三排的人物图片。我们可以用 Photoshop 来制作这张sprite图，确保所有人物图片的尺寸一样大。在这个demo中人物图片都是70像素宽和80像素高。
然后我们需要使用一个&div&来放置游戏人物，这样才能使它动起来：
&div class="ken"&&/div&
width:70 height:80 /* exactly the size of an image in our sprite */
background-image:url('../images/sprite.png');
注意这里书写的代码中都没有使用浏览器厂商的前缀。现在来写人物出拳的CSS代码：
animation: punch steps(4) 0.15
@keyframes punch {
from { background-position:0px -160 }
to { background-position:-280px -160 }
我们要做的是使用一个名字为.punch的class来应用人物出拳的动画效果，该动画将图片的background-position在X轴上从0px移动到-280px。这个动画过程被分割为4个部分，steps(4)对应于4副图片，每隔0.15秒显示一幅图片，然后无限循环下去。
最后我们需要一个方法来在其它键被按下时从div.punch中添加和移除class .punch。
$(document).on('keydown', function(e) {
if (e.keyCode === 68) { // 68 is the letter D on the keyboard
$('.ken').addClass('punch');
setTimeout(function() { $ken.removeClass('punch'); }, 150);
上面的代码是如果按下了“D”键（升龙霸），人物将先使用
来 addClass('punch')，然后在延时150毫秒后移除该class（记住我们在CSS动画中有一个0.15秒的延时）。以上就是创建一个人物动作的所有要求。
通过SASS来创建动画
如果你仔细观察的CSS代码，会发现有许多值是不变的。（例如sprite图片的宽度和高度）。在你创建其它动画的时候，会发现有大量的重复代码，非常不变于阅读和管理。能够很好的帮助我们解决这个问题。
首先，我们需要一些基本的@mixins如：animation()和keyframes()。
@mixin animation($params) {
-webkit-animation:$
-moz-animation:$
-ms-animation:$
animation:$
@mixin keyframes($name) {
@-webkit-keyframes $name { @content }
@-moz-keyframes
$name { @content }
@-ms-keyframes
$name { @content }
@keyframes
$name { @content }
我们需要使用变量来存储图片的宽度和高度：
$spriteWidth:70
$spriteHeight:80
最后我们可以将这些变量进行组合创建一个新的mixin，它将为我们解析和执行背景图片的动画。
@mixin anim($animName, $steps, $animNbr, $animParams){
.#{$animName} {
@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:70
$spriteHeight:80
/* punch */
@include anim($animName:punch, $steps:3, $animNbr:3, $animParams:.15s infinite);
/* kick */
@include anim($animName:kick, $steps:5, $animNbr:7, $animParams:.5s infinite);
/* hadoken */
@include anim($animName:hadoken, $steps:4, $animNbr:1, $animParams:.5s infinite);
$animNbr是一个非常重要的变量：所有的计算都基于该变量进行。实际上它只是sprite图上该动作所排的位置。我们的第一个例子是出拳，它在sprite图上排在第3行，出腿排在第7行，等等。
为冲击波添加碰撞检测
我们需要一个非常快的循环来做碰撞检测。它没50毫秒检测一次冲击波的位置，然后和某些物体的位置作比较（这里是和屏幕耳的最右边作比较）。如果冲击波的位置比屏幕的宽度大，说明冲击波碰撞了屏幕的边部，我们要立即为它添加一个 .explode
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);
基本的制作过程就这么多，我们还可以为它添加一些背景音乐，创建另外一些角色等等。制作一个小游戏就这么简单，你应该发挥自己的无限想象力，相信你一定可以做的更好。
本文版权属于jQuery之家，转载请注明出处：javascript+CSS3 3D游戏/效果 - CSDN博客
javascript+CSS3 3D游戏/效果
因为是学习Web前端的，对前端知识技术也十分关注。要做一个3D游戏时，我第一想到的就是HTML5+CSS3技术，可以这样说：Web的未来属于HTML5。再搭配javascript，基本可以能实现你所想到的任何效果。尽管javascript是一门解释型语言，相对于编译型语言这种强类型语言要简单，但其功能是十分强大的。
作品：3Dbook
所需技术：javascript+HTML5+CSS3
需求分析：
1.需要一个声明3D空间
2.通过鼠标事件，改变book角度
3.各个角度需比例旋转
开始的大体思路和考虑到的问题：
思路：使用javascript+HTML5+CSS3,实现一个3D的翻书效果。主要通过javascript改变CSS3的transform转换（transform的属性包括：rotate() 旋转度 、skew() 倾斜度、 scale()
比例、 translate() 变动，还有X，Y之分），加上javascript动态改变多个物体（应该说“标签“或者”块“）的角度，达到一个友好的3D效果。
问题：用到了HTML5和CSS3，就不得不面对兼容性问题。不知道老师用什么浏览器，所以只好把所有常用的浏览器考虑进去（加上不同前缀，显得比较繁杂），并且此效果不支持IE8及以下版本。（注：因为它不支持HTML5和CSS3），所以请用Chrome/Firefox等常用浏览器（呼吁：珍爱生命，远离IE！！！）
性能上的考虑和解决：
1.各浏览器的兼容性（所以需要根据浏览器内核，使用固有前缀）
2.前缀不同，而后面样式相同（所以后面采用数组，靠for循环动态生成带前缀代码）
3老版本浏览器（IE8及以下不能支持最新CSS3技术）
自己动手过程：
各浏览器前缀：-webkit-&(Chrome Safari) ；-moz- （Firefox）；-ms- (IE)；-o-
这里看看CSS3如何实现3D效果的吧（自己的一个小例子）：
声明3D空间 : transform-style:preserve-3d;
转换时间 : transition:3s all &(转换时间3s);
布置盒子6面 : (第一面：transform-origin:transform:translateZ(100px)&&rotateX(90deg);)
（盒子的折叠：如下）
盒子demo（不是作业）:
下面正式开始：
1.先是找素材，这里我找的是Mozilla公司的标志恐龙
2.大概想实现的效果是，通过鼠标点击，移动，改变各层角度。
3.先让book本身出场时有点角度
4.考虑到有两页。先对第一页，以Y轴为中心旋转，让两页的连接处为轴：
Z轴前移3像素（后面后页也后移3像素，看上去有层次感）
5.后一页：
Z轴后移3像素，再旋转180度（先书闭合，这样才重合）
6.恐龙和他的影子都延Y轴旋转：
1.最关键的是javascript的效果
重要步骤：
当鼠标按下移动时，根据鼠标X轴移动的距离，确定一个角度
1.最关键的是javascript的效果
javascrip最重要步骤：
当鼠标按下移动时，根据鼠标X轴移动的距离，确定一个角度
（注：这里的clamp函数是自己定义的函数，返回三个中的最大值）
再根据这个角度，分别改变书本、两页、恐龙和阴影的角度：
（这些角度/比例的选择，真的是太难测试出来~~~~(&_&)~~~~&，后来通过根据数学公式中的角度计算，才算出来的。）
（注：这里用prefixes数组存放了所有前缀，使之动态添加所有的浏览器的前缀。）
作品链接：
总结：因为自己十分关注前端新技术，HTML5和CSS3的新特性将会更显著的美化应用程序，结合javascript将让用户有意想不到的动感特效。通过本次学习实践，加深了我对它们的熟悉和掌握，使我更有兴趣去学习提高前端知识技能。Fighting！！！
最近看了HTML5游戏引擎，觉得功能还是很强大的，学习了一下，准备做一个小游戏熟悉一下^_^。因为作业也有这一方面的，就顺便添加进来了。
作品2：flappy bird
作品链接：(最好用火狐浏览器打开)
所需技术：javascript+HTML5+phaser.js
需求分析：
1.HTML5游戏引擎（cocos-2d和phaser.js中选择了phaser.js）
2.鸟加上重力（向下掉）
3.空格跳跃
4.水管动态添加和删除，并向左移（看上去是鸟在右移）
5.碰撞检测
6.结束标志，并重置游戏（超出范围或碰撞水管）
性能上的思考：
下来看了一下效率问题，javascript开启定时器，对浏览器资源的消耗还是有点大。网上查了查，终于发现了一个神器，缓动函数requestAnimationFrame.它就是浏览器厂商，为解决运动需要定时器，而专门做的一个动画方法。它让浏览器更好的执行动画（准确说是“运动”）.你可以参考一下这里哟：
作品画面：
因为最近看很多HTMl5的js大牛在业余时间都开始关注用html5游戏引擎进行游戏开发。我们了解了cocos-2d和phaser.js这两个引擎，也看了下网上的介绍。给我的感觉就是cocos-2d比较复杂一点，对有cocos-2d平台开发经验的人来说学习比较容易，而phaser.js相对于刚开始接触游戏引擎的人来说比较容易一些（相当于html5游戏开发框架！）你可以通过github主页学习（）
其大概思路与步骤：
1.引入phaser.js插件
2.phaser.game参数介绍
Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)
width : 游戏宽
height : 游戏高
renderer : 渲染方式（这里我选用的是自动phaser.AUTO）
parent : 存放canvas的父元素
state : 游戏场景
transparent ： 背景透明度
antialias : 是否启用抗锯齿
physicsConfig : 游戏物理系统配置参数
以上参数为可选择的。
3.步骤1：实例化一个phaser实例，创建好游戏主体。
加载资源（鸟、管道（我都用的图片）），
添加属性/方法：
鸟：重力（保证会下掉）&
this.bird.body.gravity.y = 1000;
管道：1.要动态创建，这里我开一个定时器每隔1.5s创建一组
//1.5s开一个定时器，创造管道
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);
//2.并给管道一个速度，让其左移（看上去是鸟在动，实际上是管道哦）
// 添加管道: 重置管道位置
给管道一个X轴的速度，让管道左移 消除通过的管道
add_one_pipe: function(x, y) {
var pipe = this.pipes.getFirstDead();
pipe.reset(x, y);
pipe.body.velocity.x = -200;
pipe.outOfBoundsKill =
//3.添加6个管道，中间2个空格
add_row_of_pipes: function() {
var hole = Math.floor(Math.random()*5)+1;
for (var i = 0; i & 8; i++)
if (i != hole && i != hole +1)
this.add_one_pipe(400, i*60+10);
this.score += 1;
this.label_score.content = this.
&空格：按下跳跃
//空格跳跃 鸟跳，给鸟一个垂直速度
var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
space_key.onDown.add(this.jump, this);
&span style=&white-space:pre&& &/span&jump: function() {
&span style=&white-space:pre&&
&/span&this.bird.body.velocity.y = -350;
&span style=&white-space:pre&& &/span&}
刷新：检测游戏是否结束（我是1s检查60次，可能效率不太高）
//此函数1秒调用60次
update: function() {
// 过高或过低 或者鸟碰到任意管道，重新开始游戏
if (this.bird.inWorld == false)
this.restart_game();
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);
性能分析：
下来看了一下效率问题，javascript开启定时器，对浏览器资源的消耗还是有点大。网上查了查，终于发现了一个神器，缓动函数requestAnimationFrame.它就是浏览器厂商，为解决运动需要定时器，而专门做的一个动画方法。它让浏览器更好的执行动画（准确说是“运动”）.你可以参考一下这里哟：
思考与总结：
通过本次实际操作，对html5的游戏引擎有了，大概的了解，也进一步认识到了html5的未来前景与强大。又认识到javascript的重要作用，无论是html5还是canvas都离不开javascript这一重要部分。中间遇到很多问题，追其原因就是javascript的运用还不够精通，灵活。下来还要努力了。
关于分工：
凌浩：主要负责了javascript的编写实现，游戏引擎的效果，flappy-bird的实现，辅助3Dbook的思路与改写，blog文档的编写
阎一豪：主要负责了CSS3的编写、资源的查找，3D效果的实现3Dbook的实现，辅助javascript的改写
以上所有我们大概用了一周的时间，快累屎鸟！！！不过也收获多多,感觉赚了O(∩_∩)O！
本文已收录于以下专栏：
相关文章推荐
上次，我们一起研究了css3的2d模块，这次我们一起来看一下css3的3d模块。
　　首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。
jQuery是一款很强大的JavaScript框架，本文介绍的9个应用插件很多都是基于jQuery的，另外，CSS3的应用让这些插件增添了不少光彩，特别是第一个动画插件Animate.css非常实用，...
一、帧率、分辨率、码流的概念和关系1、帧率（Frame Rate）一帧就是一副静止的画面，连续的帧就形成动画，如电影等。我们通常所说的帧数就是在秒钟时间里传输的图片的帧数，通常用fpsFrames P...
又很久没有更新博客了，在这段时间里发生的事还蛮多的，回想起来才发现时间过得好快啊。至于博客嘛，天天都会关注，一来想看看大家是否写了一些评论，二来想看看大神们（如lufy，浅墨，雾央，Himi等）有没有...
嗯，之前用css3和javascript实现3D旋转立方体的时候就说过了，要用qi
1.transform-style 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化
取值：flat | preserve-3d
flat：默认值，指定子元素...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)