基于OBE 理念的“JavaScript”课程设计

2022-08-13张红红王桂芝

无线互联科技 2022年10期

张红红，王桂芝

（1.河南牧业经济学院信息工程学院，河南郑州 450044；2.上海大学计算机工程与科学学院，上海 200444）

0 引言

百年大计,教育为本。当今社会是一个创新的社会,如何培养具有创新能力的人才,是新时代背景下教育所面临的一个巨大的挑战［1］。 OBE 是一种基于产出的教育模式和理念,这种教育理念对培养学生的专业知识、能力和素质有巨大的促进作用［2］。 OBE 教育模式最早出现在美国和加拿大,很快便推广到世界各国的教育改革中。教育部于2019 年10 月30 日发布了《关于一流本科课程建设的实施意见》,其中明确提出,要确立学生中心、产出导向、持续改进的理念,提升课程的高阶性,突出课程的创新性,增加课程的挑战度［3］。 OBE 教育理念是基于成果导向的,与过去关注学生学什么、怎么学的教育理念不同,OBE 更关注以学生为中心,学生学到了什么。具体而言,OBE 包括以下几个方面:一是学生的学习成果是什么；二是学生为什么要取得这些学习成果；三是怎么帮助学生取得这些学习成果；四是怎么判断学生是否取得这些学习成果。

当今社会是一个信息社会,随着信息技术的不断发展,云计算、大数据、物联网正在深入普通大众的工作、学习和生活。所有的这些都离不开网络的发展,作为Web 前端的重要技术, JavaScript 首屈一指。JavaScript 是一种高级脚本语言,有很多优势,如事件驱动、基于对象、实现计算机自动处理流程、与网页相结合等,是一种可以承载计算思维培养的编程语言［4］。所以,“JavaScript”课程不仅是计算机及相关理工科专业的核心课程,也成为很多文科生的计算机通识课程。基于OBE 理念的“JavaScript”课程设计对培养计算思维和创新能力有着举足轻重的作用。

1 课程教学新理念

1.1 课程教学现状

现阶段的“JavaScript”课程教学以教师的教为中心,教师选择教材,然后按教材备课,通过理论讲授教材的每一个知识点,之后按照知识点设计上机小练习,最后通过期末考试考查学生的掌握情况。学生对于这种教学模式积极性不高、参与性不高,从而导致课堂气氛不活跃、教学效果不如意等［5］。众所周知,兴趣是最好的老师,之所以如今的“JavaScript”课程教学效果不好,是因为没有激发学生的学习兴趣。如何才能更有效地引导学生的学习兴趣,这就需要在教学的方方面面下功夫。改变教学理念、改革教学模式、改进教学方法、改换考核方式等,以此促进教学效果。

1.2 OBE 教学新理念

OBE 教学新理念是成果导向型的,以学生的学为中心,聚焦于学生学习的成果。学生的学习要取得什么样成果,达到什么样的能力,要预先设计好。这样,一方面更贴近社会和业界对人才的需求,另一方面使学生的学习目标更加明确,从而激发他们的学习兴趣。在OBE 教学理念下,所有的教学过程和课程设计都要围绕学习效果来进行。与以往统一考核的一刀切模式不同,OBE 教学新理念强调个性化评价,与因材施教相对应,也要因材施考。新教学理念提倡以生为本,就是以学生为中心,能够激发学生学习的主动性,有利于培养他们的创新精神。

2 课程设计新思路

2.1 学习成果设计

把基于产出的OBE 教学理念引入“JavaScript”课程,首先要明确学习的成果。 “JavaScript”课程的学习成果包括知识目标和能力目标。其中知识目标包括“JavaScript”程序设计的所有知识点:如变量、运算符、分支、循环、数组、函数、事件等；能力目标包括具有一定的计算思维、规范化的编程习惯、思考解决问题的能力以及团队合作意识等。学习成果不仅仅停留在知识点的掌握上,更重要的是理解和应用所学知识以解决现实中的问题。

2.2 教学方法设计

为了达到上述的学习成果,采用项目驱动式教学法,把知识点分散融入不同的项目。这样既可以避免琐碎知识点学习的枯燥,又可以培养学生的编程思维,以更好地满足社会的需求。当今社会,由于信息技术的飞速发展,电脑、平板、手机等电子产品无处不在,现在的学生从小就在这样的环境中成长,没有学生不接触电子产品。他们通过电子产品更快地了解各种资讯,学习各种知识。当然也进行各种娱乐,其中游戏是第一位的,游戏对人尤其是青年学生有着极大的吸引力。鉴于此,我们在项目教学中引入游戏案例,这样可以更好地激发学生学习的兴趣,进而提升教学效果。

3 课程设计新内容

针对游戏案例,课程设计的内容包括游戏显示、游戏控制、游戏动画、游戏逻辑和游戏综合等几个方面。

3.1 游戏显示版块

在游戏显示版块中,课程主要设计添加显示元素和显示元素的属性两个子版块。游戏案例采用制作赛车游戏界面,该案例可以划分为创建应用、创建图片、创建文本3 个步骤。

