玩个球

马黑黑 · 发表于 2025-11-8 12:03

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-11-8 13:00 编辑

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>玩个球</title> <style> .parent { margin: 20px auto; padding: 10px; width: 80vw; height: 80vh; border: 1px solid gray; user-select: none; overflow: hidden; position: relative; } .parent::before { content: '添加的球球可以在框内自由拖动'; } .son { --bg1: #998d21; --bg2: #229dee; position: absolute; width: 100px; height: 100px; background: linear-gradient(var(--bg1), var(--bg2)); border-radius: 50%; cursor: move; display: grid; place-items: center; } .moving { animation: escape var(--du) forwards; } .tMid { text-align: center; } #btnAdd { transform: translateX(100px); } @keyframes escape { to { left: var(--xx); top: var(--yy); } } </style> </head> <body> <div id="pa" class="parent"></div> <p class="tMid"><input type="button" id="btnAdd" value="添加球球" /></p> <script> const pa = document.getElementById('pa'); const sons = []; let dragger = null; let offsetX, offsetY, counter = 0; const startDrag = (e) => { const target = e.target.closest('.son'); if (!target) return; dragger = target; offsetX = e.clientX - target.offsetLeft; offsetY = e.clientY - target.offsetTop; e.preventDefault(); }; const doDrag = (e) => { if (!dragger) return; let newX = e.clientX - offsetX; let newY = e.clientY - offsetY; const maxX = pa.offsetWidth - dragger.offsetWidth; const maxY = pa.offsetHeight - dragger.offsetHeight; newX = Math.max(0, Math.min(newX, maxX)); newY = Math.max(0, Math.min(newY, maxY)); dragger.style.left = newX + 'px'; dragger.style.top = newY + 'px'; }; const stopDrag = () => dragger = null; const endAnimation = () => { sons.forEach(son => { son.onanimationend = () => { pa.removeChild(son); const rest = document.querySelectorAll('.son'); if (rest.length < 1) { sons.length = 0; counter = 0; btnAdd.disabled = false; } } }); }; pa.addEventListener('touchstart', (e) => { const touch = e.touches[0]; const mouseEvent = new MouseEvent('mousedown', { clientX: touch.clientX, clientY: touch.clientY }); startDrag(mouseEvent); }); document.addEventListener('touchmove', (e) => { if (!dragger) return; const touch = e.touches[0]; const mouseEvent = new MouseEvent('mousemove', { clientX: touch.clientX, clientY: touch.clientY }); doDrag(mouseEvent); e.preventDefault(); }); btnAdd.addEventListener('click', () => { counter ++; if (counter > 10) { sons.forEach(son => { son.classList.add('moving'); }); btnAdd.disabled = true; endAnimation(); return; } const son = document.createElement('div'); son.innerText = counter; son.classList.add('son'); son.style.cssText += ` left: ${Math.floor(Math.random() * (pa.offsetWidth - 100))}px; top: ${Math.floor(Math.random() * (pa.offsetHeight - 100))}px; --bg1: #${Math.random().toString(16).substring(2,8)}; --bg2: #${Math.random().toString(16).substring(2,8)}; --du: ${Math.random() * 4 + 2}s; --xx: ${(Math.random() > 0.5 ? 1 : -1) * window.innerWidth}px; --yy: ${(Math.random() > 0.5 ? 1 : -1) * window.innerHeight}px; `; pa.appendChild(son); sons.push(son); }); pa.addEventListener('mousedown', startDrag); document.addEventListener('mousemove', doDrag); document.addEventListener('mouseup', stopDrag); document.addEventListener('touchend', stopDrag); </script> </body> </html>

马黑黑 · 发表于 2025-11-8 12:08

玩法：点击代码框右上角“预览”按钮，进入预览模态界面，在该界面点击“添加球球”按钮，主框内会添加随机渐变颜色的球，每点击一次加一个小球。所有添加上去的小球，均可以自由地在框内拖曳。加到一定数量，球球们会跑开，跑的最慢的球球跑到安全地带之后程序重置，可以接着再玩。

马黑黑 · 发表于 2025-11-8 12:20

实现原理：

一、拖动小球

以改变小球的位置即 left 和 top 属性值达成拖曳的目的。程序监听鼠标指针按下、移动、松开三个事件，不同的事件处理不同的业务，比如按下鼠标左键且按在任意一个小球之上，触发小球可以拖曳条件，此时若不松开按键且移动鼠标指针，小球会跟着鼠标指针走，而松开鼠标指针后小球可移动条件消失、小球不会再跟着鼠标指针走。

二、小球动画

当小球加满10个，再点击“添加球球”按钮，触发小球逃亡动画，它们会四散而去。当最后一个小球的动画运行完毕，重置数据到初始化状态，这时一切可以从头再来。

CSS设计+JS实现机制是开发类似东东的关键。不过这只是一个简单的案例，尚不具备游戏雏形状态，玩玩而已。真要开发游戏，一楼代码展现出来的思路行不通，需要复杂成百上千倍的设计。