开年第一天，工作闲暇，写一个小游戏玩玩。

点击练习

第一步

首先呢，我们肯定是要准备一下面板和点击的对象啦

<--html-->
<main><main>

//style
.main{
 width: 100vw;
 height: 100vh;
 background-color: black;
 color: aliceblue;
 position: relative;
}

此时呢，就出现一个嘿嘿的面板啦。

然后准备一下点击对象：

//js
let getRandomPoint = () => {
  let point = document.createElement('div')
  point.className = 'point'
  let top = Math.random() * window.innerHeight
  let left = Math.random() * window.innerWidth
  point.style.top = (top > 50 ? top - 50 : 0) + 'px'
  point.style.left = (left > 50 ? left - 50 : 0) + 'px'  
return point
}

有了Node了，那么我们就把它渲染到页面上：

   let render = (Pnode, Cnode) => {
       let fragment = document.createDocumentFragment()
       fragment.appendChild(Cnode)
       Pnode.appendChild(fragment)
    }
   window.onload = () => { 
       var time = setInterval(() => {
           render(document.querySelector('main'), getRandomPoint())
       }, 1000)
       }

使用createDocumentFragment是为了提高性能，虽然本次没啥用，但是养成习惯了，哈哈。

第二步

可以创建一个对象，分别记录分数、级别、速度等信息。并用proxy来监听一下进行事件处理:

 let options = {
      core: 0, //分数
      level: 1, //等级
      hidenTime: 5, //消失的时间
     }
 let proxyOptins = new Proxy(options, {
      get: (target, key) => {
          return target[key]
      },
      set: (target, key, newValue)=> {
          target[key] = newValue;
          switch (key) {
              case 'core':
                  document.querySelector('.core').textContent = '分数：' + newValue       
                  break;
              case 'level':
                  document.querySelector('.level').textContent = 'level：' + newValue
                  break                    
          }
      }
  })

ok.到这时就可以处理一下点击事件了:

 let getRandomPoint = () => {
 let point = document.createElement('div')
 point.className = 'point'
 let top = Math.random() * window.innerHeight
 let left = Math.random() * window.innerWidth
 point.style.top = (top > 50 ? top - 50 : 0) + 'px'
 point.style.left = (left > 50 ? left - 50 : 0) + 'px'  
 +  point.addEventListener('click', (e) => {
 +         proxyOptins.core += 1
 +         point.remove()
 +   })
 +   setTimeout(() => {
 +         point.remove()
 +   }, proxyOptins.hidenTime * 1000)
return point
}

第三步

这时候就处理一下分数和难度之类的小问题：

//定义一下等级速率对照表
   let levelOptin = {
        1: 5,
        2: 4,
        3: 3,
        4: 2,
        5: 1,
        6: 0.8,
        7: 0.5
    }
    let proxyOptins = new Proxy(options, {
       ...      
            switch (key) {
                case 'core':
                    document.querySelector('.core').textContent = '分数：' + newValue
     +              mathLevel(newValue)
                    break;
        ...
    })
    let mathLevel = (core) => {
        //计算等级
        if (Math.floor(core / 10) + 1 > 8) {
            alert('恭喜您已通关！')
            clearInterval(time)
            time = null
        } else {
            proxyOptins.level = Math.floor(core / 10) + 1
            proxyOptins.hidenTime = levelOptin[proxyOptins.level]
        }
    }

作者感觉年纪大了，手速跟不上了，通关的小伙伴记得留个言哈！~

挑战的时候把代码隐藏掉，不然左侧点击不到。

下面时全篇代码

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击练习</title>
    <style>
        :root {
            --time: 1s
        }

        html,
        body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        main {
            width: 100vw;
            height: 100vh;
            background-color: black;
            color: aliceblue;
            position: relative;

        }

        .point {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #ccc;
            border: 1px solid #ccc;
            border-radius: 50%;
            cursor: pointer;
            animation: point 0.5s;

        }

        @keyframes point {
            0% {
                width: 0px;
                height: 0px;
            }

            100% {
                width: 50px;
                height: 50px;
            }
        }

        @keyframes hiden {
            to {
                opacity: 0;
            }
        }

        .core,
        .level {
            color: #fff;
            text-align: center;
        }
    </style>
</head>

<body>
    <main>
        <div class="level"></div>
        <div class="core"></div>
    </main>
    <script>
        let options = {
            core: 0, //分数
            level: 1, //等级
            hidenTime: 5, //消失的时间
        }

        let levelOptin = {
            1: 5,
            2: 4,
            3: 3,
            4: 2,
            5: 1,
            6: 0.8,
            7: 0.5
        }
        let proxyOptins = new Proxy(options, {
            get: (target, key) => {
                return target[key]
            },
            set: function (target, key, newValue) {
                target[key] = newValue;
                switch (key) {
                    case 'core':
                        document.querySelector('.core').textContent = '分数：' + newValue
                        mathLevel(newValue)
                        break;
                    case 'level':
                        document.querySelector('.level').textContent = 'level：' + newValue
                        break
                    default:
                        break;
                }
            }
        })

        let mathLevel = (core) => {
            //计算等级
            if (Math.floor(core / 10) + 1 > 8) {
                alert('恭喜您已通关！')
                clearInterval(time)
                time = null
            } else {
                proxyOptins.level = Math.floor(core / 10) + 1
                proxyOptins.hidenTime = levelOptin[proxyOptins.level]
            }
        }
        let init = () => {
            document.querySelector('.core').textContent = '分数：' + proxyOptins.core
            document.querySelector('.level').textContent = 'level：' + proxyOptins.level
        }
        let getRandomPoint = () => {
            let point = document.createElement('div')
            point.className = 'point'
            let top = Math.random() * window.innerHeight
            let left = Math.random() * window.innerWidth
            point.style.top = (top > 50 ? top - 50 : 0) + 'px'
            point.style.left = (left > 50 ? left - 50 : 0) + 'px'
            point.addEventListener('click', (e) => {
                proxyOptins.core += 1
                point.style.animation = 'hiden 0.5s';
                point.style.animationFillMode = 'forwards';
                point.setAttribute('status', '1') //记录是否点击
                setTimeout(() => {
                    point.remove()
                }, 500)
            })
            setTimeout(() => {
                point.attributes.status && point.attributes.status == 1 ? false : point.remove()
            }, proxyOptins.hidenTime * 1000)
            return point
        }

        let render = (Pnode, Cnode) => {
            let fragment = document.createDocumentFragment()
            fragment.appendChild(Cnode)
            Pnode.appendChild(fragment)
        }
        window.onload = () => {
            init()
            var time = setInterval(() => {
                render(document.querySelector('main'), getRandomPoint())
            }, 1000)
        }
    </script>
</body>

</html>

小玩意-点击练习（作者都没能通关,欢迎挑战）

点击练习

第一步

第二步

第三步