JS小游戏之接粽子

各位小伙伴们，端午节都吃粽子了吗？吃完粽子，来一起用代码做个接粽子小游戏吧！

游戏规则

        选择难度后点击开始，倒计时30秒内会掉落粽子，点击粽子可得分，简单得10分，很难得20分，超级难得30，倒计时结束后游戏结束。

 实现思路

静态页面及样式

        * {
            padding: 0;
            margin: 0;
        }

        #app {
            display: flex;
            flex-direction: row;
        }

        .main {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: #2b4650;
            overflow: hidden;
        }

        .time {
            position: absolute;
            right: 0;
            top: 0;
            width: 100px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            text-align: center;
            z-index: 10;
        }

        .setting {
            width: 300px;
            height: 100vh;
            background-color: #08A5DA;
            padding: 10px;
            box-sizing: border-box;
            font-size: 16px;
        }

        .title {
            font-size: 20px;
            color: #000;
            text-align: center;
            font-weight: bold;
            line-height: 40px;
        }
        .rule{
            font-size: 14px;
            line-height: 24px;
            font-weight: bolder;
            color: aliceblue;
        }

<div id="app">
        <div class="main">
            <div class="time">
                倒计时：<span>30</span>s
            </div>
        </div>
        <div class="setting">
            <div class="title mgb10">设置面板</div>
            <div class="difficulty mgb10">
                <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>
            <div class="rule mgb10">&emsp;&emsp;游戏说明：选择难度后点击开始，倒计时30秒内会掉落粽子，点击粽子可得分，简单得10分，很难得20分，超级难得30，倒计时结束后游戏结束。</div>
            <div class="btn">开始游戏</div>
            <div class="result">总分：<span>0</span></div>
        </div>
    </div>

 开始游戏

        点击开始游戏，开始计时，时间30秒，页面上方开始随机掉落粽子，玩家通过点击粽子可获得积分，计时结束，弹出“时间结束”弹窗，粽子不再掉落。

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

游戏难度选择

        玩家通过点击单选框来选择游戏的难度，难度越高，粽子掉落越快，粽子体积也会相应减小，当然，获取积分也会更高，粽子掉落，以及掉落速度通过动画完成。有兴趣的小伙伴也可以自行调式或者再加一些额外的动画。

        .zongzi1 {
            position: absolute;
            top: -90px;
            width: 90px;
            height: 90px;
            background-color: #ff9900;
            border-radius: 50%;
            animation: move 3s ease-in;
        }

        .zongzi2 {
            position: absolute;
            top: -70px;
            width: 70px;
            height: 70px;
            background-color: #ff9900;
            border-radius: 50%;
            animation: move 2s ease-in;
        }

        .zongzi3 {
            position: absolute;
            top: -50px;
            width: 50px;
            height: 50px;
            background-color: #ff9900;
            border-radius: 50%;
            animation: move 1s ease-in;
        }

    // 难度选择
    let difficulty = 1;
    let radios = document.querySelectorAll('input[type=radio]');
    radios.forEach(radio => {
        radio.addEventListener('change', function () {
            difficulty = radio.value;
        })
    })

粽子生成以及点击粽子

         添加元素生成粽子，生成的粽子通过随机修改left值来决定粽子的初始位置，当然粽子是经过定位之后的。没有被点击到的粽子设置一个定时，时间到自动清除掉。点击到的粽子就清除定时器，然后就清除掉点击的元素，并获得积分然后计入到总分中。

    let main = document.querySelector('.main');
    let resultElem = document.querySelector('.result span');

    function addElement() {
        let elem = document.createElement('img');
        elem.src = zongzi;
        elem.classList.add('zongzi' + difficulty);
        elem.style.left = Math.random() * 730 + 'px'
        main.appendChild(elem);

        let timeid = setTimeout(function () {
            main.removeChild(elem)
        }, 2990)

        elem.addEventListener('mousedown', function () {
            clearTimeout(timeid)
            main.removeChild(elem)
            result += 10 * difficulty;
            resultElem.innerHTML = result;
        })
    }


    var zongzi = './images/20160611092617_ceZdk.jpeg'

结语

游戏设计大概思路就是这些，有兴趣的小伙伴们可以在这基础上继续添加一些好玩的新功能，最后，祝大家端午节快乐！

端午节简介

端午节，又称端阳节、龙舟节、重五节、天中节等，是集拜神祭祖、祈福辟邪、欢庆娱乐和饮食为一体的民俗大节。端午节源于自然天象崇拜，由上古时代祭龙演变而来。仲夏端午，苍龙七宿飞升于正南中央，处在全年最“中正”之位，正如《易经·乾卦》第五爻：“飞龙在天”。端午是“飞龙在天”吉祥日，龙及龙舟文化始终贯穿在端午节的传承历史中。

端午节是流行于中国以及汉字文化圈诸国的传统文化节日，传说战国时期的楚国诗人屈原在五月初五跳汨罗江自尽，后人亦将端午节作为纪念屈原的节日；也有纪念伍子胥、曹娥及介子推等说法。端午节的起源涵盖了古老星象文化、人文哲学等方面内容，蕴含着深邃丰厚的文化内涵，在传承发展中杂糅了多种民俗为一体，各地因地域文化不同而又存在着习俗内容或细节上的差异。

端午节与春节、清明节、中秋节并称为中国四大传统节日。端午文化在世界上影响广泛，世界上一些国家和地区也有庆贺端午的活动。2006年5月，国务院将其列入首批国家级非物质文化遗产名录；自2008年起，被列为国家法定节假日。2009年9月，联合国教科文组织正式批准将其列入《人类非物质文化遗产代表作名录》，端午节成为中国首个入选世界非遗的节日。