click小游戏demo

最新推荐文章于 2022-10-25 23:16:00 发布

naice138

最新推荐文章于 2022-10-25 23:16:00 发布

阅读量411

点赞数

分类专栏： web 文章标签：游戏

本文链接：https://blog.csdn.net/naihejiang/article/details/50677217

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{ margin: 0; padding: 0;}
            #box{
                width: 1100px;
                height: 600px;
                border: 1px solid firebrick;
                margin: 30px auto;
                position: relative;
                overflow: hidden;
            }
            #box span{
                border-radius: 50%;
                position: absolute;
                display: block;
                cursor: pointer;
            }
            #scord{
                text-align: center;
                font-size: 28px;
                color: firebrick;
            }
            #btn{
                position: absolute;
                left: 50%;
                width: 140px;
                text-align: center;
                border: 1px solid firebrick;
                color: firebrick;
                line-height: 60px;
                top: 300px;
                margin-left: -70px;
                cursor: pointer;
                transition: 0.3s;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var oBox = document.querySelector("#box");
                var oSord = document.querySelector("#scord");
                var oBtn = document.querySelector("#btn");
                var aDiv = oBox.getElementsByTagName("span");
                var num = 1;
                var scord = 0;
                var ON = false;
                var cArr = [];
                creatData();
                bind();
                //开始点击
                oBtn.onclick = function(){
                    this.style.transform = 'scale(0)';
                    if(ON){
                        num++;
                        cArr = [];
                        creatData();
                        ceatNode();
                    }else{
                        ceatNode();
                    }
                }
                //创建随机位置
                function creatData(){
                    for(var i = 0; i < num; i++){
                        var l = Math.floor(Math.random()*900)+100;
                        var t = -(Math.floor(Math.random()*20)+100);
                        var w = Math.floor(Math.random()*20)+50;
                        var c1 = Math.floor(Math.random()*255);
                        var c2 = Math.floor(Math.random()*255);
                        var c3 = Math.floor(Math.random()*255);
                        var speed = Math.floor(Math.random()*3)+1;
                        cArr.push({
                            l : l,
                            t : t,
                            w : w,
                            c1 : c1,
                            c2 : c2,
                            c3 : c3,
                            speed : speed
                        })
                    }
                }
                //创建节点
                function ceatNode(){
                    for(var i = 0; i < cArr.length; i++){
                        var oDiv = document.createElement("span");
                        oDiv.style.width = cArr[i].w+'px';
                        oDiv.style.height = cArr[i].w+'px';
                        oDiv.style.background = 'rgba('+cArr[i].c1+','+cArr[i].c2+','+cArr[i].c3+',1)';
                        oDiv.style.left = cArr[i].l+'px';
                        oDiv.style.top = cArr[i].t+'px';
                        oBox.appendChild(oDiv);
                        move(aDiv[i], cArr[i].speed, i)
                    }
                }
                //掉下运动
                function move(obj, s, Index){
                    clearInterval(obj.timer);
                    obj.timer = setInterval(function(){
                        obj.style.top = obj.offsetTop + s + 'px';
                        if(obj.offsetTop>600){
                            oBox.removeChild(obj);
                        }
                    },30);
                }
                //事件绑定
                function bind(){
                    oBox.onclick = function(e){
                        var e = e || window.event;  
                        var Target = e.srcElement || e.target;
                        if( Target.tagName.toUpperCase() == "SPAN" ){
                            Target.style.transition = "0.15s";
                            Target.style.transform = 'scale(2)';
                            var t = Target;
                            Target.addEventListener('transitionend', function(ev){
                                var ev = ev || window.event;
                                oBox.removeChild(t);
                                scord++;
                                oSord.innerHTML = '分数：'+scord;
                                if(oBox.children.length==0){
                                    oBtn.style.transform = 'scale(1)';
                                    oBtn.innerHTML = "下一关"+" "+'('+(num+1)+')';
                                    ON = true;
                                }
                                ev.stopPropagation();
                            })
                        }; 
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="box">

        </div>
        <div id="btn">开始</div>
        <div id="scord">分数：0</div>
    </body>
</html>

naice138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
click小游戏demo

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;} #box{ width:
复制链接

扫一扫

专栏目录