java程序里繁体字显示为方块_网页 俄罗斯方块

0de023bc79e294dba606456309427bf8.png

游戏地址:

俄罗斯方块 | Tetris​zhangxiaoleiwk.gitee.io

9da24159f8df84536406d3bc239b6890.png
看着眼熟?没错,UI 模仿了tetr.js,但代码是自己写的。

只支持电脑端,不知道键位可以点击设置查看。

游戏用纯 JavaScript、HTML、CSS 实现,图形用 canvas。

支持 SRS、DAS、ARR。

有一个设置面板,可以修改键位以及相关参数。

有一个本地的排行榜,可以记录自己的最好的十次战绩。

farter 在游戏细节上给予许多指导,但受限于作者自身技术水平,以及对游戏的理解,许多地方做的并不好。

作者并非码农,代码以能实现功能为主,比较随意。

后记:

虽然游戏的功能简单,但是玩了有一段时间,感觉稳定性不错,在 Edge chromium 浏览器上表现很好。

分辨率

每次调整屏幕分辨率,所有图形都会进行重绘,游戏在全屏模式下体验最好,为此,我还专门做了一个全屏的按钮。

过度动画

游戏有个我特别喜欢的特性,就是下落动画,看起来很简单,实现起来还是费了一番功夫。能实现这个,是因为游戏本身采用了双 canvas 设计。就像 Ps 的图层一样,背景和移动方块、阴影是分开的,这样不用每次更新图形重绘整个区域。这个设计是借鉴 tetr.js 的,但是它是采用三个图层,我看它 dom 的名字,应该是把 背景、移动方块、阴影全部分离。我在设计的时候做了一些简化,只做两个图层,这为消行动画的实现打下了基础。

消行动画是采用上下图层遮挡实现的,大致原理是,每次消行的时候,把背景图层消除部分以上的图形区域一帧一帧的绘制到前面图层,每一帧都移动一个距离,这样就达到一个动画效果。我最满意的地方是,在应对隔行消除的时候,它会依次从下往上显示过度动画,这样就达到一个很自然下落的过程,这个算法的实现我很喜欢。虽然从玩的角度,这个功能是拖累体验的,但是我实在喜欢这个实现。

更离谱的是,因为图形刷新采用 requestanimationframe 这个 API,根据官方的介绍,我不太确定这个API执行和屏幕刷新之间的确切关系,比如 144 hz的屏幕,这个 API 会以 1000 / 144的毫秒的间隔刷新吗?之所以在乎这个,是因为我把图形动画的移动计算也放在这个 API 里了。如果刷新的速度不一致,则意味着图形动画的移动速度不一致,因为动画帧数帧数分配是移动距离除以帧率,虽然多数电脑似乎都是 60hz,但是如果有 144hz呢,这个API的频率是多少呢?所以我搞了一个特别奇葩的设计,就是玩家第一次点开游戏的第一秒种里,程序会计算玩家电脑这个 API 的刷新率,然后和键位设置游戏数据等保存在本地。说了这么多,这其实是个很简单的东西。

在 Edge chromium 下,动画看着不错,但在最新的 Firefox 下,表现明显不如前者流畅。

SRS 旋转系统

我在中文网上几乎没有看到有关 SRS 的详细介绍,这里我说一说我所实现的 SRS。

所谓 SRS,就是方块的旋转系统。最开始我不懂 SRS,所以一直搞不懂 farter 说的方块钻来钻去。后来过了一年多,无意中在 B 站看到的一个介绍 SRS 的视频,突然明白了,这也是我在一年后又去完善游戏的原因。

流程大致是这样:方块预旋转完成,检测是否发生碰撞,如果没有发生碰撞,则旋转完成;如果发生碰撞,则开始进行所谓踢墙。把预旋转的方块和数组里面的数据依次计算,就是加、减X, Y轴。比如 [-1, 0] 就是把方块向左移动一格,以次类推就可以理解。一个数组有四个数据,依次尝试,尝试成功则旋转成功,四个尝试全部失败,则把用来保存上一个状态的方块的数据替换掉现在的状态,这意味啥也没变。

所谓旋转方块是说,一般程序会用两个数组保存移动的方块。比如你要移动方块,可以先移动一个数组的数据(作为预旋转),如果移动成功,则把数据复制到另一个数组(后一个状态),如果失败(比如移动的墙里去了,判定冲突),则把后一个状态的数组复制过来,就是啥也没动。程序绘制图形的时候,只需要绘制后一个状态的数组。

