在使用过一段时间的SVG动画之后,我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台,例如Greensock,和原生的css动画简直是绝配。于是我便打算深入地研究一下,看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样,好的游戏拥有许多细致的动画细节。有一天夜里,我的脑海中突然闪现了一个游戏的灵感,我马上起来,画了一些草图,之后给我的哥哥看--他是一个专业的网页设计师。我们立即开始着手设计,讨论了所有的细节动画后(试着画出来并且配以音效),我便开始进行游戏开发。
如何玩: 来回弹跳的球是可以改变颜色的。你必须随时观察球当前的颜色,并且在球和柱子相接触的一瞬间,确保两者的颜色是一样的。点击柱子可以改变它的颜色,单击变红,双击变黄,三击则变为紫色。
这里是游戏的完整版: http://codepen.io/gregh/full/yVLOyO
在开发这款游戏的过程中,我不断地遇到问题并重构代码。其中的一个最主要的问题就是,如何能让游戏在所有的设备和所有尺寸的显示器上都看起来不错。我使用我的Macbook Pro 开发,游戏的画面很棒。但是当到了 27" iMac screen 上时,整个画面就看起来特别小,当然在iPhone又会显得特别大。我真心地希望可以有一把适配所有设备的“万能钥匙”。经过了许多次的尝试之后,我清楚地意识到,传统的使用媒体查询的技术来做响应式设计是行不通的。
这篇文章并不是一个教程,因此我将不会逐行的解释我的代码。但是,我会展示给你一些十分酷的东西,你可以通过在CodePen上或者是在浏览器的调试工具里面修改参数进行测试。同样,我也会在相应的地方写出一些参考资料。在CodePen上,我尽可能多的写出代码注释,赶快去看看代码吧!
十分强大的GSAP让我理所当然地选择了它,而我选择在CodePen上面写码的原因是它内置了一个babel编译器,这样我就可以在上面书写ES6的语法,你不知道Class和箭头函数有多好用! 关于ES6的特性介绍,你可以点击这里: https://github.com/DrkSephy/es6-cheatsheet
我下面假设你熟悉GSAP用法,但如果你不熟悉的话,你可以看下这个“讨厌番茄”的人的关于GSAP的教程。https://ihatetomatoes.net/get-greensock-101/
几乎所有你能在背景上看到的东西都是用SVG制作的。每个波浪是一个独立的<div>,每一层的山峰也是一个<div>,甚至云也是<div>。当你在制作一个复杂的动画时,有一点是需要注意的。你完全可以使用一整个SVG当做背景,然后为这个SVG的子元素和路径来制作动画。Greensock允许我们这样做,你需要做的仅仅是为这些SVG的元素(比如说path,group等等)分配一些ID,然后用过ID选择到他们。但这样做的问题在于,在移动设备上,这些动画跑不动。所以你最好是把这些背景元素放在独立的<div>里面,然后为这些<div>添加动画,我实际上就是使用这些SVG的作为背景。
var wave1 = TweenMax.to('.wave1', 0.7, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
通过类似于上面的代码,我们就得到了一些简单的补间动画。这些动画可以将背景水平地移动54个像素(也就是背景的宽度),在这里我们想要背景匀速地移动,所以我们不需要缓动动画。当我们为每个背景设置不同的移动速度的时候,他们就有表现出了视觉差的效果,看上去很酷吧!
看到画面上漂浮着一些白色的小圆点了没?我创造了这些圆点并为他们设置了随机的位置和尺寸,接着我让他们做圆周运动。
{rotation: 360, transformOrigin: "-"+radius+"px -"+radius+"px", ...
这样他们就缓慢地进行圆周运动,但看上去却像随机运动一样。
每一个柱子里都有一些会动的小元素,这些小元素仅仅是由html和CSS制作出来的。使用SASS可以节省很多时间和代码量(通常情况下是这样的)。我通过创建形状的mixins来为这些柱子里面的小东西添加效果。如果我们看下bublble这个效果的代码,我们就会发现每个圆圈都使用了绝对定位并使用到了这个mixin。在CSS中创造三角形需要很多的代码,所以mixin就派上了大用场。
让我们看看红色的柱子,柱子里面包含着很多的气泡:
@mixin bubble ($size, $top, $left) {
height: $size;
width: $size;
top: $top;
left: $left;
}
@mixin bubble_hollow ($size, $top, $left) {
@include bubble ($size, $top, $left);
background-color: transparent;
border-style: solid;
}
所以现在,如果想要在柱子里面创造一些气泡的话,我只需要调用这些mixin,设置气泡的大小,然后让把他们放在柱子的特定的位置上就好了:
.bubble-4 {
@include bubble(15px, 98px, 37px);
}
.bubble-5 {
@include bubble_hollow(5px, 116px, 20px);
}
当你需要通过边框来制作一些小的三角形的时候,你需要用大概20行的css代码来生成,所以使用mixin实在是太有必要了。
我使用交错动画来做这个效果。这个动画可以操控柱子里面所有的气泡元素,并且可以让每个气泡有一个小小的延时,让他们不会同时开始运动。点击这个链接,你可以了解更多的关于交错动画的知识:http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/
在黄色的柱子里面,我使用到了旋转的效果。但是你可能注意到,有些旋转是围绕着X轴的,有些是围绕着Y轴进行运动的。我们在这里使用到了 cycle属性。
var triangle = new TimelineMax({delay: 0.5});
triangle
.staggerTo(el.find('.triangle'), 1.5, {
cycle:{
rotationY: [0, 360],
rotationX: [360, 0],
},
repeat: -1,
repeatDelay: 0.1
}, 0.1);
在制作方块的动画的时候,我们也使用到了相同的技术。因此,有一半的方块是从左向右移动的,而另外一般则做反方向的运动。
让我们点击重新开始,再看下这个动画吧.
我想要分数的动画有一种“Q弹”的感觉,于是我就写了几行代码来形成这个效果。
var resultTimeline = new TimelineMax();
resultTimeline
.fromTo('.stop-game .score-container', 0.7, { opacity: 0, scale: 0.3 }, { opacity: 1, scale: 1, ease: Elastic.easeout.config(1.25, 0.5)})
.fromTo('.stop-game .final-score', 2, { scale: 0.5 }, { scale: 1, ease: Elastic.easeOut.config(2, 0.5)}, 0)
.fromTo('.stop-game .result', 1, { scale: 0.5 }, { scale: 1, ease: Elastic.easeOut.config(1.5, 0.5)}, 0.3)
;
为了做出这种“触电”(或者说是“Q弹”)的效果,我们需要制作正确的缓动动画。如果你想要看看你可以使用什么样的缓动方程,看下 Greensock 缓动观察器:http://greensock.com/ease-visualizer 选择 Elastic 并调整配置参数,你就可以实时地看运动效果。
这款游戏的第一个创新性就是使用了“弹性盒子”,如果要是不了解弹性盒子的话,你可以阅读下这篇优秀的文章: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 或者看下 Laracasts上的相关系列。一旦你开始使用了弹性盒子,你就再也离不开它。下面我们看下我的的主菜单界面和游戏界面吧。
开始游戏的容器CSS样式如下:
{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
“flex-direction: column”表示在容器内部弹性元素的排列方向。 设置为Column,则元素从上到下依次排列。而默认的(row)则将元素从左到右排列。弹性盒子可以这只空白区域,我们可以设定我们是在元素的前面、后面或者周围放置这些空白区域。动手试下,感受下弹性盒子是多么好玩吧!因为我们设置成了“space-between”,所以 Top 被放在了顶部, How to Play被放在了底部,而Logo Holder则放在了中间,空白区域被填充在了这些元素之间。 Align-items: center, 定于交叉轴(这个游戏中代表水平轴)上元素的对齐方式,center表示居中对齐。其中 How to Play也是一个弹性盒子,它的代码如下:
{
display: flex;
width: 100%;
}
它也是一个flex元素,我们如果去设定他的flex-direction, 它将使用默认值(row),将其中的三个弹性元素水平的排列。第一个和第三个元素的“flex”参数为1,因此他们将占据所有的空白空间,flex是一个相当高端的特性。同样的,你也可以通过在How to Play上设置 justify-content: space-around来达到同样的目的.我使用flex: 1 的原因是,我想让中间的一列排在屏幕的最中央。
下面我们看下游戏界面。这个界面也是一个弹性布局。界面有一个柱子容器和一个球的容器。我不想让球是绝对定位的,因为我通过css让球刚好坐在柱子上,这样即使我改变柱子的高度,我也不需要改动其他代码就可以让球恰好落到柱子上。因此我将容器的flex-direction设置为 column,正如我所愿,球容器刚好紧挨着柱子的顶部。justify-content: space-between让球的容器永远靠着屏幕的顶部,而柱子容器永远靠着屏幕的底部。 现在我们给球的容器如下的样式:
{
display: flex;
flex-direction: column;
justify-content: flex-end;
}
球的容器也是弹性布局,我们将flex方向设为column(这样Y轴成为了主轴,元素从上到下排列)。之后我们通过 justify-content: flex-end将球推到了容器的底部,因此,我们便得到了两个紧密排列的容器,并且第一个容器的内部元素被推到了该容器的最下面,这样我们便做到了让球坐在了柱子上的效果。
试想下,如果我们不使用弹性布局会怎么做?我们也许会使用到floats, width: 33.33333% ,position: absolute 和 bottom: 0,我的天啊! Flexbox让整个界面变得如此整洁有条理,写码简直爽翻了.
做这个游戏,最重要的事情是让画面变得可缩放。看下这款游戏在不同尺寸的屏幕上达到了完美的效果!如同我说的,我仅仅是使用了 CSS transform, 这样做具有它独特的挑战性。假如游戏的默认大小是 1200x800px.吗,如果你的屏幕大小和这个不一样的话,你需要通过调节系数让游戏的容器变得大一些或者小一些,也就是做个计算"screenHeight/800\".当然,如果设备的高度大于宽度的时候(当我们的平板或者手机处于垂直模式的时候)我们也需要相应地缩放我们的屏幕,下面是计算缩放比例的代码 :
var scale = (screenWidth > screenHeight) ? screenHeight/800 : screenWidth/1200;
显然仅仅是这样做不能让视觉体验变得完美,所以我们需要在缩小我们的游戏界面的同时让它垂直水平居中。
因此,我们需要让整个游戏的容器以相同的尺寸放大,这样当缩放界面的时候,容器可以100%的占据屏幕的尺寸。如果我们将界面缩小到原始尺寸的一半的时候,我们需要让它的容器放大到原来的两倍大小,这样容器便可以充满整个屏幕。相反如果屏幕很大的时候,我们需要将界面变为原来的1.2倍,那么容器将相应的从原始尺寸缩小到 screenSize/1.2
$('.container')
.css('transform', 'scale(' + this.scale + ')')
.css('height', height/this.scale)
.css('width', width/this.scale)
.css('transformOrigin', 'left top');
我希望你能喜欢这个游戏和我写的这篇文章,我也希望通过这篇文章,你可以收获一些新的东西并作出十分精彩的作品
原文链接: codepen.io
随着浏览器功能越来越强大,在网页端实现各种小游戏已经是家常便饭。微信小游戏出现后,游戏(特别是小型游戏)的开发已经进入了一个相当火爆的时期。那么作为一个普通的前端开发者,如何取选择一个合适的游戏开发框架来学习和提高开发效率呢?
看这篇博客,默认你已经知道了3D模型实现三维空间内旋转的实现方式(矩阵、欧拉角、四元数)。ok,下面正式切入主题,房门的打开和关闭,先上图:
需要用到html、css、javascript 和 DOM 这些知识点就可以了。主要是js,其他只是一些基本的知识。js貌似也不是很难。但是问题就在这里,即使知识点都会了,但是还是无法综合运用把东西做出来
贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋,从而使得蛇变得越来越长。下面使用js来实现贪吃蛇的游戏
《俄罗斯方块》的基本规则是移动、旋转和摆放游戏自动输出的各种方块,使之排列成完整的一行或多行并且消除得分。 下面使用js来实现俄罗斯方块
当时初学游戏开发,经验浅薄,所以没有好好专研游戏里的算法和代码的缺陷,导致游戏出现了很多bug,甚至拼图打乱后很可能无法复原。最近经常有朋友问起这个游戏,希望我能把代码里的bug改一下方便初学者学习
如果您是游戏开发人员,并且正在寻找JavaScript和HTML5无缝协作的游戏引擎。 虽然市场上有很多免费和付费的游戏引擎,但一款让专业游戏开发者满意的游戏引擎,必须包含独特的东西
创建JavaScript贪吃蛇游戏需要使用 HTML 制作结构,使用 CSS 制作样式,使用 JavaScript 制作游戏逻辑。下面是一个简单的贪吃蛇游戏示例:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!