游戏

最新推荐文章于 2023-06-11 09:51:49 发布

山河曦晨

最新推荐文章于 2023-06-11 09:51:49 发布

阅读量76

点赞数

分类专栏：笔记文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_53374733/article/details/126921943

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .wrap{
            width: 100vw;
            height: 100vh;background-color: skyblue;
            position: relative;
        }
        .wrap p{
            font-size: 30px;
        }
        .wrap>div{
            width: 800px;
            height: 120px;
            border-radius: 60px;
            background-color: rgba(255,255,255,.6);
            color: white;
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap>div .arraw{
            width: 60px;
            height: 60px;
            font-size: 50px;
            line-height: 60px;
            text-align: center;
            font-weight: 900;
        }
        .left{
            transform: rotate(180deg);
        }
        .top{
            transform: rotate(-90deg);
        }
        .bottom{
            transform: rotate(90deg);
        }
        .wrap>div .gold{
            color: gold;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p>关卡：<span class="level">1</span></p>
        <div>
            <!-- <p class="arraw right">→</p>
            <p class="arraw left">→</p>
            <p class="arraw top">→</p>
            <p class="arraw bottom">→</p> -->
        </div>
    </div>
</body>
<script>
    var d=document.querySelector(".wrap>div")

    var level=1;//当前关卡
    var index=0;//当前箭头的下标

    // 1.根据当前的关卡数来生成对应的箭头
    function setArraws(){
        // 清空箭头的容器
        d.innerHTML=''
        // 不允许超过10个箭头
        var n=level>10?10:level;
        for(var i=0;i<n;i++){
            var p=document.createElement("p");
            p.innerHTML="→";
            if(Math.random()>0.75){
                p.className="arraw left";
                p.myCode=37;
            }else if(Math.random()>0.5){
                p.className="arraw right";
                p.myCode=39;
            }else if(Math.random()>0.25){
                p.className="arraw top";
                p.myCode=38;
            }else{
                p.className="arraw bottom";
                p.myCode=40;
            }
            d.appendChild(p);
        }
    }
    setArraws()
    // 2.添加键盘事件
    window.onkeydown=function(e){
        var ps=document.querySelectorAll(".arraw");
        // var str='';
        // if(e.keyCode===37){
        //     str='left';
        // }else if(e.keyCode===38){
        //     str='top';
        // }else if(e.keyCode===39){
        //     str='right';
        // }else if(e.keyCode===40){
        //     str='bottom';
        // }

        // 按下空格 下一关
        if(e.keyCode===32&&index===ps.length){
            next();
        }

        if(ps[index].myCode==e.keyCode){
            // ps[index].className=`arraw ${str} gold`;
            ps[index].classList.add("gold");
            index++;
        }else{
            // 没按对
            for(var j=0;j<index;j++){
                // 把之前的黄色去掉
                ps[j].classList.remove("gold");
            }
            index=0;
        }
    }

    // 下一关
    function next(){
        // 修改关卡
        level++;
        document.querySelector("span").innerHTML=level;
        // 重置箭头
        setArraws();
        // 数据还原
        index=0;
    }
</script>
</html>