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文件