• 售前

  • 售后

热门帖子
入门百科

JavaScript实现消消乐的源代码

[复制链接]
梦想镌刻时光光x 显示全部楼层 发表于 2021-10-25 19:03:05 |阅读模式 打印 上一主题 下一主题
JavaScript实现消消乐的源码下载地点:点击下载源代码

index.html
  1. <!doctype html>
  2. <html lang="en">
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.                 <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.                 <title>LuckyStar</title>
  8.                 <link rel="stylesheet" href="./css/index.css?v=1.0.0" rel="external nofollow" >
  9.         </head>
  10.         <body>
  11.                 <div class="lucky-star" id="luckyStar">
  12.                         <div class="score-target">
  13.                                 <p class="score-level">关卡 <span id="scoreLevel"></span></p>
  14.                                 <p>目标:<span id="scoreTarget"></span></p>
  15.                         </div>
  16.                         <div class="score-current">得分<span id="scoreCurrent"></span></div>
  17.                         <div class="score-select" id="scoreSelect"></div>
  18.                         <ul class="star-list" id="starList"> </ul>
  19.                 </div>
  20.         </body>
  21.         <script src="./js/countUp.js"></script>
  22.         <script src="./js/index.js"></script>
  23.         <script src="./js/resize.js"></script>
  24.         <script>
  25.                 new PopStar()
  26.         </script>
  27. </html>
复制代码
JS文件

