百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第五十四天到第五十七天:足球小将(一)

进阶

人数46人在学习该课程,有25人已经完成该课程

时间平均用时3.7

关键词JavaScript

课程概述

作业提交截止时间:09-01

第五十四天到第五十七天:足球小将(一)

课程目标

通过趣味练习,来强化对于 JavaScript 的熟悉

持续练习如何对于问题进行抽象,应用面向对象或者各种设计模式进行问题的解决

这也是本次2018百度前端技术学院零基础班最后一个任务,祝大家学习开心

课程描述

创建一个足球场

需求

通过 Canvas 或者 SVG 绘制一片绿色矩形,就像是我们从高空俯视绿色草坪足球场看见的一样。

有余力的同学,可以把足球场上的各种边线画上。

设计

应用工厂模式,设计一个生成足球场的类

足球场包括长度,宽度的属性,长度宽度创建时候以模拟真实单位的“米”为参数,同时以容器宽度和高度进行对应换算。

验证

在不同像素高宽的容器中生成同样长宽米的球场,看球场是否进行了对应的自适应变换

在同样像素高宽的容器中,生成不同长宽米的球场

创建一个足球运动员

需求

通过 Canvas 或者 SVG 或者 DOM 创建一个足球运动员。

我们将足球运动员抽象为一个实心圆,不需要考虑他的方向问题。

创建球员的时候,需要将球员创建到某个球场中,球员圆形的大小默认为2米,按照和球场的大小进行对应像素的换算。

球员有很多关于足球运动能力的属性,比如速度,力量,技术,射门等等。我们先添加一个属性,叫做速度。

速度 VNum 为一个在1-99范围内的整数,随机生成。对应物理概念可以假设为:

速度值为 99 的,最高速度为 12米每秒

速度值为 1 的,最高速度为 3米每秒

假设速度值和最高速度是线性关系,我们推导出如下公式:

最高速度VMax = 3 + (VNum - 1) * ( 9 / 98 )

让球员跑起来

需求

给球员增加一个方法,奔跑,指定一个终止点(相对于球场左上角的米的坐标),球员向那个终止点跑去。

使用上一个需求中的球员速度,以及和球场实际大小进行计算,模拟一个球员奔跑中,球员圆圈移动的动画。

为了测试方便,再给球员设置一个方法,设定球员所在位置,参数为相对于球场左上角的用米为单位的坐标,需要转换为像素

注意:球员不可能一直按着最高速度进行奔跑,球员有起步,加速到全速,到终点后降速的过程

阅读

设计

根据上面的阅读,实现球员的奔跑方法,球员有起步,逐渐加速,全速,到达终点后,再逐渐降速并继续向前再移动一小段距离

验证

  • 生成一个速度为100的球员,奔跑吧
  • 生成一个速度为1的球员,奔跑吧
  • 生成好多速度随机的球员,一起跑步比赛吧

让球员跑得更真实

需求

我们知道,球员跑步速度不仅仅和最高速度有关系,还和体力,爆发力相关

爆发力强,则加速到最快速度会比较快,体力好,坚持在最高速度会比较久

所以给球员增加这两个属性,然后再让大家奔跑看看

设计

爆发力和体力依然用 1-99 范围内的整数来设定,假设有如下物理意义:

  • 爆发力为 99 表示能够在 1 秒就达到最高速度

  • 爆发力为 1 表示需要 4 秒才能达到最高速度

假设爆发力和需要多长时间达到最高速度是线性关系,请自行推导公式

  • 体力为 99 表示能够在最高速度上坚持 15 秒
  • 体力为 1 表示能够在最高速度上坚持 10 秒

假设体力和能够在最高速度上坚持的时间是线性关系,请自行推导公式

验证

生成不同的怪异数值球员进行比赛吧,也可以根据比赛结果适当调整各种数值的物理计算公式

提交

把代码及预览地址进行提交

总结

依然把今天的学习用时,收获,问题进行记录

下一个任务预告

明天我们将开始有球训练

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~