每个数组前面的类似 '0R' 的数据,是表示这个数据是用在某一个状态的,所以程序自身应该记录方块的状态,以匹配应该使用哪个数据。具体的内容可以看图片里的网址,虽然是英文的,但教程里的图片解释的很清楚。

2985516ab51cdbb2536fc4a163208ba9.png

更新:2020-7-13

  1. 做了一个消除方块的过度动画,虽然没有什么用,但是觉得这样的实现非常有意思。尤其是在应对隔行消除方块的时候,可以模仿自然的下落过程,感觉很有趣。
  2. 每次移动或者旋转,都会重置延时锁定的计时。
  3. 锁定或得分时有音效效果。
  4. 视觉效果以及一些计算细节的改进。

更新:2020-5-11

  1. 方块绘制改为提前绘制,浏览器尺寸变化,方块会进行重绘,以适应屏幕分辨率。
  2. 图形用两层 canvas 实现,一层为死方块,一层为移动的方块和阴影。避免每一帧的绘制都需要重绘整个图形。
  3. 候选方块由一个增加到六个。
  4. 设置面板做了一些补充,修改 DAS ARR 时,把以前的直接输入时间改为 1 ~ 10 的等级调整,感觉毫秒这个时间单位不容易感知。

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

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

相关文章

oracle 日期6,EF 6与Oracle - 如何加入日期字段?

我正在使用EF 6与Oracle,我正在尝试使用员工编号和日期字段进行多列连接。我无法让LEFT OUTER JOIN正常工作,我很确定这是因为日期。我知道Oracle中的日期可能会非常棘手,我通常必须使用“TO_DATE”函数去掉HH:mm:ss&a…

windows分辨率修改工具_Windows 字体优化,这几个办法能帮你解决

如何改善 Windows 的字体渲染是一个亘古不变的话题,长期以来大家都有这样的一个印象:Windows 上面的字体渲染相比 macOS 没有那么细腻清晰。实际上,也确实是这个样子,由于 Windows 世界中参差不齐的硬件和向前兼容的「历史包袱」&…

fc安卓模拟器_RA替代计划(上)—3DS的全能模拟器太难用?推荐几个替代品给你...

玩模拟器的各位同好几乎没有没听过“全能模拟器”(中文译名,英文叫做Retroarch,简称RA,官网www.retroarch.com)的大名的,它的优点可以用一个字来概括,就是“全”。全能模拟器就是“全”第一,全模拟器支持。…

linux 命令 记忆方法,linux 记忆命令心得

新开始学linux,要记住很多的命令,毕竟这是linux的根本,没有这些命令,连操作都没办法进行。所以我写这个的目的是我自己记忆,也是想帮助一下一同学习linux的同学们,提供自己记忆这些的方法,抛砖引…

.net pdf转图片_图片转PDF怎么转?推荐两种图片转PDF方法

在我们的工作和学习中,我们有时候需要将图片转换为PDF格式的文件。因为PDF格式的文件查看起来很不容易,所以它可以确保图片文件中的信息不被泄露。那么图片转PDF怎么转呢?大家可以参考下面这两种方法,一起来看看到底是怎么转换的吧…

vue axios 发送get请求传递参数给后端失败_Java之Vue插件之Axios

Java之Vue插件之Axios,环境安装:npm install --save axios vue-axios //安装axiosNpm install //安装依赖在main.js中注册import axios from axiosimport VueAxios from vue-axiosVue.use(VueAxios, axios)在对应组件的方法中,发送axios请求&…

linux c 服务程序,Linux C 后台服务程序单进程控制

介绍通常后台服务器程序都必须有且只有一个进程,那么如何单进程呢?本例子是通过flock函数对/var/run/myserver.pid记录pid文件的进行加锁若加锁不正常,说明后台服务进程已经在运行了,这时则直接报错退出若加锁成功,说明…

索尼录音笔怎么导出录音内容_录音笔十大品牌名单出炉!录音笔十大品牌排名榜单揭晓!...

录音笔给我们高速发展的生活带来了很大的便利,市场上录音笔品牌繁多,很多数码视听品牌都推出了自己的录音笔产品,那么我们在选购的录音笔的时候如何选择好品牌的录音笔呢?下面一起来看看十款好用的品牌录音笔排行,希望…

快速列出所有字段_快速掌握目标课题的研究现状 | 应用实例

Graphical Abstract摘要本文旨在利用文献分析工具“Bibliometrix”及其交互界面“Biblioshiny”,基于文献数据库的检索结果,快速获取目标课题的关键信息。相较于传统人为反复阅读的方法,该方法可高效实现以下重要功能:拓展和获取更…