main.js
  1. (function() {
  2.         //全局配置
  3.         var config = {
  4.                 tileWidth: .75, //小星星的宽高
  5.                 tileHeight: .75,
  6.                 tileSet: [], //存储小星星的二维数组
  7.                 tableRows: 10, //行数
  8.                 baseScore: 5, //每一个小星星的基础分数
  9.                 stepScore: 10, //每一个小星星的递增分数
  10.                 targetScore: 2000, //目标分数,初始为2000
  11.                 el: document.querySelector('#starList'),// 星星列表
  12.                 scoreTarget: document.querySelector('#scoreTarget'),//目标分数
  13.                 scoreCurrent: document.querySelector('#scoreCurrent'),//当前分数
  14.                 scoreSelect: document.querySelector('#scoreSelect'),//选中星星分数
  15.                 scoreLevel: document.querySelector('#scoreLevel'),//当前所在的关数
  16.         };
  17.         //全局计算属性
  18.         var computed = {
  19.                 flag: true, //锁
  20.                 choose: [], //已选中的小星星集合
  21.                 timer: null,
  22.                 totalScore: 0, //总分数
  23.                 tempTile: null,
  24.                 level: 1, //当前所在的关数(每闯过一关+1,游戏失败回复为1)
  25.                 stepTargetScore: 1000, //闯关成功的递增分数(1000/关)
  26.                 score: 0 //当前的计算分数
  27.         };
  28.         //Block对象
  29.         function Block(number, row, col) {
  30.                 var tile = document.createElement('li');
  31.                 tile.width = config.tileWidth;
  32.                 tile.height = config.tileHeight;
  33.                 tile.number = number;
  34.                 tile.row = row;
  35.                 tile.col = col;
  36.                 return tile;
  37.         }
  38.         //入口函数
  39.         function PopStar() {
  40.                 return new PopStar.prototype.init();
  41.         }
  42.         //PopStar原型
  43.         PopStar.prototype = {
  44.                 /**
  45.                  * PopStar的入口函数
  46.                  */
  47.                 init: function() {
  48.                         this.initTable();
  49.                 },
  50.                 /**
  51.                  * 初始化操作
  52.                  */
  53.                 initTable: function() {
  54.                         this.initScore();
  55.                         this.initTileSet();
  56.                         this.initBlocks();
  57.                 },
  58.                 /**
  59.                  * 初始化当前分数和目标
  60.                  */
  61.                 initScore: function() {
  62.                         new CountUp(config.scoreTarget, config.targetScore, config.targetScore).start();
  63.                         config.scoreCurrent.innerHTML = computed.totalScore;
  64.                         config.scoreLevel.innerHTML = computed.level;
  65.                 },
  66.                 /**
  67.                  * 点击事件操作
  68.                  */
  69.                 mouseClick: function() {
  70.                         var tileSet = config.tileSet,
  71.                                 choose = computed.choose,
  72.                                 baseScore = config.baseScore,
  73.                                 stepScore = config.stepScore,
  74.                                 el = config.el,
  75.                                 self = this,
  76.                                 len = choose.length;
  77.                         if (!computed.flag || len <= 1) {
  78.                                 return;
  79.                         }
  80.                         computed.flag = false;
  81.                         computed.tempTile = null;
  82.                         var score = 0;
  83.                         for (var i = 0; i < len; i++) {
  84.                                 score += baseScore + i * stepScore;
  85.                         }
  86.                         new CountUp(config.scoreCurrent, computed.totalScore, computed.totalScore += score).start();
  87.                         for (var i = 0; i < len; i++) {
  88.                                 setTimeout(function(i) {
  89.                                         tileSet[choose[i].row][choose[i].col] = null;
  90.                                         el.removeChild(choose[i]);
  91.                                 }, i * 100, i);
  92.                         }
  93.                         setTimeout(function() {
  94.                                 self.move();
  95.                                 //判断结束
  96.                                 setTimeout(function() {
  97.                                         if (self.isFinish()) {
  98.                                                 self.clear();
  99.                                                 if (computed.totalScore >= config.targetScore) {
  100.                                                         new CountUp(config.scoreTarget, config.targetScore, config.targetScore += (computed.level - 1) * computed
  101.                                                                         .stepTargetScore)
  102.                                                                 .start();
  103.                                                         new CountUp(config.scoreLevel, computed.level, computed.level += 1).start();
  104.                                                         alert("恭喜获胜");
  105.                                                         console.log("恭喜获胜")
  106.                                                 } else {
  107.                                                         config.targetScore = config.scoreTarget = 2000;
  108.                                                         computed.level = computed.totalScore = 0;
  109.                                                         alert("游戏失败");
  110.                                                         console.log("游戏失败")
  111.                                                 }
  112.                                                 computed.flag = true;
  113.                                                
  114.                                         } else {
  115.                                                 choose = [];
  116.                                                 computed.flag = true; //在所有动作都执行完成之后释放锁
  117.                                                 self.mouseOver(computed.tempTile);
  118.                                         }
  119.                                 }, 300 + choose.length * 150);
  120.                         }, choose.length * 100);
  121.                 },
  122.                 /**
  123.                  * 闯关成功或失败清除(清除二维数组和el的子节点)操作
  124.                  */
  125.                 clear: function() {
  126.                         var tileSet = config.tileSet,
  127.                                 rows = tileSet.length,
  128.                                 el = config.el;
  129.                         var temp = [];
  130.                         for (var i = rows - 1; i >= 0; i--) {
  131.                                 for (var j = tileSet[i].length - 1; j >= 0; j--) {
  132.                                         if (tileSet[i][j] === null) {
  133.                                                 continue;
  134.                                         }
  135.                                         temp.push(tileSet[i][j])
  136.                                         tileSet[i][j] = null;
  137.                                 }
  138.                         }
  139.                         for (var k = 0; k < temp.length; k++) {
  140.                                 setTimeout(function(k) {
  141.                                         el.removeChild(temp[k]);       
  142.                                                 if(k>=temp.length-1){
  143.                                                                 setTimeout(function(k) {
  144.                                                                                 new PopStar();
  145.                                                                 },1000)
  146.                                                 }
  147.                                 }, k * 100, k);
  148.                         }
  149.                 },
  150.                 /**
  151.                  * 是否游戏结束
  152.                  * @returns {boolean}
  153.                  */
  154.                 isFinish: function() {
  155.                         var tileSet = config.tileSet,
  156.                                 rows = tileSet.length;
  157.                         for (var i = 0; i < rows; i++) {
  158.                                 var row = tileSet[i].length;
  159.                                 for (var j = 0; j < row; j++) {
  160.                                         var temp = [];
  161.                                         this.checkLink(tileSet[i][j], temp);
  162.                                         if (temp.length > 1) {
  163.                                                 return false;
  164.                                         }
  165.                                 }
  166.                         }
  167.                         return true;
  168.                 },
  169.                 /**
  170.                  * 消除星星后的移动操作
  171.                  */
  172.                 move: function() {
  173.                         var rows = config.tableRows,
  174.                                 tileSet = config.tileSet;
  175.                         //向下移动
  176.                         for (var i = 0; i < rows; i++) {
  177.                                 var pointer = 0; //pointer指向小方块,当遇到null的时候停止,等待上面的小方块落到这里来
  178.                                 for (var j = 0; j < rows; j++) {
  179.                                         if (tileSet[j][i] != null) {
  180.                                                 if (j !== pointer) {
  181.                                                         tileSet[pointer][i] = tileSet[j][i];
  182.                                                         tileSet[j][i].row = pointer;
  183.                                                         tileSet[j][i] = null;
  184.                                                 }
  185.                                                 pointer++;
  186.                                         }
  187.                                 }
  188.                         }
  189.                         //横向移动(最下面一行其中有无空列)
  190.                         for (var i = 0; i < tileSet[0].length;) {
  191.                                 if (tileSet[0][i] == null) {
  192.                                         for (var j = 0; j < rows; j++) {
  193.                                                 tileSet[j].splice(i, 1);
  194.                                         }
  195.                                         continue;
  196.                                 }
  197.                                 i++;
  198.                         }
  199.                         this.refresh()
  200.                 },
  201.                 /**
  202.                  * 鼠标移入时的闪烁操作
  203.                  * @param obj
  204.                  */
  205.                 mouseOver: function(obj) {
  206.                         if (!computed.flag) { //处于锁定状态不允许有操作
  207.                                 computed.tempTile = obj;
  208.                                 return;
  209.                         }
  210.                         this.clearFlicker();
  211.                         var choose = [];
  212.                         this.checkLink(obj, choose);
  213.                         computed.choose = choose;
  214.                         if (choose.length <= 1) {
  215.                                 choose = [];
  216.                                 return;
  217.                         }
  218.                         this.flicker(choose);
  219.                         this.computeScore(choose);
  220.                 },
  221.                 /**
  222.                  * 计算已选中的星星分数
  223.                  * @param arr
  224.                  */
  225.                 computeScore: function(arr) {
  226.                         var score = 0,
  227.                                 len = arr.length,
  228.                                 baseScore = config.baseScore,
  229.                                 stepScore = config.stepScore;
  230.                         for (var i = 0; i < len; i++) {
  231.                                 score += baseScore + i * stepScore
  232.                         }
  233.                         if (score <= 0) {
  234.                                 return;
  235.                         }
  236.                         computed.score = score;
  237.                         config.scoreSelect.style.opacity = '1';
  238.                         config.scoreSelect.innerHTML = arr.length + "连消 " + score + "分";
  239.                         setTimeout(function() {
  240.                                 config.scoreSelect.style.opacity = '0';
  241.                         }, 1200)
  242.                 },
  243.                 /**
  244.                  * 鼠标移出时的消除星星闪烁的操作
  245.                  */
  246.                 clearFlicker: function() {
  247.                         var tileSet = config.tileSet;
  248.                         for (var i = 0; i < tileSet.length; i++) {
  249.                                 for (var j = 0; j < tileSet[i].length; j++) {
  250.                                         var div = tileSet[i][j];
  251.                                         if (div === null) {
  252.                                                 continue;
  253.                                         }
  254.                                         div.classList.remove("scale");
  255.                                 }
  256.                         }
  257.                 },
  258.                 /**
  259.                  * 星星闪烁
  260.                  * @param arr
  261.                  */
  262.                 flicker: function(arr) {
  263.                         for (var i = 0; i < arr.length; i++) {
  264.                                 var div = arr[i];
  265.                                 div.classList.add("scale");
  266.                         }
  267.                 },
  268.                 /**
  269.                  * 检查鼠标移入的这个星星是否有相连着的相同的星星,
  270.                  * @param obj star
  271.                  * @param arr choose
  272.                  */
  273.                 checkLink: function(obj, arr) {
  274.                         if (obj === null) {
  275.                                 return;
  276.                         }
  277.                         arr.push(obj);
  278.                         /**
  279.                          * 检查左边方块是否可以加入到选入的可消除星星行列:
  280.                          * 选中的星星不能是最左边的,
  281.                          * 选中的星星左边要有星星,
  282.                          * 选中的星星左边的星星的跟选中的星星一样,
  283.                          * 选中的星星左边的星星没有被选中过
  284.                          */
  285.                         var tileSet = config.tileSet,
  286.                                 rows = config.tableRows;
  287.                         if (obj.col > 0 && tileSet[obj.row][obj.col - 1] && tileSet[obj.row][obj.col - 1].number === obj.number && arr.indexOf(
  288.                                         tileSet[obj.row][obj.col - 1]) === -1) {
  289.                                 this.checkLink(tileSet[obj.row][obj.col - 1], arr);
  290.                         }
  291.                         if (obj.col < rows - 1 && tileSet[obj.row][obj.col + 1] && tileSet[obj.row][obj.col + 1].number === obj.number &&
  292.                                 arr.indexOf(tileSet[obj.row][obj.col + 1]) === -1) {
  293.                                 this.checkLink(tileSet[obj.row][obj.col + 1], arr);
  294.                         }
  295.                         if (obj.row < rows - 1 && tileSet[obj.row + 1][obj.col] && tileSet[obj.row + 1][obj.col].number === obj.number &&
  296.                                 arr.indexOf(tileSet[obj.row + 1][obj.col]) === -1) {
  297.                                 this.checkLink(tileSet[obj.row + 1][obj.col], arr);
  298.                         }
  299.                         if (obj.row > 0 && tileSet[obj.row - 1][obj.col] && tileSet[obj.row - 1][obj.col].number === obj.number && arr.indexOf(
  300.                                         tileSet[obj.row - 1][obj.col]) === -1) {
  301.                                 this.checkLink(tileSet[obj.row - 1][obj.col], arr);
  302.                         }
  303.                 },
  304.                 /**
  305.                  * 初始化二维数组
  306.                  */
  307.                 initTileSet: function() {
  308.                         var rows = config.tableRows,
  309.                                 arr = config.tileSet;
  310.                         for (var i = 0; i < rows; i++) {
  311.                                 arr[i] = [];
  312.                                 for (var j = 0; j < rows; j++) {
  313.                                         arr[i][j] = [];
  314.                                 }
  315.                         }
  316.                 },
  317.                 /**
  318.                  * 初始化el的子节点
  319.                  */
  320.                 initBlocks: function() {
  321.                         var tileSet = config.tileSet,
  322.                                 self = this,
  323.                                 el = config.el,
  324.                                 cols = tileSet.length;
  325.                         for (var i = 0; i < cols; i++) {
  326.                                 var rows = tileSet[i].length;
  327.                                 for (var j = 0; j < rows; j++) {
  328.                                         var tile = this.createBlock(Math.floor(Math.random() * 5), i, j);
  329.                                         tile.onmouseover = function() {
  330.                                                 self.mouseOver(this)
  331.                                         };
  332.                                         tile.onclick = function() {
  333.                                                 self.mouseClick();
  334.                                         };
  335.                                          
  336.                                         tileSet[i][j] = tile;
  337.                                         el.appendChild(tile);
  338.                                 }
  339.                         }
  340.                         this.refresh()
  341.                 },
  342.                 /**
  343.                  * 渲染el的子节点
  344.                  */
  345.                 refresh: function() {
  346.                         var tileSet = config.tileSet;
  347.                         for (var i = 0; i < tileSet.length; i++) {
  348.                                 var row = tileSet[i].length;
  349.                                 for (var j = 0; j < row; j++) {
  350.                                         var tile = tileSet[i][j];
  351.                                         if (tile == null) {
  352.                                                 continue;
  353.                                         }
  354.                                         tile.row = i;
  355.                                         tile.col = j;
  356.                                         tile.style.left = tileSet[i][j].col * config.tileWidth + "rem";
  357.                                         tile.style.bottom = tileSet[i][j].row * config.tileHeight + "rem";
  358.                                         tile.style.backgroundImage = "url('./images/" + tileSet[i][j].number + ".png')";
  359.                                 }
  360.                         }
  361.                 },
  362.                 /**
  363.                  * 创建星星子节点的函数
  364.                  * @param number
  365.                  * @param row
  366.                  * @param col
  367.                  * @returns {HTMLElement}
  368.                  */
  369.                 createBlock: function(number, row, col) {
  370.                         return new Block(number, row, col);
  371.                 },
  372.         };
  373.         PopStar.prototype.init.prototype = PopStar.prototype;
  374.         window.PopStar = PopStar;
  375. })();
