测手速软件APMShow开发——佟年送给韩商言的礼物

  Electron开发   追剧写代码啧啧啧   

前言

  最近看了一部剧,可以说是很甜了……   傻白甜女主角佟年99年计算机专业研二(ε=(´ο`*)))唉,其实人家肤白貌美智商高碾压众人让人悲伤   (ACM亚军呜呜呜呜呜…)   还可爱!

  男主韩商言本来设定是顶级电竞选手,后来改成了CTF比赛顶级选手。虽然改的很生硬,但也算是成功科普了CTF。(还是得吐槽,打CTF的人怎么可能不知道计算机专业的东西……)

二次元韩商言

CTF(Capture The Flag),夺旗赛。CTF是一种流行的信息安全竞赛形式,其英文名可直译为“夺得Flag”,也可意译为“夺旗赛”。其大致流程是,参赛团队之间通过进行攻防对抗、程序分析等形式,率先从主办方给出的比赛环境中得到一串具有一定格式的字符串或其他内容,并将其提交给主办方,从而夺得分数。为了方便称呼,我们把这样的内容称之为“Flag”。

  这是多么酷炫的比赛啊。剧里所有的家长们却都嫌弃男主不务正业天天玩电脑???

  写的一手好代码的佟年,送给Gun神的第一件礼物竟然是——   熬夜写了一个晚上的测手速的软件……   ?   散发着工科硬核味道的礼物还真是可爱一言难尽哦

  不禁使我想起了本科毕业时,本来我也为朋友们准备了毕业礼物的。当时兴致勃勃打算给朋友们每人写一个app……   然而由于时间都在工作上,~~加上当时开发速度太慢了,~~后来拖久了感觉失去了毕业礼物的时效性,就不了了之了……

  那么,我要说的是什么   ……   我要说,这个测手速的软件呢,佟年提到的时候我觉得应该挺简单的,所以我也做了一个,顺便把kk俱乐部里原来那种听音测试也加了进去,娱乐一下哈哈哈哈

总览

  框架:Electron

  语言:Html、CSS、JS

Electron开发

安装与配置

  新建app文件夹。   初始化npm init   安装Electronnpm install electron --save-dev

开发

  Electron安好了   再就HTML CSS JS慢慢写呗

打包

npm install electron-packager -g

  package.json添加:

1
        "package": "electron-packager . APMShow --platform=win32 --arch=x64 --out=./out --asar --app-version=0.0.1 --electron-version=5.0.7 --overwrite --ignore=node_modules"

  执行npm run package打包。

Electron小笔记

开启调试工具

1
   win.webContents.openDevTools()

锁定窗口大小

1
2
3
4
5
6
7
8
 win = new BrowserWindow({
        width: 650,
        height: 990,
        resizable: false,
        webPreferences: {
            nodeIntegration: true
        }
    })

  resizable: false是重点。

效果

首页 限时测速 倒计时 听音测速 色变测速 成绩

  再加个排行榜?

软件下载

  点开文件夹里的exe程序直接运行即可。(也许哪天想给它加个安装程序也未可知…)   链接:https://pan.baidu.com/s/1MfuyH7QAHjZT311888t4Og   提取码:vbz9

代码

  https://github.com/hubojing/APMShow

后语

  纯属娱乐~~

  听说最近韩商言要分手,要不佟年看看可怜的吴白吧…… 表情包

Licensed under CC BY-NC-SA 4.0
使用 Hugo 构建
主题 StackJimmy 设计