JS實現的接粽子小遊戲，願你好運接粽而至

linshuai發表於2022-06-09
JS遊戲

端午節雖然已經過了，但是美好的生活以舊在繼續。這裡用 JS 實現了一個簡單的接粽子小遊戲，寓意美好接粽而至。能接到多少粽子，完全看你手速，不用擔心端午沒粽子了。線上體驗地址

遊戲設計

在遊戲螢幕內，會隨機的從頂部掉落粽子，通過滑鼠移動到粽子上並點選，成功接住粽子，得到積分。在設定皮膚中，可以設定遊戲難度，分為簡單、很難、超級難三種等級，不同等級的積分也是不同的，玩家可根據自己的手速進行設定。遊戲結束後，可看到自己的成績。實現出來的效果如下：

遊戲實現

新增粽子元素

在遊戲螢幕內，需要源源不斷的新增我們的主角--粽子大哥，可以讓玩家點選，並且可以移除掉被點選的粽子元素。

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

把 div.mian 來作為遊戲主區域，粽子元素新增到該區域中。使用 document.createElement 來建立一個 img 元素，並設定圖片地址，樣式類，以及該粽子的初始位置。這裡用 Math.random() 來給粽子一個隨機的初始 left 值。監聽粽子元素的點選事件，當被點選時則移除該元素，表示粽子已被玩家接住了。

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

該樣式給粽子設定了寬高，當我們設定遊戲難度時，我們可以動態改變粽子的寬高，粽子越大，越容易被點選到，所以難度越高時，可以調小粽子的寬高，需要更厲害的手速才有可能點選到。

粽子掉落

掉落動畫沒加什麼動效，所以比較簡單，用 animation 實現一個元素從上到下的直線移動過渡效果。

.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，是為了保證沒被點選到的粽子完全離開了遊戲主區域才算消失。

難度選擇

使用 input[type=radio] 元素供玩家選擇難度。平時用慣了元件，對於原生的 radio 選擇實現，你還記得多少？跟著一起復習一遍吧

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

監聽 radio 元素的 change 事件，而不是 click 事件，因為 click 重複點選時還會繼續觸發，不是我們需要的。只有在難度等級發生變化時才需要觸發。

當難度變化時，主要是改變粽子的大小和下落速度來實現玩家更難接住粽子，根據 difficulty 值來設定粽子元素的樣式類。

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

總結

整體實現還是比較簡單的，不過也還是存在很多可以優化的地方。像點選粽子後，可以有一些接住的效果後再消失，粽子的掉落路徑，可以多一些花樣等，可以給遊戲增加一些樂趣。

相關文章