快捷導(dǎo)航

基于JS實(shí)現(xiàn)接粽子小游戲的示例代碼

更新時(shí)間：2022年05月30日 11:40:45 作者：黑暗迪迦

端午節(jié)馬上就到了，聽(tīng)說(shuō)你們公司沒(méi)發(fā)粽子大禮包？沒(méi)關(guān)系，這里用?JS實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的接粽子小游戲，能接到多少粽子，完全看你手速，快跟隨小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧

游戲設(shè)計(jì)

在游戲屏幕內(nèi)，會(huì)隨機(jī)的從頂部掉落粽子，通過(guò)鼠標(biāo)移動(dòng)到粽子上并點(diǎn)擊，成功接住粽子，得到積分。在設(shè)置面板中，可以設(shè)置游戲難度，分為簡(jiǎn)單、很難、超級(jí)難三種等級(jí)，不同等級(jí)的積分也是不同的，玩家可根據(jù)自己的手速進(jìn)行設(shè)置。游戲結(jié)束后，可看到自己的成績(jī)。實(shí)現(xiàn)出來(lái)的效果如下(可運(yùn)行代碼已發(fā)到碼上掘金，鏈接在文章底部，可進(jìn)入玩一玩)：

游戲?qū)崿F(xiàn)

添加粽子元素

在游戲屏幕內(nèi)，需要源源不斷的添加我們的主角--粽子大哥，可以讓玩家點(diǎn)擊，并且可以移除掉被點(diǎn)擊的粽子元素。

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

把 div.mian 來(lái)作為游戲主區(qū)域，粽子元素添加到該區(qū)域中。使用 document.createElement 來(lái)創(chuàng)建一個(gè) img 元素，并設(shè)置圖片地址，樣式類(lèi)，以及該粽子的初始位置。這里用 Math.random() 來(lái)給粽子一個(gè)隨機(jī)的初始 left 值。監(jiān)聽(tīng)粽子元素的點(diǎn)擊事件，當(dāng)被點(diǎn)擊時(shí)則移除該元素，表示粽子已被玩家接住了。

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

該樣式給粽子設(shè)置了寬高，當(dāng)我們?cè)O(shè)置游戲難度時(shí)，我們可以動(dòng)態(tài)改變粽子的寬高，粽子越大，越容易被點(diǎn)擊到，所以難度越高時(shí)，可以調(diào)小粽子的寬高，需要更厲害的手速才有可能點(diǎn)擊到。

粽子掉落

掉落動(dòng)畫(huà)沒(méi)加什么動(dòng)效，所以比較簡(jiǎn)單，用 animation 實(shí)現(xiàn)一個(gè)元素從上到下的直線(xiàn)移動(dòng)過(guò)渡效果。

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

translateY(570px) 縱向位移 570，是為了保證沒(méi)被點(diǎn)擊到的粽子完全離開(kāi)了游戲主區(qū)域才算消失。

難度選擇

使用 input[type=radio] 元素供玩家選擇難度。平時(shí)用慣了組件，對(duì)于原生的 radio 選擇實(shí)現(xiàn)，你還記得多少？跟著一起復(fù)習(xí)一遍吧

<div class="difficulty">
	<span>難度：</span>
	<input type="radio" name="difficulty" value="1" checked>簡(jiǎn)單
	<input type="radio" name="difficulty" value="2">很難
	<input type="radio" name="difficulty" value="3">超級(jí)難
</div>

let difficulty = 1; // 用來(lái)表示當(dāng)前難度等級(jí)
let radios = document.querySelectorAll('input[type=radio]');
radios.forEach(radio => {
	radio.addEventListener('change', function(){
		difficulty = radio.value;
	})
})

監(jiān)聽(tīng) radio 元素的 change 事件，而不是 click 事件，因?yàn)?click 重復(fù)點(diǎn)擊時(shí)還會(huì)繼續(xù)觸發(fā)，不是我們需要的。只有在難度等級(jí)發(fā)生變化時(shí)才需要觸發(fā)。

當(dāng)難度變化時(shí)，主要是改變粽子的大小和下落速度來(lái)實(shí)現(xiàn)玩家更難接住粽子，根據(jù) difficulty 值來(lái)設(shè)置粽子元素的樣式類(lèi)。

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

開(kāi)始游戲

游戲開(kāi)始時(shí)，進(jìn)入倒計(jì)時(shí)，粽子開(kāi)始掉落，并計(jì)算玩家得分。

<div id="app">
	<div class="main">
		<div class="time">
			倒計(jì)時(shí)：<span>30</span>s
		</div>
	</div>
	<div class="setting">
		<div class="difficulty mgb10">
			... ...
		</div>
		<div class="btn">開(kāi)始游戲</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('游戲結(jié)束');
			}
		}, 1000)
	}
})