复制代码
index.js
  1. (function()
  2. {function u(a,b,c)
  3. {
  4. var d=document.createElement("li");
  5. d.width=e.tileWidth;d.height=e.tileHeight;
  6. d.number=a;
  7. d.row=b;d.col=c;return d}
  8. function m()
  9. {return new m.prototype.init
  10. }
  11. var e={tileWidth:.75,tileHeight:.75,tileSet: [],
  12. tableRows:10,baseScore:5,
  13. stepScore:10,
  14. targetScore:2E3,
  15. el:document.querySelector("#starList"),
  16. scoreTarget:document.querySelector("#scoreTarget"),
  17. scoreCurrent:document.querySelector("#scoreCurrent"),
  18. scoreSelect:document.querySelector("#scoreSelect"),
  19. scoreLevel:document.querySelector("#scoreLevel")
  20. },
  21. n=!0,t=[],p=0,r=null,q=1;
  22. m.prototype={
  23. init:function(){this.initTable()
  24. }
  25. ,initTable:function(){
  26. this.initScore();
  27. this.initTileSet();
  28. this.initBlocks()
  29. }
  30. ,
  31. initScore:function(){
  32. (new CountUp(e.scoreTarget,e.targetScore,e.targetScore)).start();
  33. e.scoreCurrent.innerHTML=p;e.scoreLevel.innerHTML=q
  34. },
  35. mouseClick:function(){
  36. var a=e.tileSet,b=t,c=e.baseScore,d=e.stepScore,f=e.el,g=this,h=b.length;if(n&&!(1>=h)){
  37. n=!1;r=null;
  38. for(var l=0,k=0;
  39. k<h;k++)l+=c+k*d;(new CountUp(e.scoreCurrent,p,p+=l)).start();
  40. for(k=0;k<h;k++)
  41. setTimeout(function(c){a[b[c].row][b[c].col]=
  42. null;
  43. f.removeChild(b[c])},100*k,k);
  44. setTimeout(function(){g.move();
  45. setTimeout(function()
  46. {g.isFinish()?(g.clear(),p>=e.targetScore?((new CountUp(e.scoreTarget,e.targetScore,e.targetScore+=1E3*(q-1))).start(),(new CountUp(e.scoreLevel,q,q+=1)).start(),alert("\u606d\u559c\u83b7\u80dc"),console.log("\u606d\u559c\u83b7\u80dc")):(e.targetScore=e.scoreTarget=2E3,q=p=0,alert("\u6e38\u620f\u5931\u8d25"),console.log("\u6e38\u620f\u5931\u8d25")),n=!0):(b=[],n=!0,g.mouseOver(r))},300+150*b.length)},100*b.length)}},
  47. clear:function()
  48. {for(var a=e.tileSet,b=e.el,c=[],
  49. d=a.length-1;0<=d;d--)
  50. for(var f=a[d].length-1;0<=f;f--)
  51. null!==a[d][f]&&(c.push(a[d][f]),a[d][f]=null);
  52. for(a=0;a<c.length;a++)
  53. setTimeout(function(a)
  54. {b.removeChild(c[a]);
  55. a>=c.length-1&&setTimeout(function(a){new m},1E3)},100*a,a)},isFinish:function()
  56. {for(var a=e.tileSet,b=a.length,c=0;c<b;c++)
  57. for(var d=a[c].length,f=0;f<d;f++)
  58. {var g=[];this.checkLink(a[c][f],g);
  59. if(1<g.length)
  60. return!1}return!0},
  61. move:function()
  62. {for(var a=e.tableRows,b=e.tileSet,c=0;
  63. c<a;c++)for(var d=
  64. 0,f=0;f<a;f++)null!=b[f][c]&&(f!==d&&(b[d][c]=b[f][c],b[f][c].row=d,b[f][c]=null),d++);
  65. for(c=0;c<b[0].length;
  66. )if(null==b[0][c])
  67. for(f=0;f<a;f++)b[f].splice(c,1);else c++;this.refresh()},
  68. mouseOver:function(a){if(n)
  69. {this.clearFlicker();
  70. var b=[];
  71. this.checkLink(a,b);
  72. t=b;1>=b.length||(this.flicker(b),this.computeScore(b))}
  73. else r=a
  74. },
  75. computeScore:function(a)
  76. {for(var b=0,c=a.length,d=e.baseScore,f=e.stepScore,g=0;
  77. g<c;g++)b+=d+g*f;
  78. 0>=b||(e.scoreSelect.style.opacity="1",e.scoreSelect.innerHTML=a.length+"\u8fde\u6d88 "+
  79. b+"\u5206",setTimeout(function(){
  80. e.scoreSelect.style.opacity="0"},1200))
  81. },clearFlicker:function(){
  82. for(var a=e.tileSet,b=0;b<a.length;b++)
  83. for(var c=0;c<a[b].length;c++){var d=a[b][c];null!==d&&d.classList.remove("scale")}},flicker:function(a){for(var b=0;b<a.length;b++)a[b].classList.add("scale")
  84. },
  85. checkLink:function(a,b){
  86. if(null!==a){
  87. b.push(a);var c=e.tileSet,d=e.tableRows;0<a.col&&c[a.row][a.col-1]&&c[a.row][a.col-1].number===a.number&&-1===b.indexOf(c[a.row][a.col-1])&&this.checkLink(c[a.row][a.col-
  88. 1],b);a.col<d-1&&c[a.row][a.col+1]&&c[a.row]
  89. [a.col+1].number===a.number&&-1===b.indexOf(c[a.row][a.col+1])&&this.checkLink(c[a.row][a.col+1],b);a.row<d-1&&c[a.row+1][a.col]&&c[a.row+1][a.col].number===a.number&&-1===b.indexOf(c[a.row+1][a.col])&&this.checkLink(c[a.row+1][a.col],b);0<a.row&&c[a.row-1][a.col]&&c[a.row-1][a.col].number===a.number&&-1===b.indexOf(c[a.row-1][a.col])&&this.checkLink(c[a.row-1][a.col],b)}},
  90. initTileSet:function(){
  91. for(var a=e.tableRows,b=e.tileSet,c=0;c<a;c++){b[c]=[];
  92. for(var d= 0;d<a;d++)b[c][d]=[]}},
  93. initBlocks:function()
  94. {
  95. for(var a=e.tileSet,b=this,c=e.el,d=a.length,f=0;f<d;f++)
  96. for(var g=a[f].length,h=0;h<g;h++){
  97. var l=this.createBlock(Math.floor(5*Math.random()),f,h);
  98. l.onmouseover=function(){b.mouseOver(this)};
  99. l.onclick=function(){b.mouseClick()};
  100. a[f][h]=l;
  101. c.appendChild(l)}
  102. this.refresh()},
  103. refresh:function()
  104. {for(var a=e.tileSet,b=0;b<a.length;b++)
  105. for(var c=a[b].length,d=0;d<c;d++)
  106. {var f=a[b][d];
  107. null!=f&&(f.row=b,f.col=d,f.style.left=a[b][d].col*e.tileWidth+"rem",f.style.bottom=
  108. a[b][d].row*e.tileHeight+"rem",f.style.backgroundImage="url('./images/"+a[b][d].number+".png')")
  109. }
  110. }
  111. ,createBlock:function(a,b,c){return new u(a,b,c)
  112. }
  113. }
  114. ;m.prototype.init.prototype=m.prototype;window.PopStar=m
  115. })();
