Giter VIP home page Giter VIP logo

find-keke's Introduction

find-keke

寻找唐可可:https://zrtech.org/find-keke/

寻找唐可可(调试用):https://zrtech.org/find-keke/debug

  • (短网址:zrtech.org/tkk_debug
  • 后者跟前者唯一的不同是无论点哪个都能赢。设计这个一开始是为了测试网速的影响(有人反映图片加载慢导致他的计时不准),但是现在由于可以在不刷新页面的情况下开始一局新的游戏,所以这个的作用也就没有那么大了。

计分板和最高纪录(二代目,最新):#10

计分板和最高纪录(一代目):#11

计分板全量数据库搜索:https://zrtech.org/find-keke/scoreboard

添加角色

欢迎给本游戏添加角色!

只需要经过以下简单的几步:

  1. 准备一张与游戏棋盘中的图片除了角色之外内容完全一致的图片。

    1. 确保其分辨率为75×75。(你可以使用这个网站对图片进行裁剪。)(另外,如果要进行更复杂的编辑,也可以试试这个网站,它相当于一个在线的Photoshop。)
    2. 确保图片和原有图片对齐(可以通过在浏览器的两个标签页中打开两张图片并来回切换以确定图片是否对齐)。
    3. 将文件的基本名(文件名由基本名和扩展名两部分组成)设置为角色的名(即,不包括姓)的罗马字写法,具体拼写请与script-in-head.js中的placeholder.en数组中的拼写保持一致。
      • 示例:keke.jpgkotori.jpgyou.jpg
  2. script-in-body.js的数组images中追加一个元素,按照格式填入图片的文件名和角色的中文名、日文名和日文名的罗马字写法(为了避免格式错误,可以先复制一个已有的元素然后再修改)。

    • 示例:
      let images = [
          {
              filename: "kotori.jpg",
              name: {
                  zh: "南小鸟",
                  ja: "南ことり",
                  en: "Minami Kotori"
              }
          },
          {
              filename: "you.jpg",
              name: {
                  zh: "渡边曜",
                  ja: "渡辺曜",
                  en: "Watanabe You"
              }
          },
      ];
  3. 测试一下,没有问题的话就可以给本仓库发起拉取请求了!

关于许可的补充说明

本仓库的许可文件仅作用于除图片和视频文件以外的文件。

在本页中寻找唐可可

是不是藏在这里呢…… 被你发现啦!

keke-big.jpg

find-keke's People

Contributors

dependabot[bot] avatar ericzhang615 avatar negative-3u avatar plazum avatar unowen-owo avatar yude avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

find-keke's Issues

Using animated WebP instead of GIF

In this project, two GIF pictures seriously affect the loading speed (two pictures account for 97.3% of the total size of the project). Therefore, it is very necessary to optimize the size of these two files.

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP requires fewer bytes than GIF. This is especially important on mobile networks. [1]
Meanwhile, the front-end compatibility of webp is enough to meet the requirements at present. Lossy WebP images are supported in Android 4.0 (API level 14) and higher, and lossless and transparent WebP images are supported in Android 4.3 (API level 18) and higher[2]. The WebP browser compatibility is as follows[3]:

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Animation 32 18 65 no 19 (Blink) 14

Thus, I chose to use webp format instead of GIF file to reduce the file size.


The tool I use is ffmpeg 4.4 (encoder: Lavc58.134.100 libwebp_anim). In the transcoding process, I am mainly concerned about two parameters: compression_level and qscale. First, a series of tests are carried out on compression_level:

>ffmpeg -i bubu.gif -c:v webp -compression_level 0 bubu_c0.webp

compression_level file size / kB
(Original GIF file) 9845
0 2321
1 2005
2 1767
3 1694
4 (default) 1696
5 1489
6 1435

For me, when the compression level is 5, the file size is relatively small, while the transcoding time is acceptable.


Further, I empirically take qscale as 60 to get a better file size (the default value is 75).
>ffmpeg -i bubu.gif -c:v webp -compression_level 5 -q:v 60 bubu_c5_q60.webp

qscale file size / kB
75 (default) 1489
60 1100

The total size of the final animated images is 1.28Mb, which reduces the file size by 88% compared with the original 10.9Mb, greatly accelerating the loading of web pages.

webp_images.zip

ceeb653ely8gqwwwzod83g208706oe2g

计分板一代目(补档)

跳转至最新计分板跳转至最新记录

分数能够提交的标准是等效用时小于或等于3秒,即 ${\Large\frac{用时}{行数\cdot列数}\le\frac{3}{14\cdot10}}$
计分板更新状态:更新计分板
(如果你发现提示上传成功但是分数却没有更新在计分板,那么有可能是计分板更新失败(比如更新计分板的程序出了问题或者长度达到限制),也有可能是和另一个上传分数的请求凑得太近而被取消了。对于前一种情况,我会手动重新添加记录;对于后一种情况,它们会被定期检查并重新运行以重新添加记录。)
计分板数据搜索:https://zrtech.org/find-keke/scoreboard
计分板二代目:#10

计分板

跳转至最新计分板跳转至最新记录

分数能够提交的标准是等效用时小于或等于3秒,即 ${\Large\frac{用时}{行数\cdot列数}\le\frac{3}{14\cdot10}}$
计分板更新状态:更新计分板
(如果你发现提示上传成功但是分数却没有更新在计分板,那么有可能是计分板更新失败(比如更新计分板的程序出了问题或者长度达到限制),也有可能是和另一个上传分数的请求凑得太近而被取消了。对于前一种情况,我会手动重新添加记录;对于后一种情况,它们会被定期检查并重新运行以重新添加记录。)
计分板数据搜索:https://zrtech.org/find-keke/scoreboard

计分板二代目

跳转至最新计分板跳转至最新记录

分数能够提交的标准是等效用时小于或等于3秒,即 ${\Large\frac{用时}{行数\cdot列数}\le\frac{3}{14\cdot10}}$
计分板更新状态:更新计分板
(如果你发现提示上传成功但是分数却没有更新在计分板,那么有可能是计分板更新失败(比如更新计分板的程序出了问题或者长度达到限制),也有可能是和另一个上传分数的请求凑得太近而被取消了。对于前一种情况,我会手动重新添加记录;对于后一种情况,它们会被定期检查并重新运行以重新添加记录。)
计分板数据搜索:https://zrtech.org/find-keke/scoreboard
计分板一代目:#11

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.