(1)创建应用,就是创建一个游戏的窗口,包括创建游戏窗口(应用)、把窗口显示到浏览器页面。例如,通过var app ＝new PIXI.Application (500,800)语句即可创建一个宽500 像素、高800 像素的一个游戏窗口,App 为应用程序的名字；通过 document. body.appendChild (app.view)语句即可把上述应用窗口显示到浏览器页面上。

(2)创建图片,包括创建一个图片,并把它显示到应用程序的舞台上。例如,通过var car ＝ new PIXI.Sprite.fromImage(“图片所在地址”)语句即可创建一个图片car；通过app.stage.addChild(car)语句即可将名字为car 的图片显示到舞台上。

(3)创建文本,包括创建一个文本,设置文本的位置、内容、颜色等,并把文本显示到应用程序的舞台上。例如,通过var defen ＝new PIXI.Text(“得分:0”)语句即可创建一个文本,内容为“得分:0”。设置文本的位置可通过水平(x)、垂直(y)两个方向来设置,如defen.x ＝150 语句的作用是把defen 文本的水平位置设在相对于舞台左侧的150 像素处。语句defen.text ＝“得分:100”可以修改文本显示的内容；语句defen.style.fill＝0xffffff 设定文本的字体颜色为白色。 app.stage.addChild(defen)语句把名字为defen 的文本显示到舞台上。

在上述案例的设计过程中,把变量和显示元素的知识点涵盖其中。变量是指可以改变的量,通过var 定义的名字称为变量,如上述的app,car,defen 等就是变量。变量可以理解为计算机内存的一个存储空间,存储程序中用到的数据。显示元素的常见属性及含义如表1 所示。

表1 显示元素的常见属性

3.2 游戏控制版块

在游戏控制版块中,课程主要设计鼠标控制事件和鼠标跟随事件两个子版块。游戏案例采用植物大战僵尸之收阳光、恐龙快打、斗地主之手牌选择、大鱼吃小鱼、反恐重击等。这些案例可以划分为鼠标控制和鼠标跟随两个类别。

3.2.1 鼠标控制

植物大战僵尸之收阳光的游戏案例设计为鼠标控制的点击事件,当鼠标点击草地上的阳光(图片)时,阳光消失,这里用隐藏阳光图片来实现。

恐龙快打的游戏案例设计为鼠标控制方向事件,当鼠标点击上、下、左、右4 个方向的按钮图标时,控制人物向对应的方向移动。

斗地主之手牌选择游戏案例设计为鼠标改变位置事件,当鼠标点击某张纸牌时,纸牌的位置发生改变形成出牌的效果。这里可以加上鼠标的变形效果,当鼠标移入纸牌图片时,鼠标变成小手状。可以通过把图片的buttonMode 属性设置为true 来实现该功能。

3.2.2 鼠标跟随

大鱼吃小鱼游戏案例设计为鼠标跟随事件,控制大鱼跟随鼠标移动,可用event.data.getLocalPosition(app.stage)语句来获得鼠标的当前位置从而进行鼠标跟随。

反恐重击游戏案例同样设计为鼠标跟随事件,控制准星(图片)跟随鼠标移动,另外,可以在游戏界面的左下角处显示准星的x 和y 坐标。瞄准后射击目标可以用点击鼠标左键实现,为了增加射击效果,可以在射击处添加弹痕效果,最简单的做法是在鼠标点击处添加一张弹痕图片。

在上述案例的设计过程中,把鼠标常用事件知识点涵盖其中。鼠标常用事件如表2 所示。

表2 鼠标常用事件

3.3 游戏动画版块

在游戏动画版块中,课程主要设计位置判断、动画实现和函数优化3 个子版块。游戏案例采用打砖块之横杆移动、植物大战僵尸之发射子弹和僵尸消失、小球动画等。

3.3.1 位置判断

打砖块之横杆移动的游戏案例设计为增加了位置判断的动画。通过鼠标事件mousemove 添加横杆控制,跟随鼠标左右移动,通过位置判断控制横杆左右移动时,不出游戏界面的范围。采用判断横杆的横坐标x是否在屏幕范围,如果小于屏幕的左边界,则将横杆固定在屏幕的左边界上,同理,如果x 大于屏幕的右边界,则将横杆固定在屏幕的右边界上。

3.3.2 动画实现

植物大战僵尸之发射子弹的游戏案例设计为子弹动画,子弹随着时间的增加向右移动,超出屏幕边界时,移回原来的位置,以此达到连续发射子弹的效果。采用帧频函数app.ticker.add(animate)添加动画,通过函数function animate()｛｝实现具体的动画效果,比如bullet.x+＝10 语句使子弹每次向右移动10 个像素。

