动画与交互式编程：教学实践与反馈

理论计算机科学电子笔记224（2009）133-140www.elsevier.com/locate/entcs动画和交互式编程：实用方法Phillip Benachour1 和鲁本·爱德华兹2英国兰卡斯特大学通信系统Infolab21系摘要本文介绍了一个正在进行的工作，使用动画软件工具来教编程原理。这项工作背后的动机是鼓励那些不认为自己是严肃程序员的高等教育学生参与编程教学中使用的一些概念和方法。此外，这项工作还用于讲习班，与当地和区域中学接触，关于使用动画作为学习编程原理的工具。 本文中提出的结果是基于一年级本科生的反馈。教师、学生和学校的初步反馈非常积极，并提出了进行更多访问的要求。这为进一步与这些学校合作举办更多讲习班创造了机会。分析和反馈这些学校将在工作坊中介绍关键词：交互编程，动手学习1引言新概念和实践技能的教学，如编程，可以与动画和视觉效果相结合，以取得很好的效果。使用学习对象向多媒体学生和其他学科提供编程技能已经被探索和实施[1]。在大学水平上教授的现代编程语言通常被视为新本科生的主要障碍，这种困难感通常被认为是脱离整个学科的原因[3]。文献中的一些论文已经介绍了Ac- tionscript作为一个合适的工具，用于教学入门编程。例如，citeCrBo：2006：CNET将JavaScript代码与类似程序中更复杂的Java代码进行了比较，并得出结论，JavaScript不仅教授了编程的基础知识和面向对象开发的概念，1电子邮件：p. lancaster.ac.uk2电子邮件：r. lancaster.ac.uk1571-0661/Crown版权所有© 2008由Elsevier B. V.出版，CC BY-NC-ND许可证下开放访问。doi：10.1016/j.entcs.2008.12.057134P. 贝纳库尔河Edwards/Electronic Notes in Theoretical Computer Science 224（2009）133{这不仅能帮助学生，还能让他们在更容易解决的较小任务中发现错误。 在最近的一篇论文[2]中，建议将JavaScript作为这是向高级语言（如C++）迈进的一步。由于它提供的即时可视化，JavaScript被认为更容易学习。此外，citeLeEd：2007：GamesFirst认为，JavaScript脚本在现实世界中被广泛使用。例如用于设计动画和二维游戏。本文的目的是描述和评估正在进行的工作，使用动画和交互式编程，从事一年级的大学生，从不同的教育背景和学科，编程原则。这项正在进行的工作的重点是鼓励学生学习渐进的编程任务，从简单的命令和任务，以设计一个游戏。 一个突破电脑游戏的设计可能是最有用的-学生在学习编程和脚本概念时参与的完整练习。学生学习球，球拍，砖块和寄宿生之间的碰撞检测，通过使用键盘控制移动球拍进行用户交互，使用动态文本更新分数以及使用声音使编程体验的学习更加愉快和吸引人。2使用JavaScript进行动画和脚本编写JavaScript使用传统的编码技术，但允许用户查看每段代码如何影响程序的运行或执行，对代码的作用有一个直观的理解。为了帮助解决编码错误，JavaScript脚本使用语法检查器，并在运行程序之前或运行程序时通知用户错误。这与其他编程或脚本语言（如JavaScript）形成鲜明对比，在Javascript中，错误不那么容易识别，简单地省略逗号可能会导致整个程序失败。一个Javascript程序也只会在整个程序完成时执行，就像JavaScript脚本代码一样，即使整个程序没有完成，也可以运行为特定动作编写的脚本代码。2.1讲授增量和减量运算符在开始使用JavaScript制作动画时，最明显、最简单的例子可能是使用递增和递减运算符。鼓励学生在二维和三维世界中进行移动物体的实验。 下面的简单脚本允许对象在x方向上移动，每次帧移动时，x的值递增一个像素。被渲染和显示。onClipEvent（load）这个 X =5 0;//集的I n i t i a lX位置的 我们中利国际}现在尝试以下代码，但仅针对X轴：P. 贝纳库尔河Edwards/Electronic Notes in Theoretical Computer Science 224（2009）133135{onClipEvent（输入Frame）这个X 这个。 x +1;//this移动 我们 中利国际 5p i x e l s to//ther i g h t每一帧}然后要求学生记录他们对以下问题的回答• 你认为“这个”值多少。为了使其居中，舞台？• 你会在上面的代码中修改什么来阻止你的圆移动？• 你会在上面的代码中做什么改变，让你的球向相反的方向移动？然后，要求学生将一个“y”变量引入到JavaScript代码中，并对他们的onClipEvent（load）这个 X = 5 0;这个 y = 5 0;}onClipEvent （enterFrame）这个 int x =1;这个 1 =1;}上述程序使学生能够理解二维动画是如何实现的tion使用以下问题作为指导：• 现在发生了什么为什么• “这个”的价值是什么。x和这个。y• 你会设置什么样的增量/减量。x和这个。y”到，以便使球对象从中心沿四个可能的方向行进。2.2如果，如果…… Else语句使用if和if… 条件测试的else语句检查条件是否 是真是假上面例子中的球对象可以用来做这件事。 学生被要求想办法阻止球对象移动时，它到达屏幕上的某个像素。像下面这样的例程可以很容易地完成这项任务：onClipEvent（输入Frame）如果（这个。x 300）这个 int x =1;}}{{{{136P. 贝纳库尔河Edwards/Electronic Notes in Theoretical Computer Science 224（2009）133}个字符。一旦学生得到的想法，他们可以修改代码，使球对象向上和向下移动一次的值“这。x”达到300个像素时，他们被要求对x坐标和y坐标的不同值进行实验。 另一种评估学生理解的方法是邀请他们 注释一段已经写好的代码，比如下面的代码onClipEvent（输入Frame）如果（这个。x 300）这个 int x =1;其他I f（这个。x> 300）这个 1 =1;}}使用if和if… else语句可以通过测试物体是否在限定的空间内移动或通过碰撞检测进行测试。突破游戏的设计是一个例子，在这种情况下，球需要反弹的边缘或桨。 学生们最初得到的代码，不考虑变量ballRadius，一旦输入代码并看到它工作，他们就会意识到球对象越过了边缘集。为了解决这个问题，ballRadius被包含在x和y方向的if语句中，如下面的代码所示var screenWidth = 5 5 0 ;var screenHeight =400; varballRadius= 1 0;球 x =球。 X + ballSpeedX ; ball . y=球。y + ballSpeedY ;如果（球。 x球半径）球。x= ballRadius ; ballSpeedX=− 1;}其他I f（球。x> screenWidth−ballRadius）{球x = screenWidth−ballRadius ;ballSpeedX x = − 1;}如果（球。 y球半径）球。y= ballRadius ; ballSpeedY=− 1;}其他I f（球。y> screenHeight−ballRadius）{球y = screenHeight−ballRadius ;ballSpeedY = − 1;}{{{{P. 贝纳库尔河Edwards/Electronic Notes in Theoretical Computer Science 224（2009）133137{{{{∗∗2.3在分组游戏中使用函数和循环来分层砖块函数的定义使用function关键字，后跟函数名，然后是后面括号中的参数名列表。在下面的示例代码中，函数laybricks被传递了三个参数，这些参数提供了允许砖分层的信息功能layBricks（numWide，姓名，行）eval（name）. 宽度 = screenWidth /num宽;eval（name）.高度= 0。25numscreenWidth/numWide;}在这个函数中，创建了一个循环来放置numWide砖块：功能layBricks（numWide，姓名，行）eval（name）. 宽度 = screenWidth /num宽;eval（name）.高度= 0。25numscreenWidth/numWide;为 （i =0;i numWide ;i ++）{}}这个循环首先将一个名为i的变量设置为0，然后循环numWide次，并根据原始砖名创建一个新名称，以便我们一个唯一的变量名称为每个新的砖，我们要创建。下面的图1显示了游戏完成后产生的输出nextLevel= 0 ; numBricks= 0;功能layBricks（numWide，姓名，行）eval（name）. 宽度 = screenWidth /num宽;eval（name）.高度= 0。25numscreenWidth/numWide;为 （i） =0 ;我

下载后可阅读完整内容，剩余1页未读，立即下载