整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
腾讯游戏盒子是由腾讯自主研发的一款专为网页游戏用户定制的网页游戏辅助工具，具有智能加速、防掉线、帐号多开、全屏等特点。
腾讯游戏盒子官网页面也非常简单明了，这也是目前很多简单介绍型网站所采用的风格。页面下半部分的圆形图标使用了 CSS3 transform 旋转属性，当鼠标移动到上面时会顺时针旋转 20 度，但 IE6 – IE9 不支持该属性，所以没有效果。
演示地址：
https://www.361zy.com/demo/379/
下载地址：
https://cloud.06dn.com/s/qR9SW
解压码：
LSr69TPA
源：众成翻译 译者：betsey
游戏的灵感
在使用过一段时间的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
使用GreenSock制作动画
我下面假设你熟悉GSAP用法,但如果你不熟悉的话，你可以看下这个“讨厌番茄”的人的关于GSAP的教程。https://ihatetomatoes.net/get-greensock-101/
背景动画
几乎所有你能在背景上看到的东西都是用SVG制作的。每个波浪是一个独立的<div>,每一层的山峰也是一个<div>,甚至云也是<div>。当你在制作一个复杂的动画时，有一点是需要注意的。你完全可以使用一整个SVG当做背景，然后为这个SVG的子元素和路径来制作动画。Greensock允许我们这样做，你需要做的仅仅是为这些SVG的元素（比如说path，group等等）分配一些ID，然后用过ID选择到他们。但这样做的问题在于，在移动设备上，这些动画跑不动。所以你最好是把这些背景元素放在独立的<div>里面，然后为这些<div>添加动画，我实际上就是使用这些SVG的作为背景。
通过类似于上面的代码，我们就得到了一些简单的补间动画。这些动画可以将背景水平地移动54个像素（也就是背景的宽度），在这里我们想要背景匀速地移动，所以我们不需要缓动动画。当我们为每个背景设置不同的移动速度的时候，他们就有表现出了视觉差的效果，看上去很酷吧！
看到画面上漂浮着一些白色的小圆点了没？我创造了这些圆点并为他们设置了随机的位置和尺寸，接着我让他们做圆周运动。
这样他们就缓慢地进行圆周运动，但看上去却像随机运动一样。
柱子动画
每一个柱子里都有一些会动的小元素，这些小元素仅仅是由HTML和CSS制作出来的。使用SASS可以节省很多时间和代码量（通常情况下是这样的）。我通过创建形状的mixins来为这些柱子里面的小东西添加效果。如果我们看下bublble这个效果的代码，我们就会发现每个圆圈都使用了绝对定位并使用到了这个mixin。在CSS中创造三角形需要很多的代码，所以mixin就派上了大用场。
让我们看看红色的柱子，柱子里面包含着很多的气泡：
所以现在，如果想要在柱子里面创造一些气泡的话，我只需要调用这些mixin，设置气泡的大小，然后让把他们放在柱子的特定的位置上就好了：
当你需要通过边框来制作一些小的三角形的时候，你需要用大概20行的css代码来生成，所以使用mixin实在是太有必要了。
气泡的动画
我使用交错动画来做这个效果。这个动画可以操控柱子里面所有的气泡元素，并且可以让每个气泡有一个小小的延时，让他们不会同时开始运动。点击这个链接，你可以了解更多的关于交错动画的知识:http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/
三角形的动画
在黄色的柱子里面，我使用到了旋转的效果。但是你可能注意到，有些旋转是围绕着X轴的，有些是围绕着Y轴进行运动的。我们在这里使用到了 cycle属性。
方块的动画
在制作方块的动画的时候，我们也使用到了相同的技术。因此，有一半的方块是从左向右移动的，而另外一般则做反方向的运动。
分数的动画
让我们点击重新开始，再看下这个动画吧.
我想要分数的动画有一种“Q弹”的感觉，于是我就写了几行代码来形成这个效果。
为了做出这种“触电”（或者说是“Q弹”）的效果，我们需要制作正确的缓动动画。如果你想要看看你可以使用什么样的缓动方程，看下 Greensock 缓动观察器:http://greensock.com/ease-visualizer 选择 Elastic 并调整配置参数，你就可以实时地看运动效果。
弹性盒子
这款游戏的第一个创新性就是使用了“弹性盒子”，如果要是不了解弹性盒子的话，你可以阅读下这篇优秀的文章： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 或者看下 Laracasts上的相关系列。一旦你开始使用了弹性盒子，你就再也离不开它。下面我们看下我的的主菜单界面和游戏界面吧。
开始游戏的容器CSS样式如下：
“flex-direction: column”表示在容器内部弹性元素的排列方向。 设置为Column，则元素从上到下依次排列。而默认的（row）则将元素从左到右排列。弹性盒子可以这只空白区域，我们可以设定我们是在元素的前面、后面或者周围放置这些空白区域。动手试下，感受下弹性盒子是多么好玩吧！因为我们设置成了“space-between”，所以 Top 被放在了顶部， How to Play被放在了底部，而Logo Holder则放在了中间，空白区域被填充在了这些元素之间。 Align-items: center, 定于交叉轴（这个游戏中代表水平轴）上元素的对齐方式，center表示居中对齐。其中 How to Play也是一个弹性盒子，它的代码如下:
它也是一个flex元素，我们如果去设定他的flex-direction, 它将使用默认值（row），将其中的三个弹性元素水平的排列。第一个和第三个元素的“flex”参数为1，因此他们将占据所有的空白空间，flex是一个相当高端的特性。同样的，你也可以通过在How to Play上设置 justify-content: space-around来达到同样的目的.我使用flex: 1 的原因是，我想让中间的一列排在屏幕的最中央。
下面我们看下游戏界面。这个界面也是一个弹性布局。界面有一个柱子容器和一个球的容器。我不想让球是绝对定位的，因为我通过css让球刚好坐在柱子上，这样即使我改变柱子的高度，我也不需要改动其他代码就可以让球恰好落到柱子上。因此我将容器的flex-direction设置为 column,正如我所愿，球容器刚好紧挨着柱子的顶部。justify-content: space-between让球的容器永远靠着屏幕的顶部，而柱子容器永远靠着屏幕的底部。 现在我们给球的容器如下的样式:
球的容器也是弹性布局，我们将flex方向设为column（这样Y轴成为了主轴，元素从上到下排列）。之后我们通过 justify-content: flex-end将球推到了容器的底部，因此，我们便得到了两个紧密排列的容器，并且第一个容器的内部元素被推到了该容器的最下面，这样我们便做到了让球坐在了柱子上的效果。
试想下，如果我们不使用弹性布局会怎么做？我们也许会使用到floats, width: 33.33333% ，position: absolute 和 bottom: 0，我的天啊！ Flexbox让整个界面变得如此整洁有条理，写码简直爽翻了.
让游戏界面可缩放
做这个游戏，最重要的事情是让画面变得可缩放。看下这款游戏在不同尺寸的屏幕上达到了完美的效果！如同我说的，我仅仅是使用了 CSS transform， 这样做具有它独特的挑战性。假如游戏的默认大小是 1200x800px.吗，如果你的屏幕大小和这个不一样的话，你需要通过调节系数让游戏的容器变得大一些或者小一些，也就是做个计算"screenHeight/800\".当然，如果设备的高度大于宽度的时候（当我们的平板或者手机处于垂直模式的时候）我们也需要相应地缩放我们的屏幕，下面是计算缩放比例的代码 :
显然仅仅是这样做不能让视觉体验变得完美，所以我们需要在缩小我们的游戏界面的同时让它垂直水平居中。
因此，我们需要让整个游戏的容器以相同的尺寸放大，这样当缩放界面的时候，容器可以100%的占据屏幕的尺寸。如果我们将界面缩小到原始尺寸的一半的时候，我们需要让它的容器放大到原来的两倍大小，这样容器便可以充满整个屏幕。相反如果屏幕很大的时候，我们需要将界面变为原来的1.2倍，那么容器将相应的从原始尺寸缩小到 screenSize/1.2
后记
我希望你能喜欢这个游戏和我写的这篇文章，我也希望通过这篇文章，你可以收获一些新的东西并作出十分精彩的作品
我将持续不断地完善我的游戏，并相应地更新文章，增加新的玩法或者尝试些新的技术哦！
本文由众成翻译（zcfy.cc）的译者翻译完成，抢先阅读更多优质英文技术文章，欢迎访问众成翻译。
CSS 中有这样一个模块：Motion Path 运动模块，它可以使元素按照自定义的路径进行移动。本文将为你讲解这个模块属性的使用，并且利用它实现我小时候电脑课经常玩的一个打字游戏：金山打字的《生死时速》。
css中有这样一个模块：Motion Path ，它可以实现元素按不规则路径移动。
Motion Path模块包含 offset 的一系列属性，包括以下几个：
offset-path 属性可以取以下几个值来设置元素的运动路径：
看下面例子就懂了：
下面代码中ray射线运动是设置元素朝70度方向运动200px； 按svg路径运动是让电车以一个五角星的svg的路线运动； shape图形是让电车以polygon()绘制的菱形运动； box是在其父盒子边缘运动；
设置运动的距离，可以是值，也可以是百分比，例如设置0%处于初始位置，100%就是移动到路径的终点。所以一般实现元素按不规则路径移动，就是通过animation修改offset-distance实现的。
设置元素的哪个点沿着路径运动，例如设置offset-anchor: center bottom为元素的底部中心点沿路径移动，其他就不多说了，使用方式和background-position一样。
设置运动的起始位置，只能作用于可以设置position的路线.
例如 ray() 射线运动，可以设置起点位置，或者ellipse()、circle()等这些需要设置position的图形元素。而且如果在定义路径时已经写明了position的话，offset-position是不会生效的，例如circle(50% at 25% 25%)
offset-rotate定义元素沿偏移路径定位时的方向，默认的话是元素角度会一直和运动路径的水平角度保持一致，当然你也可以自定义固定角度，或者反向显示元素（reverse）。
看下面例子就明白了：
游戏开始后，警察在3秒后开始出动，如果警察抓到小偷（位置重合）即游戏失败。 你需要根据页面底部的对话正确输入单词，即可让小偷不断运动，拉开与警察的距离，如果在输入全部对话前没有被警察逮到，即闯关成功。
整个游戏其实实现起来很简单，只需要在设置offset路径动画的基础上加一点点细节就完成了。
找个svg在线编辑网站，设计一个用来当道路等路径path，然后将两个位置重合的元素设置相同的运动路径，即可实现警察和小偷的运动路线。
如何实现警察小偷你追我赶的情景呢？很简单，警察是一直在运动的，只要小偷不要一直运动，两者错开即可。
只需要利用animation-play-state: paused属性控制小偷运动暂停即可，如果你输入正确的字符，则设置为animation-play-state: running继续运动。
如何制作打字控制小偷移动的效果呢？
很简单，监听键盘输入即可，如果输入正确，则将此字符推入答案中，并设置小偷animation-play-state: running让他继续运动，延时一小段时间再设置为paused暂停。 答案和题目重合，并且答案设置为了蓝色，在答案尾部还利用step逐帧动画，方便体现打字的进度。因为输入时，输入空格也需要光标移动，所以一定要在答案元素上设置white-space: pre以保留空白符的所有空白。另外，为了使要输入的字符永远显示出来，我在推入答案时会使光标调用scrollIntoView()方法使其滚动到可视区。
js复制代码document.addEventListener('keydown', function (event) {
const myinput = answer.textContent
if (event.key === words[myinput.length]) {
timer && clearTimeout(timer)
answer.textContent = myinput + event.key
thief.style.setProperty('--paused', 'running');
document.querySelector('.show').scrollIntoView(true)
timer = setTimeout(() => {
thief.style.setProperty('--paused', 'paused');
}, 400);
}
});
setTimeout(() => {
checkCollision()
police.style['animation-play-state'] = 'running'
}, 2000);如果做碰撞检测呢并显示结果呢？
碰撞检测其实很简单，只需要利用getBoundingClientRect()方法获取警察和小偷的定位，判断是否几乎重合即可。判断输赢的方式为：如果你在打完所有文字之前不被逮捕则闯关成功，否则闯关失败。
js复制代码// 碰撞检测
function checkCollision() {
const policeRect = police.getBoundingClientRect()
const thiefRect = thief.getBoundingClientRect()
if (answer.textContent.length >= words.length) {
showResult(true)
return
}
if (Math.abs(policeRect.x - thiefRect.x) < 2 && Math.abs(policeRect.y - thiefRect.y) < 2) {
showResult()
return
}
requestAnimationFrame(checkCollision)
}
// 结局判断
function showResult(flag) {
if (flag) {
document.querySelector('.success').style.display = 'grid'
} else {
document.querySelector('.fail h1').textContent =
`你被逮捕了！${document.querySelector(".timing").textContent}`
document.querySelector('.fail').style.display = 'grid'
}
}学如逆水行舟，不进则退～
作者：前端阿彬 链接：https://juejin.cn/post/7349752708386553910 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
*请认真填写需求信息，我们会在24小时内与您取得联系。
