用JavaScript搭建射箭比赛淘汰赛训练系统

这次文章不讨论底层,不研究技术,纯粹即兴创作。
背景是这样的,笔者爱好射箭,每天下班回来都会坚持一个小时的训练量,因而笔者在排位赛的成绩在省内不算差,很多比赛排名都能名列前茅。但就是,排位靠前,PK赛缺经常翻船输给排位低的人(这次省赛,笔者作为排位第四输给了排位第三十几的人)。正因如此,笔者特意写了这个系统加入在平时的训练当中,希望可以提高淘汰赛时自己心里素质。转载请注明出处:Michael孟良

比赛规则:

首先进行的是排位赛,有些比赛是72箭有些比赛是60箭,按总分进行排名。
然后就是淘汰赛,这时会按照排位赛的成绩分组PK,比如:比赛只有4人,排位赛后,第一和第四打,第二和第三打。每组每人打三箭,每组赢了计2分,平了计1分,熟了计0分,最先打到6分为之胜出。
我的问题在于,对于一个排位低的人,戒备心明显下降,再加上比赛的紧张气氛,莫名其妙会射失误几箭,进而输掉比赛。

系统介绍:

因为考虑到每次开机就方便直接打开系统,用了亲切近人的页面代码,逻辑代码都在JavaScript上。

《用JavaScript搭建射箭比赛淘汰赛训练系统》 结构

材料:首先下载个倒计时模板和相册模板,还有比赛要用的广播语音(百度广播语音平台,自己输入要的内容):
http://www.17sucai.com/pins/30363.html
http://www.jq-school.com/DownLoad.aspx?id=429
https://developer.baidu.com/vcast

下载完就是改。。。改改改。。。改完后变成:

《用JavaScript搭建射箭比赛淘汰赛训练系统》 首页界面

点击“开始比赛”就会随机对手,又或者找某个对手就直接点击头像进入。

《用JavaScript搭建射箭比赛淘汰赛训练系统》 比赛界面

有十秒准备,十秒后进入60秒倒计时,每个对手三箭,每一箭时间在0~20秒间随机一个数,每箭随机10和9,按“结束比赛”可以提前结束比赛(比赛中时间是充足的,通常所有选手射完箭后,工作人员会统一举手,示意提前结束倒计时)
《用JavaScript搭建射箭比赛淘汰赛训练系统》 比赛结束

比赛结束后可以按“重新比赛”,即返回主页面,还有“继续比赛”,可以和当前这个人继续比赛,因为淘汰赛是谁最先打到6分为之胜利,所以对同一个人不止一场比赛,可以选择当前选手继续打。至于,如果打到5:5,要进行决金箭(就是每人射一箭,谁的箭更靠近中心,谁为之赢),系统就不做了决金箭了,可以留在后面优化。

使用感受:

1.真实带入淘汰赛的感觉真的和排位赛不一样,会感受到那份压力(重现到线上问题!!!)。
2.倒计时我设置成60秒,比比赛时间要短,但给到我点压迫感。
3.每一箭时间在0~20秒间随机一个数,所以有时候每隔几秒对手就发射,有点不符合现实,现实从上箭到发射,最快也要5秒,不过还行,同样给到我压迫感。

后语:
由于笔者很久没写过前端代码了,所以代码就不贴出来,代码中有很多可优化的点,无论是性能还是功能点,拿来主义的可以直接点击下载。
代码下载地址:https://github.com/MichaelYipInGitHub/PKTraining

《用JavaScript搭建射箭比赛淘汰赛训练系统》 广东省射箭比赛排名

《用JavaScript搭建射箭比赛淘汰赛训练系统》 佛山市南海射箭比赛排名

    原文作者:Michael孟良
    原文地址: https://www.jianshu.com/p/700e27b99f44
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