linux 引导程序修复工具,linux 引导修复工具

如果你有Windows 系统安装盘/ 启动盘,或者安装了DOS 工具,可以从Windows 进入纯DOS 界面的话,那么可以分别用 fixmbr 命令生成正确的引导文件boot.ini ,和使用 fdisk /mbr 命令修复MBR 。详细请看windows xp 双系统卸载linux ubun…

驱动程序和应用程序之间的体系结构不匹配_修复Win10上的黑屏问题全攻略,并不高深,一看就会...

在Windows 10上,你可能会遇到的最烦人的问题之一是黑屏,因为你不会在屏幕上看到错误代码或消息以获取有关从何处开始进行疑难解答的提示。黑屏的发生可能有多种原因。它可能与最近的显卡驱动程序更新有关,或者可能在包含兼容性问题的功能更新…

常用各种芯片手册大全_【汇总】超全面!国内芯片60个细分领域知名代表企业...

国内芯片60个细分领域知名代表企业↓↓↓↓↓↓文章来源:ittbank软文广告与加入群互动交流群的朋友,请加小编微信交流加入微信交流的朋友,请备注:公司名字(公司简称)名字行业方便小编按行业区分邀请进群,术有专攻请自觉…

linux 创建路径函数,Linux函数库的创建方法(2)

2. 静态库的创建与使用静态库本质就是一组 .o 组成的压缩文件,扩展名为 .a / .lib代码如下:ar -crv libXXX.a mmmm.o nnnn.oXXX 是库名,mmmm.o nnnn.o 是要打包的目标文件。crv 参数,含义分别是c: do not warn if the …

文件被后台程序占用无法删除_win10重装后系统占用50G?只要做好这2步,运行比win7还快...

大家都清楚系统C盘是电脑的"生命",一旦C盘出现"爆红",那你离电脑死机也就不远了。如果你还无法体会到这种感觉,那你可以想象打开一个word文档都要看到鼠标在转圈,随即黑屏,啥都动不了的那种生无可…

plsql执行command命令控制台出现乱码_展现“管理员”的神级能力,有趣又实用的我的世界基础命令...

在上一篇文章《Minecraft基岩版(手机版、便携版、PE版)开服指南》中,我们介绍了《我的世界》基岩版的开服方法。然后这篇文章,就为那些了解更多细节的玩家,介绍一下常见的管理员命令。另外,由于《我的世界》有多个版本(JAVA版、基…

一键 linux桌面安装vnc,Ubuntu 16.04 LTS一键安装VNC

Ubuntu 16.04 LTS 安装VNC,在搜索上找了很多教程,不是太老,就是说的驴唇不对马嘴,所以忍不住写一些以正视听。Ubuntu 16.04 LTS是最近出的LTS版本系统,估计未来也会有长期的使用频率,配置好远程桌面&#x…

新一代人工智能发展规划_助力人工智能创新发展,新华三任合肥市新一代人工智能产业发展联盟理事单位...

近日,合肥市新一代人工智能产业发展联盟正式成立。合肥市委常委、常务副市长罗云峰出席成立大会并讲话,联盟相关指导单位领导、理事单位成员代表等参加会议。会上,紫光旗下新华三集团下属新华三信息安全技术有限公司副总裁王冬作为理事单位代…

sqlserver 查询中文查询不到 查询英文可以查到_估值数据和财报数据查询方法

为了让更多的读者朋友学会自己查阅估值数据和财报数据,根据自己查到的资料进行独立思考,帮助投资,二师父搜集整理了估值数据和财报数据的查询网站,并教给大家如何通过这些网站查阅到的数据来做投资决定。估值数据查询网站&#xf…

linux内核参数的程序,技巧-Linux内核参数调整办法

ulimit设置ulimit -n 要调整为100000甚至更大。 命令行下执行 ulimit -n 100000即可修改。如果不能修改,需要设置 /etc/security/limits.conf,加入* soft nofile 262140* hard nofile 262140root soft nofile 262140root hard nofile 262140* soft core …

java面试换背景颜色_实习|渣二本Java菜鸡0 Offer的春招血泪史,一定要主动去找实习呀!

作者:codingCoge链接:https://www.nowcoder.com/discuss/177823来源:牛客网前言:一个菜鸡的春招血泪史,共勉到现在还是0offer先玄学求一波Offer2019.3.27更新:三月快结束了,对我来说春招也基本落幕了.虽然好多大厂4月才开始招聘,不过我已经不…