见缝插针小游戏

Posted 2022-01-08 丁大大君

直接上代码，

css

*
    margin:0;
    padding: 0;

body
    background: black;

ul
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    text-align: center;

li
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    color: white;
    list-style: none;

/*游戏画布*/
#cover
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(50,50,50,0.8);
    z-index: 1000;
    display: none;

#cover li:nth-last-child(2) button
    border: 1px solid white;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 25px;

主页

<!--背景-->
<div>
    <!--1.弹出框-->
    <div id="cover">
        <ul>
            <li id="showResult">恭喜过关</li>
            <li><button id="button">下一关</button></li>
        </ul>
    </div>
    <!--2.画布-->
    <canvas id="myCanvas" width="350" height="700"></canvas>
</div>

js

window.onload=function () 
    //游戏内容初始化
    let cans = document.getElementById("myCanvas")
    //弹出框
    let cover = document.getElementById("cover")
    //恭喜过关
    let showResult=document.getElementById("showResult")
    //下一关
    let button=document.getElementById("button")
    //开始设计游戏和关卡
    //获取绘图环境，设计环境类型
    let can=cans.getContext("2d")
    //设置当前关卡,保存在本地，每次刷新页面都会重新加载
    let checkPoint=JSON.parse(localStorage.getItem("num"))
    if (checkPoint)
        checkPoint=checkPoint;
    else 
        checkPoint=1;
    
    //每个关卡的配置，1.默认转动小球的数量2.等待点击的小球的数量3.显示第几关
    let pass = [
        [3,5,1],
        [3,7,2],
        [4,7,3],
        [4,9,4],
        [5,10,5],
        [4,11,6],
        [3,15,7],
        [2,16,8],
        [1,20,9],
        [0,21,10],
        [7,7,11],
        [8,6,12],
        [11,3,13],
    ];
    //游戏内容初始化设置
    let x=200,y=200;//中心点的位置
    let showPass;//存放第几关
    let balls=[];//存放转动小球的数组
    let run;//需要的时候去调用小球的转动
    let smllPi=15;//小球的半径
    let waits=[];//等待小球得数组
    let mark=true;//判断小球是否有重叠
    //设置中心点
    can.translate(x,y);
    //画大球
    function bigRound() 
        can.save();//保存各种设置
        can.beginPath();//开始绘制
        can.fillStyle="white";//白色
        can.arc(0,0,25,0,2*Math.PI)
        can.fill();//开始绘制
        can.closePath();//结束路径
        can.stroke();//重新绘制
        can.font="25px 微软雅黑";
        can.fillStyle="black";
        can.fillText(showPass,-6,10);//绘制关卡文字
        can.restore();

    

    //根据当前关卡进行配置
    if (checkPoint)
        //配置默认显示的小球
        for (let i=0;i<pass[checkPoint-1][0];i++)
            //输出关卡开始的状态，计算各个小球的位置
            console.log(360/pass[checkPoint-1][0]*i)//120 240 360
            //把每个小球push到数组
            balls.push(
                deg:360/pass[checkPoint-1][0]*i,
                num:""
            )
        
        //等待小球的数量和文本
        for (let i=0;i<pass[checkPoint-1][1];i++)
            waits.push(
                
                    deg:"",
                    num:i
                
            );
        
        showPass=pass[checkPoint-1][2]
    
    //画转动的小球
    function createSmallRound() 
        //清空指定宽高位置的内容
        can.clearRect(-180, -150, cans.width, 300);
        bigRound();//重新绘制大球球
        can.save();
        //循环转动小球
        for (let i = 0; i < balls.length; i++) 
            can.save();
            //小球转动的位置
            can.rotate(balls[i].deg * Math.PI / 180);
            //角度增加
            balls[i].deg = balls[i].deg + 1;
            //角度不能无限增加
            if (balls[i].deg >= 360) 
                balls[i].deg = 0;
            
            //绘制转动的杆子
            can.beginPath();
            can.lineWidth = 5;
            can.strokeStyle = "white";
            can.fillStyle = "width";
            can.moveTo(25, 0)
            can.lineTo(125, 0)
            can.fill();
            can.closePath();
            can.stroke();
            //绘制杆子上的小球
            can.beginPath();
            can.fillStyle = "white";
            can.arc(125, 0, smllPi, 0,2*Math.PI);
            can.fill();
            can.closePath();
            can.stroke();
            //小球上的数字
            can.font="20px 微软雅黑";
            can.fillStyle="black";
            can.fillText(balls[i].num,115,8);
            can.restore();
        
        can.restore();
        //重复转动
        run=window.requestAnimationFrame(createSmallRound)
    
    createSmallRound();
    //绘制等待的小球
    function waitRound() 
        can.clearRect(-180,150,cans.width,350);
        can.save();
        //循环等待小球的位置和基本信息
        for (let i = 0; i < waits.length; i++) 
            can.beginPath();
            can.fillStyle="white";
            can.arc(0,150+(smllPi*2)*(waits[i].num+1),smllPi,0,2*Math.PI);
            can.fill();
            can.closePath();
            can.stroke();
            can.font="20px 微软雅黑";
            can.fillStyle="black";
            can.fillText(waits[waits.length-1-i].num,-7,157+(smllPi*2)*(waits[i].num+1));
            can.restore();
        
    
    waitRound();
    //点击事件
    cans.onclick=function () 
        //判断剩余小球的数量
        if (waits.length!="")
            //删除等待小球的第一个记录，添加到转动小球的数组中
            let ball=waits.shift();
            ball.deg=90;
            //添加的小球从90度加入，判断当前角度是否有重合//是否无敌
            for (let i = 0; i < balls.length; i++) 
                //判断角度如果在重合范围内，游戏失败
                if (balls[i].deg>74&&balls[i].deg<106)
                    cans.onclick=null;
                    mark=false;
                    //闯关失败的界面样式
                    setTimeout(function () 
                        cover.style.display="block";
                        showResult.innerText="闯关失败";
                        button.innerText="重新再来";
                        cancelAnimationFrame(run);//停止转动
                        button.onclick=function () 
                            clicks(0);
                            cover.style.display="none";
                            location.reload();
                        
                    ,100)
                

            
            //角度没有重合，正常添加小球
            balls.push(ball)
            waitRound();//重新加载等待小球的列表
            //当等待小球的数量为0表示游戏成功进入下一关
            if (waits.length==0&&mark==true)
                //关卡判断
                setTimeout(function () 
                    cover.style.display="block";
                    //1.通关
                    if (checkPoint==pass.length)
                        showResult.innerText="恭喜你通过了所有关卡";
                        button.innerText="第一关";
                        button.onclick=function () 
                            clicks(-4);
                            cover.style.display="none";
                            location.reload();
                        
                    else//2.下一关
                        showResult.innerText="恭喜你闯关成功";
                        button.innerText="下一关";
                        button.onclick=function () 
                            clicks(1);
                            cover.style.display="none";
                            location.reload();
                        
                    
                    cancelAnimationFrame(run);
                ,500)
            
        
    
    //把对游戏成功或者失败的决定存储到对应的游戏关卡
    function clicks(num) 
        checkPoint+=num;
        localStorage.setItem("num",JSON.stringify(checkPoint))

    
;