复制代码
resize.js
  1. // JavaScript Document
  2. (function px2rem(doc, win) {
  3.   var docEl = doc.documentElement,
  4.     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  5.     recalc = function () {
  6.       var clientWidth = docEl.clientWidth;
  7.       if (!clientWidth) return;
  8.       docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
  9.       /*
  10.        * 100 -> html,body { font-size:100px; }
  11.        * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面
  12.        * 根据具体情况改变这两个数值
  13.        */
  14.     };
  15.   if (!doc.addEventListener) return;
  16.   // 窗口大小发生变化,初始化
  17.   win.addEventListener(resizeEvt, recalc, false);
  18.   doc.addEventListener('DOMContentLoaded', recalc, false);
  19.   //防止在html未加载完毕时执行,保证获取正确的页宽
  20.   setTimeout(function(){
  21.     px2rem(doc, win);
  22.   }, 200);
  23. })(document, window);
复制代码
countUp.js
  1. (function(root, factory) {
  2. if (typeof define === 'function' && define.amd) {
  3.   define(factory);
  4. } else if (typeof exports === 'object') {
  5.   module.exports = factory(require, exports, module);
  6. } else {
  7.   root.CountUp = factory();
  8. }
  9. }(this, function(require, exports, module) {
  10. /*
  11.         countUp.js
  12.         by @inorganik
  13. */
  14. // target = id of html element or var of previously selected html element where counting occurs
  15. // startVal = the value you want to begin at
  16. // endVal = the value you want to arrive at
  17. // decimals = number of decimal places, default 0
  18. // duration = duration of animation in seconds, default 2
  19. // options = optional object of options (see below)
  20. var CountUp = function(target, startVal, endVal, decimals, duration, options) {
  21.         var self = this;
  22.         self.version = function () { return '1.9.3'; };
  23.        
  24.         // default options
  25.         self.options = {
  26.                 useEasing: true, // toggle easing
  27.                 useGrouping: true, // 1,000,000 vs 1000000
  28.                 separator: ',', // character to use as a separator
  29.                 decimal: '.', // character to use as a decimal
  30.                 easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
  31.                 formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
  32.                 prefix: '', // optional text before the result
  33.                 suffix: '', // optional text after the result
  34.                 numerals: [] // optionally pass an array of custom numerals for 0-9
  35.         };
  36.         // extend default options with passed options object
  37.         if (options && typeof options === 'object') {
  38.                 for (var key in self.options) {
  39.                         if (options.hasOwnProperty(key) && options[key] !== null) {
  40.                                 self.options[key] = options[key];
  41.                         }
  42.                 }
  43.         }
  44.         if (self.options.separator === '') {
  45.                 self.options.useGrouping = false;
  46.         }
  47.         else {
  48.                 // ensure the separator is a string (formatNumber assumes this)
  49.                 self.options.separator = '' + self.options.separator;
  50.         }
  51.         // make sure requestAnimationFrame and cancelAnimationFrame are defined
  52.         // polyfill for browsers without native support
  53.         // by Opera engineer Erik Möller
  54.         var lastTime = 0;
  55.         var vendors = ['webkit', 'moz', 'ms', 'o'];
  56.         for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  57.                 window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  58.                 window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  59.         }
  60.         if (!window.requestAnimationFrame) {
  61.                 window.requestAnimationFrame = function(callback, element) {
  62.                         var currTime = new Date().getTime();
  63.                         var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  64.                         var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
  65.                         lastTime = currTime + timeToCall;
  66.                         return id;
  67.                 };
  68.         }
  69.         if (!window.cancelAnimationFrame) {
  70.                 window.cancelAnimationFrame = function(id) {
  71.                         clearTimeout(id);
  72.                 };
  73.         }
  74.         function formatNumber(num) {
  75.                 var neg = (num < 0),
  76.             x, x1, x2, x3, i, len;
  77.                 num = Math.abs(num).toFixed(self.decimals);
  78.                 num += '';
  79.                 x = num.split('.');
  80.                 x1 = x[0];
  81.                 x2 = x.length > 1 ? self.options.decimal + x[1] : '';
  82.                 if (self.options.useGrouping) {
  83.                         x3 = '';
  84.                         for (i = 0, len = x1.length; i < len; ++i) {
  85.                                 if (i !== 0 && ((i % 3) === 0)) {
  86.                                         x3 = self.options.separator + x3;
  87.                                 }
  88.                                 x3 = x1[len - i - 1] + x3;
  89.                         }
  90.                         x1 = x3;
  91.                 }
  92.                 // optional numeral substitution
  93.                 if (self.options.numerals.length) {
  94.                         x1 = x1.replace(/[0-9]/g, function(w) {
  95.                                 return self.options.numerals[+w];
  96.                         })
  97.                         x2 = x2.replace(/[0-9]/g, function(w) {
  98.                                 return self.options.numerals[+w];
  99.                         })
  100.                 }
  101.                 return (neg ? '-' : '') + self.options.prefix + x1 + x2 + self.options.suffix;
  102.         }
  103.         // Robert Penner's easeOutExpo
  104.         function easeOutExpo(t, b, c, d) {
  105.                 return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
  106.         }
  107.         function ensureNumber(n) {
  108.                 return (typeof n === 'number' && !isNaN(n));
  109.         }
  110.         self.initialize = function() {
  111.                 if (self.initialized) return true;
  112.                
  113.                 self.error = '';
  114.                 self.d = (typeof target === 'string') ? document.getElementById(target) : target;
  115.                 if (!self.d) {
  116.                         self.error = '[CountUp] target is null or undefined'
  117.                         return false;
  118.                 }
  119.                 self.startVal = Number(startVal);
  120.                 self.endVal = Number(endVal);
  121.                 // error checks
  122.                 if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
  123.                         self.decimals = Math.max(0, decimals || 0);
  124.                         self.dec = Math.pow(10, self.decimals);
  125.                         self.duration = Number(duration) * 1000 || 2000;
  126.                         self.countDown = (self.startVal > self.endVal);
  127.                         self.frameVal = self.startVal;
  128.                         self.initialized = true;
  129.                         return true;
  130.                 }
  131.                 else {
  132.                         self.error = '[CountUp] startVal ('+startVal+') or endVal ('+endVal+') is not a number';
  133.                         return false;
  134.                 }
  135.         };
  136.         // Print value to target
  137.         self.printValue = function(value) {
  138.                 var result = self.options.formattingFn(value);
  139.                 if (self.d.tagName === 'INPUT') {
  140.                         this.d.value = result;
  141.                 }
  142.                 else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
  143.                         this.d.textContent = result;
  144.                 }
  145.                 else {
  146.                         this.d.innerHTML = result;
  147.                 }
  148.         };
  149.         self.count = function(timestamp) {
  150.                 if (!self.startTime) { self.startTime = timestamp; }
  151.                 self.timestamp = timestamp;
  152.                 var progress = timestamp - self.startTime;
  153.                 self.remaining = self.duration - progress;
  154.                 // to ease or not to ease
  155.                 if (self.options.useEasing) {
  156.                         if (self.countDown) {
  157.                                 self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
  158.                         } else {
  159.                                 self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
  160.                         }
  161.                 } else {
  162.                         if (self.countDown) {
  163.                                 self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration));
  164.                         } else {
  165.                                 self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
  166.                         }
  167.                 }
  168.                 // don't go past endVal since progress can exceed duration in the last frame
  169.                 if (self.countDown) {
  170.                         self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
  171.                 } else {
  172.                         self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
  173.                 }
  174.                 // decimal
  175.                 self.frameVal = Math.round(self.frameVal*self.dec)/self.dec;
  176.                 // format and print value
  177.                 self.printValue(self.frameVal);
  178.                 // whether to continue
  179.                 if (progress < self.duration) {
  180.                         self.rAF = requestAnimationFrame(self.count);
  181.                 } else {
  182.                         if (self.callback) self.callback();
  183.                 }
  184.         };
  185.         // start your animation
  186.         self.start = function(callback) {
  187.                 if (!self.initialize()) return;
  188.                 self.callback = callback;
  189.                 self.rAF = requestAnimationFrame(self.count);
  190.         };
  191.         // toggles pause/resume animation
  192.         self.pauseResume = function() {
  193.                 if (!self.paused) {
  194.                         self.paused = true;
  195.                         cancelAnimationFrame(self.rAF);
  196.                 } else {
  197.                         self.paused = false;
  198.                         delete self.startTime;
  199.                         self.duration = self.remaining;
  200.                         self.startVal = self.frameVal;
  201.                         requestAnimationFrame(self.count);
  202.                 }
  203.         };
  204.         // reset to startVal so animation can be run again
  205.         self.reset = function() {
  206.                 self.paused = false;
  207.                 delete self.startTime;
  208.                 self.initialized = false;
  209.                 if (self.initialize()) {
  210.                         cancelAnimationFrame(self.rAF);
  211.                         self.printValue(self.startVal);
  212.                 }
  213.         };
  214.         // pass a new endVal and start animation
  215.         self.update = function (newEndVal) {
  216.                 if (!self.initialize()) return;
  217.                 newEndVal = Number(newEndVal);
  218.                 if (!ensureNumber(newEndVal)) {
  219.                         self.error = '[CountUp] update() - new endVal is not a number: '+newEndVal;
  220.                         return;
  221.                 }
  222.                 self.error = '';
  223.                 if (newEndVal === self.frameVal) return;
  224.                 cancelAnimationFrame(self.rAF);
  225.                 self.paused = false;
  226.                 delete self.startTime;
  227.                 self.startVal = self.frameVal;
  228.                 self.endVal = newEndVal;
  229.                 self.countDown = (self.startVal > self.endVal);
  230.                 self.rAF = requestAnimationFrame(self.count);
  231.         };
  232.         // format startVal on initialization
  233.         if (self.initialize()) self.printValue(self.startVal);
  234. };
  235. return CountUp;
  236. }));
