框架

分数：0

 整个游戏我们都放在500 * 500 的区域中进行。 所以我们使用了 box-sizing属性，具体用法可见 盒子模型中box-sizing: border-box；的作用_Eric加油学！的博客-CSDN博客

得分圈和钟摆

分数：0

 首先获取到相应的元素，并设置一共9个得分圈，从正右边开始（0号），index从0起。

const data = Array.from(new Array(max)).map((v, i) => {// 均分角度const deg = i * 360 / max;return `
${i === index ? `
	
`:''}
`})
game.innerHTML = data.join('')

这段代码，就是利用JS添加这9个item得分圈。 并计算旋转角度，设置平移距离160px；

然后如果当前索引上有钟摆，我们添加钟摆，并为其设置动画。

tool 就是 得分圈上的钟摆座， tool-circle就是正在旋转的钟摆，我们利用 .tool:after 为其添加中间的杆  tool-name和curr分别是得分圈和钟摆的中心点

这里其实是用拼接innerHTML属性的字符串，各个字符串追加game里面，最后调用数组的join方法生成目标字符串 。 这种方法其实效率更高，但是可读性并不是很强。

也有最简单的方法，就是将元素先写好，然后再设置属性

1
2
3
4
5
6
7
8
9

    const game = document.querySelector('.game')const item = game.getElementsByClassName("item")const score = document.querySelector('#val')// 定义一圈设置9个得分点const max = 9let index = 0const data = Array.from(new Array(max)).map((v, i) => {// 均分角度const deg = i * 360 / max;item[i].style.webkitTransform = "rotate(" + deg + "deg)" + " translate(160px)";})

这里用JS设置transform属性，常用的setAttribute不起作用，可以使用：

element.style.webkitTransform = "40deg"

这种方法，看上去很清楚明了，但是效率最慢 

动态得分规则

当我们点击屏幕的时候，暂停动画，计算 当前摆锤的中心点位置 和 目标得分圈的中心点位置，由二者差值得出 是否成功得分。如果得分，将摆锤底座 添加至 下一个得分圈，重新开始动画，否则游戏结束。

document.onclick = () => {const tool = game.querySelector('.tool')// 动画暂停tool.classList.add('paused')// 计算下一个点const nextIndex = index === max - 1 ? 0 : index + 1const list = game.children// 当前摆锤的位置，获得其中心点位置const currRect = document.getElementById('curr').getBoundingClientRect()// 找到下一个得分圈的中心点const moveEl = list[nextIndex].querySelector('.item-name')// 下一个得分圈中心点位置信息const moveRect = moveEl.getBoundingClientRect()// 计算两者之间差值 （得分圈和钟摆大小差值为25）if(Math.abs(currRect.left - moveRect.left) < 15 && Math.abs(currRect.top - moveRect.top) < 15){// 摆锤 停的位置 是正确的// 将摆锤底座 添加到 下一个得分圈上list[nextIndex].appendChild(tool)// 移除 暂停状态tool.classList.remove('paused')// 清空当前状态的index，并将下一个得分圈的index设为10list[index].style.zIndex = ''list[nextIndex].style.zIndex = '10'if (index === max - 1) {index = 0} else {index++}// 得分+1score.innerHTML = parseInt(score.innerHTML) + 1} else if (score.innerHTML.indexOf('，') ===  - 1) {score.innerHTML += '，游戏结束'}}

调整游戏难度

如果想要调整游戏的难度，可以 设置 钟摆旋转动画的快慢，或者判定得分的差值大小。

完整代码

分数：0

参考：js实现钟摆小游戏_哔哩哔哩_bilibili