The small game of picking up rice dumplings realized by JS, I wish you good luck to pick up rice dumplings

Although the Dragon Boat Festival has passed, the good life continues. Here, a simple game of picking up rice dumplings is implemented with JS, which means that the beautiful rice dumplings are coming. How many zongzi you can receive depends entirely on your hand speed, so don't worry that there will be no more zongzi on the Dragon Boat Festival. Online experience address

game design

In the game screen, the dumplings will randomly drop from the top, move the mouse to the dumplings and click, successfully catch the dumplings and get points. In the setting panel, you can set the difficulty of the game, which is divided into three levels: easy, difficult, and super difficult. The points of different levels are also different, and players can set it according to their own hand speed. After the game is over, you can see your score. The effect achieved is as follows:

Game implementation

Add zongzi elements

In the game screen, we need to continuously add our protagonist, Big Brother Zongzi, which allows players to click and remove the clicked Zongzi elements.

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

div.mian as the main area of the game, and add the Zongzi element to this area. Use document.createElement to create an img element, and set the image address, style class, and the initial position of the dumpling. Here we use Math.random() to give Zongzi a random initial left value. Listen to the click event of the Zongzi element, and remove the element when it is clicked, indicating that the Zongzi has been caught by the player.

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

This style sets the width and height of the zongzi. When we set the difficulty of the game, we can dynamically change the width and height of the zongzi. The larger the zongzi, the easier it is to be clicked. Therefore, when the difficulty is higher, the width and height of the zongzi can be adjusted smaller. More powerful hand speed is possible to click.

dumplings fall

The drop animation does not add any dynamic effects, so it is relatively simple. Use animation to achieve a linear movement transition effect of an element from top to bottom.

 .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) vertical displacement is 570, which is to ensure that the rice dumplings that have not been clicked have completely left the main game area before they disappear.

Difficulty choice

Use the input[type=radio] element for the player to choose the difficulty. You are used to components, how much do you remember about the native radio implementation? Let's study it together

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

Listen to the change event of the radio element, not the click event, because the click will continue to fire when the click is repeated, which is not what we need. It only needs to be triggered when the difficulty level changes.

When the difficulty changes, it is mainly to change the size and falling speed of the zongzi to make it more difficult for players to catch the zongzi, and set the style class of the zongzi element according to the difficulty 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;
}

start the game

When the game starts, the countdown starts, the dumplings start to fall, and the player's score is calculated.

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

Summarize

The overall implementation is relatively simple, but there are still many places that can be optimized. For example, after clicking on the zongzi, there can be some catch effects and then disappear, the falling path of the zongzi can be more tricks, etc., which can add some fun to the game.