申诉网站风险,厂西建设厅网站,宝山顺德网站建设,施工企业财务管理制度及报销流程#x1f33b; 前言
CSS 中有这样一个模块#xff1a;Motion Path 运动模块#xff0c;它可以使元素按照自定义的路径进行移动。本文将为你讲解这个模块属性的使用#xff0c;并且利用它实现我小时候电脑课经常玩的一个打字游戏#xff1a;金山打字的《生死时速》。 前言
CSS 中有这样一个模块Motion Path 运动模块它可以使元素按照自定义的路径进行移动。本文将为你讲解这个模块属性的使用并且利用它实现我小时候电脑课经常玩的一个打字游戏金山打字的《生死时速》。 Motion Path 使用教程
css中有这样一个模块Motion Path 它可以实现元素按不规则路径移动。
Motion Path模块包含 offset 的一系列属性包括以下几个
offset-path设置元素运动路径offset-distance控制当前元素基于 offset-path 运动的距离offset-anchor定义元素在路径上移动时的锚点。 简单来说就是运动元素可能不是一个点那么就需要指定元素中的哪个点附着在路径上进行运动offset-position指定运动的初始位置offset-rotate定义沿 offset-path 运动路径移动时元素的朝向
1. 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是在其父盒子边缘运动 jcode
2. offset-distance
设置运动的距离可以是值也可以是百分比例如设置0%处于初始位置100%就是移动到路径的终点。所以一般实现元素按不规则路径移动就是通过animation修改offset-distance实现的。
jcode
3. offset-anchor
设置元素的哪个点沿着路径运动例如设置offset-anchor: center bottom为元素的底部中心点沿路径移动其他就不多说了使用方式和background-position一样。
jcode
4. offset-position
设置运动的起始位置只能作用于可以设置position的路线.
例如 ray() 射线运动可以设置起点位置或者ellipse()、circle()等这些需要设置position的图形元素。而且如果在定义路径时已经写明了position的话offset-position是不会生效的例如circle(50% at 25% 25%)
5. offset-rotate
offset-rotate定义元素沿偏移路径定位时的方向默认的话是元素角度会一直和运动路径的水平角度保持一致当然你也可以自定义固定角度或者反向显示元素reverse。
看下面例子就明白了
jcode 游戏开发
1. 游戏简介
游戏开始后警察在3秒后开始出动如果警察抓到小偷位置重合即游戏失败。 你需要根据页面底部的对话正确输入单词即可让小偷不断运动拉开与警察的距离如果在输入全部对话前没有被警察逮到即闯关成功。
整个游戏其实实现起来很简单只需要在设置offset路径动画的基础上加一点点细节就完成了。
2. 利用offset属性实现运动路径
找个svg在线编辑网站设计一个用来当道路等路径path然后将两个位置重合的元素设置相同的运动路径即可实现警察和小偷的运动路线。 3. 实现警察追小偷 如何实现警察小偷你追我赶的情景呢很简单警察是一直在运动的只要小偷不要一直运动两者错开即可。 只需要利用animation-play-state: paused属性控制小偷运动暂停即可如果你输入正确的字符则设置为animation-play-state: running继续运动。 如何制作打字控制小偷移动的效果呢 很简单监听键盘输入即可如果输入正确则将此字符推入答案中并设置小偷animation-play-state: running让他继续运动延时一小段时间再设置为paused暂停。 答案和题目重合并且答案设置为了蓝色在答案尾部还利用step逐帧动画方便体现打字的进度。因为输入时输入空格也需要光标移动所以一定要在答案元素上设置white-space: pre以保留空白符的所有空白。另外为了使要输入的字符永远显示出来我在推入答案时会使光标调用scrollIntoView()方法使其滚动到可视区。
document.addEventListener(keydown, function (event) {const myinput answer.textContentif (event.key words[myinput.length]) {timer clearTimeout(timer)answer.textContent myinput event.keythief.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);4. 判断结果 如果做碰撞检测呢并显示结果呢 碰撞检测其实很简单只需要利用getBoundingClientRect()方法获取警察和小偷的定位判断是否几乎重合即可。判断输赢的方式为如果你在打完所有文字之前不被逮捕则闯关成功否则闯关失败。
// 碰撞检测
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}
}玩游戏
《生死时速》游戏地址
更多游戏
最后 学如逆水行舟不进则退 我是喜欢归纳总结前端相关知识的前端阿彬欢迎点赞关注
