CSS实现经典打字小游戏《生死时速》

在这里插入图片描述

🌻 前言

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,然后将两个位置重合的元素设置相同的运动路径,即可实现警察和小偷的运动路线。

tutieshi_640x347_4s.gif

3. 实现警察追小偷

  1. 如何实现警察小偷你追我赶的情景呢?很简单,警察是一直在运动的,只要小偷不要一直运动,两者错开即可。

只需要利用animation-play-state: paused属性控制小偷运动暂停即可,如果你输入正确的字符,则设置为animation-play-state: running继续运动。

  1. 如何制作打字控制小偷移动的效果呢?

很简单,监听键盘输入即可,如果输入正确,则将此字符推入答案中,并设置小偷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'}
}

在这里插入图片描述

🎮 玩游戏

《生死时速》游戏地址

更多游戏

🎁最后

学如逆水行舟,不进则退~
我是喜欢归纳总结前端相关知识的前端阿彬,欢迎点赞关注

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/27357.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++中的拷贝构造函数和赋值运算符重载的定义

在C中&#xff0c;拷贝构造函数&#xff08;Copy Constructor&#xff09;和赋值运算符重载&#xff08;Assignment Operator Overloading&#xff09;是两种特殊的成员函数&#xff0c;它们都与对象的复制操作有关&#xff0c;但在上下文和用途上有所不同。 拷贝构造函数&…

ERP、CRM、MRP、PLM、APS、MES、WMS、SRM系统介绍

一、ERP系统 ERP系统&#xff0c;即企业资源计划&#xff08;Enterprise Resource Planning&#xff09;系统&#xff0c;是一种集成管理软件系统&#xff0c;旨在帮助企业实现资源的有效管理和优化。以下是对ERP系统的详细介绍&#xff1a; 1、定义与功能 ERP是企业资源计划…

小白跟做江科大32单片机之定时器

原理部分 1. 计数器每遇到一个上升沿就会计数值1,。 72MHZ72000000 72000000/65536/655360.0167638063430786132812559.652323555555554 (s) 2. 3. 计数时钟每来一个上升沿&#xff0c;计数值1&#xff0c;自动运行。如果计数值与存储在自动重装载寄存器中的值相等&#…

2024年心理学研究、现代化教育与社会发展国际学术会议(PRMESD 2024)

2024年心理学研究、现代化教育与社会发展国际学术会议(PRMESD 2024) 2024 International Conference on Psychological Research, Modern Education and Social Development 会议地点&#xff1a;南京&#xff0c;中国 网址&#xff1a;www.prmesd.com 邮箱: prmesdsub-con…

Python 学习 第二册 第10章 标准库的模块

-----用教授的方法学习 目录 10.1 模块 10.1.1模块就是程序 10.1.2 模块是用来下定义的 10.1.3 让模块可用 10.1.4 包 10.2 探索模块 10.2.1 模块包含什么 10.2.2 使用 help 获取帮助 10.2.3 使用源代码 10.3 标准库&#xff1a;一些深受欢迎的模块 10.3.1 sys 10…

【TensorFlow深度学习】使用TensorBoard可视化模型训练过程与性能指标

使用TensorBoard可视化模型训练过程与性能指标 使用TensorBoard可视化模型训练过程与性能指标&#xff1a;深度洞察模型学习之路安装与环境准备编写模型训练代码并集成TensorBoard日志启动TensorBoard解读TensorBoard可视化结果结语 使用TensorBoard可视化模型训练过程与性能指…

.net core使用EPPlus设置Excel的页眉和页脚

废话不表&#xff0c;直接上干货代码&#xff1a; using (ExcelPackage packagenew ExcelPackage()) {//创建一个表ExcelWorksheet workSheet package.Workbook.Worksheets.Add("表一");//设置页眉左边显示内容workSheet.HeaderFooter.OddHeader.LeftAlignedText&qu…

c# webapi 禁用单个方法(Action)与整个控制器(Controller)

在C#中&#xff0c;如果你想要禁用Web API Controller下的所有方法&#xff0c;你可以通过在Controller上应用特定的Attribute来实现。这里有两种常见的方法来禁用所有Controller的方法&#xff1a; 使用[NonAction]属性&#xff1a;这个属性可以被应用到单个的Action方法上&am…

杨氏矩阵和杨辉三角的空间复杂度较小的解题思路

