钟摆小游戏的开发过程

框架

    
    
    
    
    


    
分数：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 = 9
    let index = 0
    const 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 + 1
        const 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设为10
			list[index].style.zIndex = ''
			list[nextIndex].style.zIndex = '10'
			if (index === max - 1) {
				index = 0
			} else {
				index++
			}
            // 得分+1
			score.innerHTML = parseInt(score.innerHTML) + 1
        } else if (score.innerHTML.indexOf('，') ===  - 1) {
			score.innerHTML += '，游戏结束'
		}
    }

调整游戏难度

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

完整代码

    
    
    
    
    


    
分数：0
	

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