2016-02-17

移动端方言互动小游戏

方言互动小游戏实现思路:给每个选择自定义属性 data-value="0" ,当用户点击相应选择题时,将自定义属性 push 到数组 arr 中,选择结束后循环数组相加得出分数。

方言大赛

CSS Animation 语音条动画效果,使用 animation-timing-function 属性中的 steps()

  1. .voiceAnim{
  2.     -webkit-animation: voiceAnimate 1s steps(4) infinite;
  3.         -ms-animation: voiceAnimate 1s steps(4) infinite;
  4.             animation: voiceAnimate 1s steps(4) infinite;
  5. }
  6. /* 语音条动画 */
  7. @keyframes voiceAnimate {
  8.     from {
  9.         background-position: 0 0;
  10.     }
  11.     to {
  12.         background-position: -800px 0;
  13.     }
  14. }
  15. @-ms-keyframes voiceAnimate {
  16.     from {
  17.         background-position: 0 0;
  18.     }
  19.     to {
  20.         background-position: -800px 0;
  21.     }
  22. }
  23. @-webkit-keyframes voiceAnimate {
  24.     from {
  25.         background-position: 0 0;
  26.     }
  27.     to {
  28.         background-position: -800px 0;
  29.     }
  30. }

JavaScript 核心代码

  1. $(".answerList").on("click","li",function(){
  2.     myVideo.load();    //重新加载音频
  3.     $(".voice").removeClass("voiceAnim");   //移除动画
  4.     if (i <= oAnswerL) {
  5.         alCount = i++;
  6.         var oData = $(this).attr("data-value"); //获取当分数
  7.         arr.push(parseInt(oData)) //将每次选择的分数 push 到数组 arr 中
  8.         console.log(arr);
  9.         if (i == 20) {
  10.             //循环数组获得分数
  11.             for (var a = 0; a < arr.length; a++) {
  12.                 sum += arr[a];
  13.             };
  14.             //插入分数
  15.             $(".sum").html(sum);
  16.             //判断显示结果图
  17.             if (sum <= 30) {
  18.                 $(".countContent").css({background:"url(images/result_4.png) 100% / 100% no-repeat"})
  19.             } else if(sum > 30 && sum < 65){
  20.                 $(".countContent").css({background:"url(images/result_3.png) 100% / 100% no-repeat"})
  21.             } else if(sum > 55 && sum < 85){
  22.                 $(".countContent").css({background:"url(images/result_2.png) 100% / 100% no-repeat"})
  23.             } else if(sum > 75 && sum < 105){
  24.                 $(".countContent").css({background:"url(images/result_1.png) 100% / 100% no-repeat"})
  25.             };
  26.             $(".gameBox").hide();
  27.             $(".gameCount").fadeIn(500);
  28.         } else {
  29.             //更改音效
  30.             $("#video > source").attr("src","music/"+alCount+".mp3");
  31.             //插入内容
  32.             $(".fangyan").html(answer[alCount].aFangyan);
  33.             $(".answerTitle").html("<span class='flip'>"+answer[alCount].aTitle+"</span>");
  34.             $(".answerList").html("<li data-value='"+answer[alCount].aOne.count+"'><span class='answerOne'>"+answer[alCount].aOne.description+"</span></li><li data-value='"+answer[alCount].aTwo.count+"'><span class='answerTwo'>"+answer[alCount].aTwo.description+"</span></li><li data-value='"+answer[alCount].aThree.count+"'><span class='answerThree'>"+answer[alCount].aThree.description+"</span></li>");
  35.         };
  36.     };
  37. })