文章目录 题目1 杨氏矩阵题目2 杨辉三角 题目1 杨氏矩阵 有一个数字矩阵&#xff0c;矩阵的每行从左到右是递增的&#xff0c;矩阵从上到下是递增的&#xff0c;请编写程序在这样的矩阵中查找某个数字是否存在。 要求&#xff1a;时间复杂度小于O(N); 思路: 我们可以通过题目…

Java学习-MyBatis缓存

MyBatis缓存 MyBatis一级缓存 一级缓存是SqlSession级别的&#xff0c;通过同一个SqlSession查询的数据会被缓存&#xff0c;下次查询相同的数据&#xff0c;就会从缓存中直接获取&#xff0c;不会去访问数据库一级缓存失效的四种情况 不同的SqlSession对应不同的一级缓存同一…

谷歌重塑Transformer:无限记忆力,无限长输入,登上Nature

Infini-attention机制为Transformer在具有挑战性的长语境任务中释放出了新的能力&#xff0c;对于调整现有模型以适应长输入也非常实用。 谷歌的最新研究成果Infini-attention机制&#xff08;无限长注意力&#xff09;将内存压缩引入了传统注意力机制&#xff0c;并在单个Tra…

Github 2024-06-15Rust开源项目日报Top10

根据Github Trendings的统计,今日(2024-06-15统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目10TypeScript项目1JavaScript项目1Deno: 现代JavaScript和TypeScript运行时 创建周期:2118 天开发语言:Rust, JavaScript协议类型:M…

重装了mysql,然后安装为服务时,net start 启动一直报错,MySQL服务无法启动的解决

之前写过一篇关于安装mysql的文章&#xff0c;按上面的处理&#xff0c;基本上是可以的。 今天换了下目录&#xff0c;重新安装&#xff0c;一直报错。 然后我们来看一下问题&#xff1a; mysqld -console 这里的目录是有问题的&#xff0c;设置的是&#xff1a;datadird:\to…

个人关于Leecode 49题见解(保姆级)

题目&#xff1a; 49. 字母异位词分组 中等 相关标签 相关企业 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "…

对用户体验的一些思考

任何产品最终的形态&#xff0c;某种意义上来说&#xff0c;成功的标准无非就是以最小的成本&#xff0c;创造出最大的利润&#xff0c;盈利才是最终目的。这也就是说&#xff0c;我们做的产品应该顾及买家的感受&#xff0c;即顾客的感受&#xff0c;这被称为“用户体验”。 用…

React框架资源

React框架资源可以从多个方面获取&#xff0c;包括官方文档、教程、书籍、社区等。以下是一些React框架资源的清晰分点和归纳&#xff1a; 官方文档 新官方文档&#xff1a;React在2023年3月发布了全新的官方文档&#xff0c;位于https://react.dev/​。新文档包含教程、指南…

AI助力密码安全:利用机器学习提升密码安全性

信息安全已经成为了当今数字世界的一个核心问题&#xff0c;随着互联网技术使用场景的不断增加&#xff0c;创建和管理安全的密码已经成为了保证在线账户安全的关键要求。本文将研究和探讨如何利用人工智能&#xff08;AI&#xff09;和机器学习技术来提升密码的安全性。 学习目…

「前端+鸿蒙」鸿蒙应用开发-ArkTS语法说明-自定义组件

ArkTS 是鸿蒙(HarmonyOS)应用开发中的一个现代框架,它允许开发者以 TypeScript 的方式来创建和管理 UI 组件。以下是使用 ArkTS 创建自定义组件的基本语法说明和示例代码。 ArkTS 快速入门 - 语法说明 - 自定义组件 定义组件类 自定义组件通常是通过继承 Component 类来定…

GraphQL(9):Spring Boot集成Graphql简单实例

1 安装插件 我这边使用的是IDEA&#xff0c;需要先按照Graphql插件&#xff0c;步骤如下&#xff1a; &#xff08;1&#xff09;打开插件管理 在IDEA中&#xff0c;打开主菜单&#xff0c;选择 "File" -> "Settings" (或者使用快捷键 Ctrl Alt S …

运算符有哪些?优先级是怎么样的?转换数据类型的方法?(最少4种)

算术运算符&#xff1a; &#xff08;加法&#xff09;-&#xff08;减法&#xff09;*&#xff08;乘法&#xff09;/&#xff08;除法&#xff09;%&#xff08;取模&#xff0c;返回除法的余数&#xff09;&#xff08;自增&#xff09;--&#xff08;自减&#xff09; 赋…