JS实现的一个捡粽子的小游戏，祝你捡粽子好运

时间：2023-03-28 00:16:38 HTML

虽然端午节已经过去，但美好的生活还在继续。这里用JS实现了一个简单的捡粽子的小游戏，寓意捡粽子有好事。能接多少个粽子完全取决于你的手速，所以不用担心端午节没有粽子。游戏画面中设计了在线体验地址游戏，粽子会从上方随机掉落，将鼠标移到粽子上点击，成功抓到粽子，即可获得积分。在设置面板中，可以设置游戏的难度，分为简单、困难、超困难三个级别。不同等级的点数也不同。玩家可以根据自己的手速进行设置。游戏结束后，你可以看到你的分数。实现的效果如下：游戏实现在游戏画面中添加粽子元素，需要不断添加我们的主角——粽子哥，玩家可以点击，点击的粽子元素可以移除。

使用div.mian作为游戏的主要区域，并在该区域添加粽子元素。使用document.createElement创建一个img元素，设置图片地址、样式类、饺子起始位置。这里使用Math.random()来给粽子一个随机的初始左值。监听粽子元素的点击事件，点击时移除该元素，表示粽子已经被玩家抓到。letmain=document.querySelector('.main');functionaddElement(){letelem=document.createElement('img');elem.src='粽子.png';elem.classList.add('粽子');elem.style.left=Math.random()*730+'px';main.appendChild(elem);elem.addEventListener('click',function(){main.removeChild(elem)})}.zongzi{position:absolute;顶部：-70px；宽度：70px；高度：70px；背景色：#ff9900；border-radius:50%;}该样式设置了粽子的宽高。当我们设置游戏的难度时，我们可以动态改变粽子的宽度和高度。粽子越大，就越容易被点到。因此，当难度较高时，可以将粽子的宽度和高度调小一些。需要更强的手速才能点击。下饺子动画没有添加动态效果，比较简单。使用动画实现元素从上到下直线移动的过渡效果。.main{位置：相对；宽度：800px；高度：500px；背景色：#2b4650；overflow:hidden;}.zongzi{......animation:move3sease-in;}@keyframesmove{to{transform:translateY(570px);}}translateY(570px)570的垂直位移是为了保证没有被点击的粽子在消失之前完全离开游戏的主区域。难度选择使用input[type=radio]元素供玩家选择难度。习惯了使用组件，原生radio选型和实现你还记得多少？一起回顾一下难度：简单困难超级困难

让difficulty=1;//用于指示当前的难度级别value;})})监听的是radio元素的change事件，不是click事件，因为click在重复点击的时候会继续触发，这不是我们需要的。它只需要在难度级别发生变化时触发。难度变化时，主要是改变粽子的大小和下落速度，让玩家更难抓到粽子，并根据难度值设置粽子元素的样式等级。letelem=document.createElement('img');elem.src='zongzi.png';elem.classList.add('粽子'+difficulty);.zongzi1{......width:70px;高度：70px；animation:move3sease-in;}.zongzi2{......width:50px;高度：50px；animation:move2sease-in;}.zongzi3{......width:40px;高度：40px；animation:move1sease-in;}Startthegame游戏开始后，进入倒计时，饺子开始下，计算玩家得分。倒计时：30s