端午节尽管曾经过了，然而美妙的生存以旧在持续。这里用 JS 实现了一个简略的接粽子小游戏，寓意美妙接粽而至。能接到多少粽子，齐全看你手速，不必放心端午没粽子了。线上体验地址

游戏设计

在游戏屏幕内，会随机的从顶部掉落粽子，通过鼠标挪动到粽子上并点击，胜利接住粽子，失去积分。在设置面板中，能够设置游戏难度，分为简略、很难、超级难三种等级，不同等级的积分也是不同的，玩家可依据本人的手速进行设置。游戏完结后，可看到本人的问题。实现进去的成果如下：

游戏实现

增加粽子元素

在游戏屏幕内，须要源源不断的增加咱们的配角--粽子大哥，能够让玩家点击，并且能够移除掉被点击的粽子元素。

<div id="app">    <div class="main"></div></div>

把 div.mian 来作为游戏主区域，粽子元素增加到该区域中。应用 document.createElement 来创立一个 img 元素，并设置图片地址，款式类，以及该粽子的初始地位。这里用 Math.random() 来给粽子一个随机的初始 left 值。监听粽子元素的点击事件，当被点击时则移除该元素，示意粽子已被玩家接住了。

let main = document.querySelector('.main');function addElement(){    let elem = document.createElement('img');    elem.src = 'zongzi.png';    elem.classList.add('zongzi');    elem.style.left = Math.random()*730 + 'px';    main.appendChild(elem);    elem.addEventListener('click', function(){        main.removeChild(elem)    })}
.zongzi{    position: absolute;    top: -70px;    width: 70px;    height: 70px;    background-color: #ff9900;    border-radius: 50%;}

该款式给粽子设置了宽高，当咱们设置游戏难度时，咱们能够动静扭转粽子的宽高，粽子越大，越容易被点击到，所以难度越高时，能够调小粽子的宽高，须要更厉害的手速才有可能点击到。

粽子掉落

掉落动画没加什么动效，所以比较简单，用 animation 实现一个元素从上到下的直线挪动过渡成果。

.main{    position: relative;    width: 800px;    height: 500px;    background-color: #2b4650;    overflow: hidden;}.zongzi{    ... ...    animation: move 3s ease-in;}@keyframes move {    to{        transform: translateY(570px);    }}

translateY(570px) 纵向位移 570，是为了保障没被点击到的粽子齐全来到了游戏主区域才算隐没。

难度抉择

应用 input[type=radio] 元素供玩家抉择难度。平时用惯了组件，对于原生的 radio 抉择实现，你还记得多少？跟着一起温习一遍吧

<div class="difficulty">    <span>难度：</span>    <input type="radio" name="difficulty" value="1" checked>简略    <input type="radio" name="difficulty" value="2">很难    <input type="radio" name="difficulty" value="3">超级难</div>
let difficulty = 1; // 用来示意以后难度等级let radios = document.querySelectorAll('input[type=radio]');radios.forEach(radio => {    radio.addEventListener('change', function(){        difficulty = radio.value;    })})

监听 radio 元素的 change 事件，而不是 click 事件，因为 click 反复点击时还会持续触发，不是咱们须要的。只有在难度等级发生变化时才须要触发。

当难度变动时，次要是扭转粽子的大小和着落速度来实现玩家更难接住粽子，依据 difficulty 值来设置粽子元素的款式类。

let elem = document.createElement('img');elem.src = 'zongzi.png';elem.classList.add('zongzi' + difficulty);
.zongzi1{    ... ...    width: 70px;    height: 70px;    animation: move 3s ease-in;}.zongzi2{    ... ...    width: 50px;    height: 50px;    animation: move 2s ease-in;}.zongzi3{    ... ...    width: 40px;    height: 40px;    animation: move 1s ease-in;}

开始游戏

游戏开始时，进入倒计时，粽子开始掉落，并计算玩家得分。

<div id="app">    <div class="main">        <div class="time">            倒计时：<span>30</span>s        </div>    </div>    <div class="setting">        <div class="difficulty mgb10">            ... ...        </div>        <div class="btn">开始游戏</div>        <div class="result">总分：<span>0</span></div>    </div></div>
let result = 0;let btn = document.querySelector('.btn');let time = document.querySelector('.time span');let isStart = false;btn.addEventListener('click', function(){    if(!isStart){        isStart = true;        result = 0;        let elemId = setInterval(function(){            addElement();        }, 500)        let timeNumber = 30;        let numberId = setInterval(function(){            timeNumber -= 1;            time.innerHTML = timeNumber;            if(timeNumber <= 0){                clearInterval(numberId);                clearInterval(elemId);                isStart = false;                alert('游戏完结');            }        }, 1000)    }})

总结

整体实现还是比较简单的，不过也还是存在很多能够优化的中央。像点击粽子后，能够有一些接住的成果后再隐没，粽子的掉落门路，能够多一些花色等，能够给游戏减少一些乐趣。