展示链接 [点击进入]
预览图如下:
通过完成足球小将游戏的练习,来强化对于 JavaScript 的熟悉。
持续练习如何对于问题进行抽象,应用面向对象或者各种设计模式进行问题的解决。
可视化的展现一场模拟足球比赛。
严格要求现实的场地尺寸,按照统一的比例和球场的大小进行对应像素的换算。
保存两队的比分、以及重点赛况记录。
- 面向对象程序设计
- 工厂模式
- 单例模式
- 事件代理
- Canvas绘图
为展示该项目的主要页面,用以可视化的展示足球赛事情况。
将红队的比分展示出来。
同时,可以随意增加指定属性的红队队员。
另外如果不熟悉每种属性的功能,可以通过鼠标滑动,用一个浮动的窗口进行详细介绍。
并且,可以追踪查看每个人的相关属性,并且会在球场区,黑色圆圈标记出正在被查看的队员。
将蓝队的比分展示出来。
同时,可以随意增加指定属性的蓝队队员。
另外如果不熟悉每种属性的功能,可以通过鼠标滑动,用一个浮动的窗口进行详细介绍。
并且,可以追踪查看每个人的相关属性,并且会在球场区,黑色圆圈标记出正在被查看的队员。
用以控制球赛的开始、暂停节奏。
用以记录重点的赛况。
球员有很多关于足球运动能力的属性,假设属性与能力呈线性关系,那么详细如下:
- 速度值为 99 的,最高速度为 12米/秒。
- 速度值为 1 的,最高速度为 3米/秒。
- 爆发力为 99 的,表示能够在 1 秒就达到最高速度
- 爆发力为 1 的,表示需要 4 秒才能达到最高速度
- 体力为 99 的,表示能够在最高速度上坚持 15 秒
- 体力为 1 的,表示能够在最高速度上坚持 10 秒
- 力量为 99 的,运动员踢出足球的最大初速度为 50米/秒
- 力量为 1 的,运动员踢出足球的最大初速度为 5米/秒
- 技巧为 99 的,运动员踢出足球的最大偏移为 ±1°
- 技巧为 1 的,运动员踢出足球的最大偏移为 ±10°
运动员只有一个目标,获取足球位置,计算自身与之的角度,朝向足球奔跑。
当第一名运动员检测与足球相接触后,象征该球员抢球成功。此时会有5帧的保护时间,其他球员无法抢夺该球员所带的足球。
同时,这名运动员会获取自身队伍的得分球门位置,计算自身与之的角度,附加随机产生的技巧偏移角度,为球类运动方向。
自身力量属性得到的踢球最大初速度,赋予足球,对足球进行射门。
为了尽量逼真现实效果,足球拥有摩擦力,球被踢出后会慢慢减速,直至停止。
当球被射进球门,判断属于哪方的得分球门。将比分记录,并且实时的显示出来比分。 另外,展示进球特效,同时,球员原地休息。裁判将足球放回中场。
当球被踢出界外,需要判断球出界位置。
选择其最近的角球区,又裁判随机角度,将足球发出。
- 硬件环境
MacBook Pro - 软件环境
MacOS (10.14.2)
VS Code (version 1.36)
Google Chrome (75.0.3770.100)
Firefox (67.0.4)
百度前端技术学院-第五十四天到第五十七天:足球小将(一)
百度前端技术学院-第五十八天到第六十二天:足球小将(二)
百度前端技术学院-第六十三天到第六十六天:足球小将(三)