AS3基础教程-第21课-加法运算小程序(下)
本节课乃是上节课的延续,也是加法运算小程序的终结篇。
本节课要实现如下几个功能:
<1>上节课的fla文件有一个小bug,不知道你发现了吗?本节课先行修补之。
<2>观众必须向输入文本框内输入数字后,单击按钮才有效,否则会提示用户进行输入
<3>当所有的题目出完后,给出最终得分并统计正确率。
一、方法/步骤
- 01
将上节课保存的20.fla文件复制、粘贴一份,并重命名为21.fla 我们编辑这个复制出来的flash文档。
- 02
首先,修复一个小bug: 每进入下一题时,观众输入的上一题的答案还在。我们需要让输入文本框空白。 修复的步骤超级简单,仅需修改chuti()函数体的内部, 在其内部最后一行【jindu_txt.text=""+dqtm+"/"+zgtm】后面, 新增下面的代码: input_txt.text=""
- 03
接下来,实现“向输入文本框内输入数字后,单击按钮才有效” 很明显,这是一个判断,判断的语句当然是在按钮单击内。 为了叙述方便,我直接将按钮单击的相应函数的代码 修改后的代码贴出来,如下: if (input_txt.text != "") { uint(input_txt.text) == asw ? note_txt.text = "恭喜你,答对了":note_txt.text = "很遗憾,答错了"; if (dqtm<zgtm) { dqtm++; chuti(); } } else { note_txt.text = "请先输入答案,然后再点击按钮"; }
- 04
看起来是不是很混乱?没错,确实有点乱。接下来我在图中进行标注,相信能好理解一些。如下图,整体上是一个 if ... else 判断语句 然后,在if内部,又有两个判断: <1>第一个判断,只占据了一行的代码,但是很长 这里牵扯到一个新的知识点,那就是在AS3中的唯一 一个 三目运算符 ? : 它的书写格式是: A?B:C 作用等价于一个if ... else 判断语句: if(A){ B } else{ C } 如此一来,6行的代码,用一行就可以展现出来,不仅节约了空间,而且阅读起来非常的直观明显。它可以称为if ... else的简写形式,虽然阅读起来很容易理解,但是,有其弊端:B语句和C语句只能有一行,如果有多行,将无法使用简写形式,而必须使用完整的if ... else语句。 那么,这一行代码,用if ... else语句写出来,就是这样: 【请打开20.fla文件,那里面的代码就是了,呵呵哒】 <2>第二个判断,我用方框给框起来了。相信你能看懂,不再赘述
- 05
接下来,实现下面的目标: 当所有的题目出完后,给出最终得分并统计正确率。 <1>那么,需要先定义一个存储得分的变量,我们在所有的代码的最上面,添加下面的代码: var scores:uint=0//存储得分 <2>然后,需要在读者答对时,对scores进行加分操作。在 note_txt.text="恭喜你,答对了" 代码的下面,新增代码如下: scores+=10 那么,按照步骤4内的陈述, ? :运算符的简写将不再适应!需要我们改回来。很抱歉,写教程时没有注意到这一点,所以这里书写的有点反复。其实,真实的情况就是这样的,代码随着编程的进行,总要反复的修修改改,谁也无法保证自己的第一个想法就是完美无缺的,许多情况下会出现类似的现象: 使用第一个方案感觉有点麻烦,于是乎用第二个简易方案代替之,后续编程时,发现还需要回过头来进行修改,简易的方案无法实现现在的需求,不得已又改回第一个方案。 这也是本系列教程与其它教程的不同点,我会尽量的将分析的整个过程都呈现出来,而不是一上来就一大堆代码,然后逐行的解释。 而且,我编写的代码都是由易到难,需要进行反复的修改,一步步的增加新功能。我会将整个分析的过程尽量的呈现出来,方便大家对照学习。 最终的代码倒是并不太多,但是中间的过程会有些曲折,希望你耐心阅读哈。 言归正传,我们仍然使用20.fla文件内的原始方案,代码如下: if (uint(input_txt.text)==asw) { note_txt.text = "恭喜你,答对了"; scores += 10; } else { note_txt.text = "很遗憾,答错了"; } <3>在上图的第一个if里面的 if语句,对其进行扩展,如下: if (dqtm<zgtm) { dqtm++; chuti(); } else { note_txt.text = "您的得分是" + scores + "分,您的正确率是" + scores + "%"; }
- 06
至此,代码已经完成修改。关于按钮单击的响应函数体,内部的结构,请参考下图
- 07
实测时,发现,当10道题目都结束后,最后一题如果答对,再次点击按钮时,仍然计分。故此,代码需要进行修正。那么,需要将下面的代码 if (uint(input_txt.text)==asw) { note_txt.text = "恭喜你,答对了"; scores += 10; } else { note_txt.text = "很遗憾,答错了"; } 放入这个代码的内部: if (dqtm<zgtm) { //代码插入该处 dqtm++; chuti(); } else { note_txt.text = "您的得分是" + scores + "分,您的正确率是" + scores + "%"; } 也就是说,将反馈信息以及加分的代码都放在if (dqtm<zgtm)的判断语句内部,从而保证,一旦题目结束,将不再计分
- 08
这是修改后的完美代码
二、本例的完整代码
- 01
鉴于分析的过程比较长,中间还有一处反复、一处bug的修改,所以感觉有点混乱,故此,有必要将完整的代码贴出来,供大家参阅
- 02
var scores:uint = 0;//存储得分 var dqtm:uint = 1;//存储当前题目 const zgtm:uint=10 //存储总共题目 var num1:uint; var num2:uint; var asw:uint; function chuti() { num1 = Math.random() * 100; num2 = Math.random() * 100; asw = num1 + num2; num1_txt.text = String(num1); num2_txt.text = String(num2); jindu_txt.text = "" + dqtm + "/" + zgtm; input_txt.text = ""; } chuti(); add_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler); function fl_MouseClickHandler(event:MouseEvent):void { if (input_txt.text != "") { if (dqtm<zgtm) { if (uint(input_txt.text)==asw) { note_txt.text = "恭喜你,答对了"; scores += 10; } else { note_txt.text = "很遗憾,答错了"; } dqtm++; chuti(); } else { note_txt.text = "您的得分是" + scores + "分,您的正确率是" + scores + "%"; } } else { note_txt.text = "请先输入答案,然后再点击按钮"; } }
- 03
您可以在本文的发布地的17楼,找到本系列教程的fla源码,以对照学习
三、拓展延伸
- 01
本例因为设置了10道题,每题10分,所以,最终在计算得分率时,可以直接将分数设置为得分率。 如果你的题目不是10道,比如说设有8道题,每题5分,那么,本例的代码将不适合你用。 现在给出通用的计算得分率的手段 得分率的换算公式: (答对的题目的个数/总题目的个数)*100%
- 02
按照这个公式, <1>我们需要新增一个变量,用于存储答对题目的个数 var rightasw:uint=0 <2>然后,在这两行代码: note_txt.text = "恭喜你,答对了"; scores += 10; 的后面,新增一行代码: rightasw++ <3>最后,将下面的一行代码: note_txt.text = "您的得分是" + scores + "分,您的正确率是" + scores + "% 修改为: note_txt.text = "您的得分是" + scores + "分,您的正确率是" + rightasw/zgtm*100+ "%";
- 03
修改后的源码,就是21_pro.fla文件