原生JS实现扣扣表情大战小游戏demo

之前学习js的时候看到的小游戏，觉得挺好玩的，就试试了~

效果图：

html部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            input {
                position: absolute;
                left: 0;
                right: 0;
                top: -532px;
                bottom: 0;
                width: 100px;
                height: 30px;
                margin: auto;
            }
            .box {
                width: 600px;
                height: 400px;
                border: 1px solid #88282a;
                position: relative;
                left: 0;
                right: 0;
                top: 100px;
                bottom: 0;
                margin: auto;
            }
            .box > div {
                position: absolute;
                right: 0px;
                top: -100px;
                width: 120px;
                height: 100px;
                overflow: hidden;
            }
            .box > img {
                position: absolute;
                left: 0px;
                top: -24px;
            }
            input[type="checkbox"] {
                display: block;
            }
        </style>
    </head>
    <body>
        
        <div class="box">
            <input type="button" value="开始游戏" />
            <img src="" alt="" />
            <div class="grade">
                <p>得分：0</p>
                <p>失分：0</p>
            </div>
        </div>

    </body>
</html>

js部分：

        <script>
            window.onload = function(){
                var btn = document.getElementsByTagName('input')[0];
                var obox = document.querySelector('.box');
                var oimg = obox.querySelector('img');
                var ograde = document.querySelector('.grade');
                var op1 = ograde.children[0];
                var op2 = ograde.children[1];
                var qq = {
                    srcrandom: 1, // 随机出现的图片地址
                    leftrandom: 0, // 随机出现的图片的left值
                    topnum: 0, // 图片的top值
                    timer: null, // 设置定时器
                    speed: 200, // 图片下降速度
                    grade: 0, // 记录成绩
                    init: function(){
                        var _this = this;
                        oimg.style.display = 'block';
                        _this.srcrandom = Math.round(Math.random()*11+1); // 取值在1~12
                        _this.leftrandom = Math.round(Math.random()*578); // 取值在0~578
                        btn.value = '游戏进行中...';
                        oimg.src='img/'+ _this.srcrandom +'.png';
                        oimg.style.left = _this.leftrandom +'px';
                        oimg.style.top = _this.topnum +'px';
                        clearInterval(_this.timer);
                        _this.timer = setInterval(function(){
                            if (_this.topnum > 377) {
                                clearInterval(_this.timer);
                                alert('游戏结束');
                                btn.disabled = '';
                                btn.value = '开始游戏';
                                oimg.style.display = 'none';
                            } else {
                                oimg.style.top = _this.topnum +'px';
                                _this.topnum += 10;
                            }
                        }, _this.speed);
                    }
                };
                btn.onclick = function(){
                    qq.grade = 0;
                    op1.innerHTML = '得分：'+ qq.grade;
                    qq.topnum = 0;
                    this.disabled = 'disabled';
                    qq.init();
                }
                oimg.onmouseover = function(){
                    qq.grade += 5;
                    op1.innerHTML = '得分：'+ qq.grade;
                    qq.topnum = 0;
                    qq.init();
                }
            }
        </script>

原生JS实现扣扣表情大战小游戏demo

猜你喜欢