结对编程1-模块化

林家仙：201421122062

蒋琳琳：201421122092

地址：https://git.coding.net/sasuke_/testtwo.git

题目要求
         用各种语言实现了一个命令行的四则运算小程序。进一步，本次要求把这个程序做成GUI，成为一个有基本功能、一定价值的程序。在下面的功能需求中实现两个：
  1. 记录用户的对错总数，程序退出再启动的时候，能把以前的对错数量保存并在此基础上增量计算。
  1. 有计时功能，能显示用户开始答题后的消耗时间。

需求分析

       1.界面简洁简单，具有登入，答题，结束。

       2.具有计时功能：（1）单题的倒计时（2）答题的计时

       3.答对题目计入分数，答错题目不计分并视为失败退出，记录并保存用户的最高的分数

       4.答题正确错误有不同的音效

程序设计

      1.计时功能

       倒计时功能是使用了setInterva， setInterval动作的作用是在播放动画时，每隔一定时间就调用函数，方法或对象。这里使用本动作更新时间显示。

        当在一定时间内，用户给出正确答案并提交，将进入下一题，并更新倒计时时间，若字一定时间内，用户没有输入答案，即视为答题失败，系统给出提示“Time out”。

       

       计时器功能是创建一个函数来计录时间，并且使用requestAnimationFrame实现计时的动画效果。

      

     

      2.记分功能

       cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。

       首先创建一个可在 cookie 变量中将当前最高分值存入 document.cookie 对象，再设置获取cookie中的值。

       

       

    3.界面设计

     运用 CSS 对网页中元素位置控制，编辑网页对象和模型样式。

      

     创建一个函数来获取和调用声音

      

4.思维导图

      

 

    代码展示

 展示每个功能的核心代码

1.计时功能

 倒计时

 1                     var time = 10;
 2                     var timer = setInterval(function() {
 3                         time = time - 1;
 4                         if(time == 0) {
 5                             clearInterval(timer);
 6                             hide(gameDiv);
 7                             show(startDiv);
 8 
 9                             score1.innerText = "Your Score Is : " + score;
10 
11                             massage.innerText = "Time Out ! ";
12 
13                             worngMp3.play();
14                         }
15                         timerp.innerText = time;
16                     }, 1000);

计时器功能及其动画效果

 1   var defaults = {}
 2   , one_second = 1000
 3   , one_minute = one_second * 60
 4   , one_hour = one_minute * 60
 5   , one_day = one_hour * 24
 6   , startDate = new Date()
 7   , face = document.getElementById('lazy');
 8 
 9 
10 var requestAnimationFrame = (function() {
11   return this.requestAnimationFrame       || 
12          this.webkitRequestAnimationFrame || 
13          this.mozRequestAnimationFrame    || 
14          this.oRequestAnimationFrame      || 
15          this.msRequestAnimationFrame     || 
16          function( callback ){
17            this.setTimeout(callback, 1000 / 60);
18          };
19 }());
20 
21 tick();
22 
23 function tick() {
24 
25   var now = new Date()
26     , elapsed = now - startDate
27     , parts = [];
28 
29   parts[0] = '' + Math.floor( elapsed / one_hour );
30   parts[1] = '' + Math.floor( (elapsed % one_hour) / one_minute );
31   parts[2] = '' + Math.floor( ( (elapsed % one_hour) % one_minute ) / one_second );
32 
33   parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0];
34   parts[1] = (parts[1].length == 1) ? '0' + parts[1] : parts[1];
35   parts[2] = (parts[2].length == 1) ? '0' + parts[2] : parts[2];
36 
37   face.innerText = parts.join(':');
38   
39   requestAnimationFrame(tick);
40   
41 }

2.计分功能

累计分数，当结果正确进入下一题，并累计分值，直到退出累积的分值大于记录的最高分，将更新记录，若是分值未大于最高值，则不更新记录。

 1                 trueBtn.onclick = function(){
 2                     var newResult = document.getElementById("answer").value;
 3                     
 4                    if(newResult == resultfinal){ 
 5                     clearInterval(timer);
 6                     trueMp3.play();
 7                     score = score+1;
 8                     score2.innerText = score;                    
 9                     game();
10                     
11                 }
12                 else if(newResult != result ){
13                     
14                     clearInterval(timer);
15                     worngMp3.play();
16                     hide(gameDiv);
17                     show(startDiv);
18                
19                         score1.innerText = "Your score : "+score;
20                     
21                      
22                           massage.innerText  = "Wrong answer !";
23                        
24                     
25                     if(score>chBestScore){
26                         setCookie("bestScore",score,30);
27                    
28                      }
29                    
30                           chBestScore = getCookie("bestScore");
31                          bestP.innerText = "Best Score :  " +ChBestScore;
32                       
33      
34                 }; 
35             };

运用cookie记录保存最高分

 1         function setCookie(cname, cvalue, exdays) {
 2             var d = new Date();
 3             d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
 4             var expires = "expires=" + d.toUTCString();
 5             document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
 6         }
 7         /// get cookie
 8         function getCookie(cname) {
 9             var name = cname + "=";
10             var decodedCookie = decodeURIComponent(document.cookie);
11             var ca = decodedCookie.split(';');
12             for(var i = 0; i < ca.length; i++) {
13                 var c = ca[i];
14                 while(c.charAt(0) == ' ') {
15                     c = c.substring(1);
16                 }
17                 if(c.indexOf(name) == 0) {
18                     return c.substring(name.length, c.length);
19                 }
20             }
21             return "";
22         }

 

3.界面功能

输入正确答案和错误答案具有不同的音效

 1           function sound() {
 2                 soundBtn.onclick = function() {
 3                     trueMp3.volume = 0;
 4                     worngMp3.volume = 0;
 5                     soundBtn.innerHTML = "&#128263";
 6                     soundBtn.onclick = function() {
 7                         trueMp3.volume = 0.1;
 8                         worngMp3.volume = 0.1;
 9                         soundBtn.innerHTML = "&#128264";
10                         sound();
11                     };
12                 };
13             }

 

程序运行

 

地址：https://git.coding.net/sasuke_/testtwo.git

小结感受

结对编程真的能够带来1+1>2的效果吗？通过这次结对编程，请谈谈你的感受和体会。

由于自身的基础薄弱，并没有觉得自己有“1”的效果，所以应该是自身的原因，而没有达到1+1>2的效果，结对编程实验过程出现的问题主要是和队友一起协作才得以解决，非常感谢队友的协助，还是从这次实验中加深了对H5的了解，也从队友身上学习到坚持不懈的精神。

评价

优点：耐心，勤奋好学，坚持不懈

改进：需要合理安排自己的时间，劳逸结合。

PSP

 

PSPPersonal Software Process StagesTime PredictedTime
Planning 计划 5 5
· Estimate 估计这个任务需要多少时间 5 4
Development 开发 420 700
· Analysis 需求分析 (包括学习新技术) 15 13
· Design Spec 生成设计文档 - -
· Design Review 设计复审 - -
· Coding Standard 代码规范 30 -
· Design 具体设计 - -
· Coding 具体编码 200 550
· Code Review 代码复审 30 -
· Test 测试（自我测试，修改代码，提交修改） 145 250
Reporting 报告 100 100
. 测试报告 90 90
. 计算工作量 10 -
. 并提出过程改进计划 10 -

 

posted @ 2017-10-22 17:14  玈人  阅读(208)  评论(0)  编辑  收藏  举报