没有合适的资源?快使用搜索试试~ 我知道了~
【JavaScript源代码】五十音小游戏中的前端知识小结.docx
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 65 浏览量
2021-12-29
18:13:18
上传
评论
收藏 26KB DOCX 举报
温馨提示
试读
34页
五十音小游戏中的前端知识小结 背景 在日语学习初期阶段,我发现日语五十音的记忆并不是很容易的,片假名的记忆尤其令人费神。这时我想如果有一个应用可以充分利用碎片时间,在午休或地铁上随时可以练习五十音该多好。于是搜索 App Store,确实有很多五十音学习的小软件,但是商店的软件不是含有内购、夹带广告、就是动辄 40M 以上,没找到一个自己满意的应用。于是打算自己写一个,主要介绍自己在开发设计该应用过程中的一些收获。 实现 在线体验地址 https://dragonir.github.io/kanaApp/ 实现效果如下,该应用主要分为三个页面: 首页:包括菜单选项(平假
资源推荐
资源详情
资源评论
五十音小游戏中的前端知识小结
背景
在日语学习初期阶段,我发现日语五十音的记忆并不
是很容易的,片假名的记忆尤其令人费神。这时我想如果
有一个应用可以充分利用碎片时间,在午休或地铁上随时
可以练习五十音该多好。于是搜索 ,确实有很多
五十音学习的小软件,但是商店的软件不是含有内购、夹
带广告、就是动辄 以上,没找到一个自己满意的应用。
于是打算自己写一个,主要介绍自己在开发设计该应用过
程中的一些收获。
实现
在线体验地址
实现效果如下,该应用主要分为三个页面:
首页:包括菜单选项(平假名练习、片假名练习、混合练
习)、深色模式切换按钮。
答题页:包括剩余机会和分数显示区、中间出题区、底部
答题按钮。
结果页:结果分数显示和返回首页按钮。
答题逻辑规则是从给出的 个答案按钮中选出题目展
示区的那个单词对应正确的那个选项,应用根据点击给出
错对反馈并进行记分,错误 次后游戏结束,加载结果页。
游戏逻辑实现不是本文的主要内容,因此后面不再赘述。
本文后续主要内容是此次小游戏开发流程涉及到的前端知
识的介绍。
深色模式 ⚪⚫
随着 、 、 等系统陆续推出
深色模式,浏览器也开始支持检测系统主题色配置,越来
越多的网页应用都配置了深色模式切换功能。为了优化 !
音小游戏 的视觉体验,我也配置了深色样式,实现效果如
下:
"媒体查询判断深色模式
#$%$&媒体特性用于检测用户是否有将系
统的主题色设置为亮色或者暗色。使用语法如下所示:
'&(#$%$&)%*+,其中 )%有以
下 种值,其中:
%:表示用户系统支持深色模式,并且已设置为浅色主
题(默认值)。
:表示用户系统支持深色模式,并且已设置为深色主
题。
$#:表示用户系统不支持深色模式或无法得知
是否设置为深色模式(已废弃)。
若结果为 $#,无法通过此媒体特性获知宿
主系统是否支持设置主题色,或者用户是否主动将其设置
为无偏好。出于隐私保护等方面的考虑,用户或用户代理
也 可 能 在 一 些 情 况 下 在 浏 览 器 内 部 将 其 设 置 为 $
#。
下面例子中,当系统主题色为深色时 &元素的背
景色为 -......;当系统主题色为浅色时,&元素的背
景色为 -。
'&(#$%$&*+
&+-....../,
,
'&(#$%$&%*+
&+-/,
,
0)判断深色模式
&(* 方 法 返 回 一 个 新 的
!
123对象,表示指定的媒体查询 ($4*字符串
解 析 后 的 结 果 。 返 回 的 123 可 被 用 于 判 定
5&是否匹配媒体查询,或者监控一个 &来
判 定 它 匹 配 了 或 者 停 止 匹 配 了 此 媒 体 查 询 。 其 中
123 对 象 具 有 属 性 & 和 & , 方 法
3和 &)3。
使用 &作为判断媒介,也可以识别系统是否
支持主题色:
# (&(6(#$%$&*6*&
7776%%6*+
浏览器不支持主题色设置
,
# (&(6(#$%$&
*6*&*+
深色模式
,%+
浅色模式
,
剩余33页未读,继续阅读
资源评论
mmoo_python
- 粉丝: 0
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功