基于JS实现接粽子小游戏的示例代码

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

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%;
}

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

<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;
	})
})

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)
	}
})