今天给大家介绍一下金山打字通中的生死时速游戏如何开启的具体操作步骤。
1.首先打开电脑，进入桌面，找到金山打字通客户端，双击打开，在主页面底部就可以看到“打字游戏”选项。
2.点击进入“打字游戏”页面，在页面下的经典打字游戏就可以看到“生死时速”游戏了。
3.点击“生死时速”，就会弹出安装向导的窗口，若我们之前安装了就不会弹出了。
4.然后按照向导提示，完成安装。
5.安装之后，就进入到生死时速游戏页面了。
6.在页面上选择“单人游戏”或“多人游戏”，然后点击页面下的开始，就可以进行游戏了。
以上就是金山打字通中的生死时速游戏如何开启的具体操作步骤。
视频介绍
CSS 中有这样一个模块：Motion Path 运动模块，它可以使元素按照自定义的路径进行移动。
本文将为你讲解这个模块属性的使用，并且利用它实现我小时候电脑课经常玩的一个打字游戏：金山打字的《生死时速》。
css中有这样一个模块：Motion Path ，它可以实现元素按不规则路径移动。
Motion Path模块包含offset的一系列属性，包括以下几个：
offset-path：设置元素运动路径；offset-distance：控制当前元素基于 offset-path 运动的距离；offset-anchor：定义元素在路径上移动时的锚点。
简单来说就是，运动元素可能不是一个点，那么就需要指定元素中的哪个点附着在路径上进行运动offset-position：指定运动的初始位置；offset-rotate：定义沿 offset-path 运动路径移动时元素的朝向；
offset-path 属性可以取以下几个值来设置元素的运动路径：
ray()函数：ray([<angle> && <size> && contain?])，设置以射线状路线偏移；url()函数：用id选择器绑定页面内联SVG元素中任意图形元素的路径；<basic-shape>：一些css的基本形状函数，例如：circle(), ellipse(), inset(), path(), polygon(), rect()等，对于可以设置position位置的circle(), ellipse()，如果没有设置position的话，就会应用offset-position的值；box-edge：设置以相对的父元素的边缘为运动路径，例如设置content-box、border-box、fill-box等，可以设置按内容区的边缘还是边框边缘等；
看下面例子就懂了：
下面代码中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(&39;, function (event) {
const myinput = answer.textContent
if (event.key === words[myinput.length]) {
timer && clearTimeout(timer)
answer.textContent = myinput + event.key
thief.style.setProperty(&39;, &39;);
document.querySelector(&39;).scrollIntoView(true)
timer = setTimeout(() => {
thief.style.setProperty(&39;, &39;);
}, 400);
}
});
setTimeout(() => {
checkCollision()
police.style[&39;] = &39;
}, 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(&39;).style.display = &39;
} else {
document.querySelector(&39;).textContent =
`你被逮捕了！${document.querySelector(&34;).textContent}`
document.querySelector(&39;).style.display = &39;
}
}学如逆水行舟，不进则退～
复制本文链接攻略资讯文章为拓城游所有，未经允许不得转载。
