見縫插針小游戲

直接上代碼，

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

    }
};