复制代码

index.css
  1. a,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,label,li,ol,p,span,table,td,textarea,th,tr,ul
  2. {        -webkit-box-sizing:border-box;
  3.         -moz-box-sizing:border-box;box-sizing:border-box;
  4.         margin:0;padding:0;
  5.         border:0;-webkit-tap-highlight-color:transparent
  6. }
  7. body,html{
  8.         width:100%;min-height:100%;background-color:#fff;
  9.         -webkit-user-select:none;
  10.         -moz-user-select:none;
  11.         -ms-user-select:none;
  12.         user-select:none
  13. }
  14. body
  15. {color:#333;
  16. font-family:微软雅黑
  17. }
  18. h1,h2,h3,h4,h5,h6
  19. {
  20. font-weight:400;
  21. font-size:100%
  22. }
  23. a{
  24. color:#555
  25. }
  26. a,a:hover{
  27. text-decoration:none
  28. }
  29. img{
  30. border:none
  31. }
  32. li,ol,ul{
  33. list-style:none
  34. }
  35. input,textarea{
  36. outline:0;
  37. -webkit-appearance:none
  38. }
  39. ::-webkit-input-placeholder{
  40. color:#b0b0b0
  41. }
  42. :-moz-placeholder,::-moz-placeholder{
  43. color:#b0b0b0
  44. }
  45. :-ms-input-placeholder{
  46. color:#b0b0b0
  47. }
  48. [v-cloak]{
  49. display:none
  50. }
  51. .lucky-star{
  52. position:fixed;
  53. top:0;left:0;width:100%;
  54. height:100%;
  55. background-image:url(../images/cover.jpg);background-size:cover;background-repeat:no-repeat;font-size:0;
  56. -moz-background-size:cover;
  57. -o-background-size:cover
  58. }
  59. .score-target
  60. {
  61. padding:0 .3rem;height:1.5rem;
  62. -webkit-box-pack:justify;
  63. -webkit-justify-content:space-between;
  64. -moz-box-pack:justify;
  65. -ms-flex-pack:justify;
  66. justify-content:space-between
  67. }
  68. .score-current,.score-target{
  69. display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;
  70. display:flex;width:100%;
  71. color:#fff;font-size:.24rem;
  72. -webkit-box-align:center;
  73. -webkit-align-items:center;
  74. -moz-box-align:center;
  75. -ms-flex-align:center;
  76. align-items:center
  77. }
  78. .score-current{
  79. position:absolute;top:.3rem;
  80. -webkit-box-orient:vertical;
  81. -webkit-box-direction:normal;
  82. -webkit-flex-direction:column;
  83. -moz-box-orient:vertical;
  84. -moz-box-direction:normal;
  85. -ms-flex-direction:column;
  86. flex-direction:column;
  87. -webkit-box-pack:center;
  88. -webkit-justify-content:center;
  89. -moz-box-pack:center;
  90. -ms-flex-pack:center;
  91. justify-content:center
  92. }
  93. .score-current span{
  94. color:#fffc0f;
  95. font-size:.48rem
  96. }
  97. .score-select{
  98. width:100%;
  99. color:#fff;
  100. text-align:center;
  101. font-size:.28rem;opacity:0;
  102. -webkit-transition:opacity 1s;
  103. -moz-transition:opacity 1s;
  104. -o-transition:opacity 1s;
  105. transition:opacity 1s
  106. }
  107. .star-list{
  108. position:fixed;
  109. bottom:0;left:0;
  110. width:100%;
  111. height:70%}
  112. .star-list li{
  113. position:absolute;
  114. width:.75rem;
  115. height:.75rem;
  116. border:0;
  117. -webkit-border-radius:.16rem;
  118. -moz-border-radius:.16rem;
  119. border-radius:.16rem;
  120. background-size:cover;
  121. -webkit-transition:left .3s,bottom .3s,-webkit-transform .3s;-moz-transition:transform .3s,left .3s,bottom .3s,-moz-transform .3s;-o-transition:left .3s,bottom .3s,-o-transform .3s;transition:left .3s,bottom .3s,-webkit-transform .3s;transition:transform .3s,left .3s,bottom .3s;transition:transform .3s,left .3s,bottom .3s,-webkit-transform .3s,-moz-transform .3s,-o-transform .3s;
  122. -moz-background-size:cover;
  123. -o-background-size:cover
  124. }
  125. .star-list li.scale{
  126. border:2px solid #bfefff;
  127. -webkit-animation:scale .3s linear infinite alternate;
  128. -moz-animation:scale .3s linear infinite alternate;
  129. -o-animation:scale .3s linear infinite alternate;animation:scale .3s linear infinite alternate}
  130. .star-list li img{position:absolute;top:15%;left:15%;width:70%;height:70%
  131. }@-webkit-keyframes scale{
  132. 0%{-webkit-transform:scale(1);transform:scale(1)
  133. }
  134. to{
  135. -webkit-transform:scale(.95);
  136. transform:scale(.95)
  137. }
  138. }
  139. @-moz-keyframes scale{
  140. 0%{
  141. -moz-transform:scale(1);
  142. transform:scale(1)}
  143. to{
  144. -moz-transform:scale(.95);
  145. transform:scale(.95)
  146. }
  147. }
  148. @-o-keyframes scale{
  149. 0%{
  150. -o-transform:scale(1);
  151. transform:scale(1)
  152. }
  153. to{
  154. -o-transform:scale(.95);transform:scale(.95)
  155. }
  156. }
  157. @keyframes scale{
  158. 0%{
  159. -webkit-transform:scale(1);
  160. -moz-transform:scale(1);
  161. -o-transform:scale(1);
  162. transform:scale(1)
  163. }
  164. to
  165. {
  166. -webkit-transform:scale(.95);
  167. -moz-transform:scale(.95);
  168. -o-transform:scale(.95);transform:scale(.95)
  169. }
  170. }
复制代码
.DS_Store
到此这篇关于JavaScript实现消消乐-源代码的文章就介绍到这了,更多相干js实现消消乐内容请搜刮草根技能分享从前的文章或继续欣赏下面的相干文章希望大家以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作