植物大战僵尸之僵尸消失的游戏案例设计为显示元素旋转、缩放、位置变换动画。同样采用帧频函数实现动画效果,如zombie.rotation+＝0.2 表示将僵尸每次顺时针旋转0.2 弧度；语句zombie.scale.x-＝0.01 和zombie.scale.y-＝0.01 表示每次将僵尸缩小0.01 比例；语句zombie.x+＝0.1 和zombie.y-＝0.1 表示每次将僵尸向右上移动0.1 像素。

3.3.3 函数优化

小球动画的游戏案例设计为函数优化的动画,要求为上、下、左、右4 个小球实现不同的动画效果。例如要求上面小球实现大小变化、下面小球实现显示隐藏切换(调整图片的透明度)、左边小球实现旋转效果、右边小球实现翻转效果(调整x 方向的缩放比例)。此时,可以把每个小球的动画单独放在一个函数中,再在帧频函数中逐个调用各个小球的动画函数,以此还达到函数优化的目的,使程序结构更加清晰,增加程序的可读性。

在上述案例的设计过程中,把帧频函数的知识点涵盖其中。帧频函数是PIXI.Application()提供的功能,用于实现补间动画的效果。帧频函数添加后,由系统自动调用,每秒钟调用60 次。另外,函数优化不仅适用于帧频函数,也适用于程序的任意位置和任意功能。此外,上述案例的设计还涵盖了用于判断的分支结构、各类逻辑运算符等知识点。

3.4 游戏逻辑版块

在游戏逻辑版块中,课程主要设计变量逻辑、碰撞判断和两个子版块。游戏案例采用游戏暂停/继续、游戏倒计时、打砖块等。

3.4.1 变量逻辑

游戏暂停/继续的案例设计为变量逻辑,游戏中有暂停和继续两个图标按钮,但不能同时显示。游戏运行时显示暂停按钮,游戏暂停时显示继续按钮。为了标示游戏是否在运行,可以设置一个布尔变量isRun,游戏运行时设置为true,否则设置为false。这样在帧频函数中增加对该变量的判断,当isRun 变量为true 时,运行帧频动画继续游戏即可。

游戏倒计时的案例同样设计为变量逻辑,设置一个数值变量countdown 进行游戏的倒计时计数,如初始值设置为6,可以把该倒计时的数值显示在游戏界面上。鼠标点击一次,倒计时减1。当countdown 为0 时,游戏结束。注意倒计时减1 的操作前提要判断倒计时是否大于0,否则倒计时会一直向下减。

3.4.2 碰撞判断

打砖块的游戏案例设计为碰撞判断逻辑,游戏界面顶端摆放了若干等死的砖块,下面有一小球,在界面上运动,碰到边界则反弹,碰到砖块则砖块消失、小球反弹。

游戏中的碰撞指的是游戏中的两个图片元素有交集。为了方便判断,把每个元素看作一个假想圆,这个假想圆类似于数学中多边形的外接圆。假设两个元素分别为A 和B,其假想圆的半径分别为rA和rB,当A 和B 的中心点的距离小于它们的半径之和rA+rB,我们就认为A 和B 发生了碰撞。半径rA和rB可以通过图片的大小获得,如何求得A 和B 的中心点的距离呢？可以通过数学中的勾股定理来计算:直角三角形两条直角边的平方和等于斜边的平方。假设A 和B 的中心点坐标分别为(xA,yA)和(xB,yB),如果有(xA-xB)×(xAxB)+ (yA-yB)×(yA-yB) ＜(rA+rB)×(rA+rB),则可判断A 和B 碰撞。

在上述案例的设计过程中,把随机数、变量类型转换、对象类型、循环结构、数组等知识点涵盖其中。Math.random()可以获得0 到1 之间的随机小数,Math.random() * (大-小) +小可以获得指定范围(小,大)内的随机小数。利用随机数可以实现游戏中的很多随机功能,比如在随机位置放置随机对象,并让对象以随机速度随机移动等。采用变量计数来控制帧频函数的调用频率,可以实现每秒发射几颗子弹等功能。另外在检测多组元素碰撞时,需要对A 组的每一个元素与B 组的每一个元素进行碰撞检测。

3.5 游戏综合版块

在游戏综合版块,设计飞机大战游戏案例对整个课程所学内容进行综合练习与测试。

3.5.1 游戏元素

在游戏窗口中,添加如下的游戏元素:背景图片、云彩、主飞机、左右僚机、加速牌、血条、得分值、敌机组、敌机子弹、开始按钮、暂停按钮、结束按钮等。其中主飞机采用逐帧动画, 可用语句 PIXI. extras.AnimatedSprite. fromImages 实现,要求鼠标跟随。左右僚机添加时直接固定在主飞机左右两侧的固定位置,与主飞机一起执行鼠标跟随效果。主飞机的子弹每击中一架敌机,得分值增加200；主飞机每次被敌机子弹击中,血条减少0.05%。游戏开始显示开始按钮,开始游戏后显示暂停按钮,游戏结束(血条为0)时显示结束按钮,可以用布尔变量isStart 表示游戏是否开始。

3.5.2 游戏动画

用帧频函数实现游戏动画,由于游戏逻辑复杂,这里采用函数优化,代码如下: