標題之所以寫推薦給新手，是因為我也是個剛學js一週的新人，想練練手，於是就花了一下午寫了這個遊戲，所以我寫的可能更適合新手，大神勿噴。

   這個遊戲是利用原生的js以及html5的canvas技術做的一個小遊戲，遊戲規則跟手機上的見縫插針一樣的，這是我的遊戲介面：

這個是無限插針的，就是針有無限多，直到你失敗了或是點選reset按鈕停止.

以下把我的原始碼貼出來供大家參考：

js程式碼：

var ctx;//工具
var canvas;//畫布
var canalpha=0;
var cirradius=100;
var smciradius=15;
var ani=false;//動畫是否在進行中
 
var speed=30;//針的速度
var ins=false;//是否可以觸發insert動畫
var n=0;//針的步長
var num=1;//針的編號
var angel=[];//各針停留時的角度陣列
angel[0]=0;//初始化為1根針時設定，可改變
var speed2=200;//旋轉速度
var over=false;//遊戲結束標誌
var INTERID;//周期函式ID
function drawmap() {
    ctx.fillStyle = "rgba(50%,25%,25%,0.5)";
    ctx.translate(250, 250);
    ctx.rotate(canalpha);
    ctx
 
.translate(-250, -250);
    ctx.beginPath();
    ctx.arc(250, 250, cirradius, 0, Math.PI * 2, true);
    ctx.moveTo(250, 350);
    ctx.lineTo(250, 450);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.fillStyle = "rgba(0,0,0,0.5)";
    ctx.beginPath();
    ctx.arc(250, 465, smciradius, 0, Math.PI * 2
 
, true);
    ctx.closePath();
    ctx.fill();
    if(!ins) {
        drawNail(num);
    }else{
        nailact(num);

    }
        for (var j = 1; j <= angel.length; j++) {
            ctx.fillStyle = "rgba(0,0,0,0.5)";//由於填充顏色只能用於一次路徑或fill函式，所以需放在迴圈內
ctx.beginPath();
            ctx.arc(250 + Math.sin(angel[j]) * 215, 600 - (350 - Math.cos(angel[j]) * 215), smciradius, 0, Math.PI * 2, true);
            ctx.moveTo(250 + Math.sin(angel[j]) * 200, 450 - (200 * (1 - Math.cos(angel[j]))));
            ctx.lineTo(250 + Math.sin(angel[j]) * 100, 450 - (200 - Math.cos(angel[j]) * 100));
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            ctx.fillStyle = "#FFFFFF";
            ctx.fillText(j, 247 + Math.sin(angel[j]) * 215, 605 - (350 - Math.cos(angel[j]) * 215));
        }

}



function mapact(){
       canvas=document.getElementById("canvas");
       ctx=canvas.getContext("2d");
    if(!over) {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.save();
        drawmap();
        ctx.restore();
        overgame();
        canalpha += Math.PI / speed2;
    }else{
            window.clearInterval(INTERID);
            var pa=document.createElement("p");
            pa.innerHTML="You Lose!!";
            document.getElementById("info").appendChild(pa);
    }
}

function nailact(i){

    ctx.fillStyle="rgba(0,0,0,0.5)";
    if((350-(n+1)*speed)>=215) {
        ctx.beginPath();
        ctx.arc(250 + Math.sin(canalpha) * (350 - n * speed), 600 - (350 - Math.cos(canalpha) * (350 - n * speed)), smciradius, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText(i, 247 + Math.sin(canalpha) * (350-n*speed), 605 - (350 - Math.cos(canalpha) * (350 - n * speed)));
        n++;
    }else{
        /*ctx.beginPath();
        ctx.arc(250 + Math.sin(canalpha) * 215, 600 - (350 - Math.cos(canalpha) * 215), smciradius, 0, Math.PI * 2, true);
        ctx.moveTo(250+ Math.sin(canalpha) * 200,450-(200*(1 - Math.cos(canalpha))));
        ctx.lineTo(250+ Math.sin(canalpha) * 100, 450-(200 - Math.cos(canalpha) *100));
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText(j, 247 + Math.sin(canalpha) *215, 605 - (350 - Math.cos(canalpha) * 215));* / * 嘗試畫面無閃頓的方法*/
angel[i]=canalpha;
        num++;
        n=0;
        ins=false;
    }

}
function drawNail(i){

    ctx.fillStyle="rgba(0,0,0,0.5)";
    ctx.beginPath();
    ctx.arc(250+Math.sin(canalpha)*350,600-(1-Math.cos(canalpha))*350,smciradius,0,Math.PI*2,true);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle="#FFFFFF";
    ctx.fillText(i,247+Math.sin(canalpha)*350,605-(1-Math.cos(canalpha))*350);

}
function run(){
        var but=document.getElementById("run");
        but.disabled = true;//按鈕變得不可用
ani=true;//開啟動畫
INTERID=setInterval(mapact,30); //number=1000/fps
}

function insert(){  //接受使用者的插入指令
var but2=document.getElementById("insert");
    if(ani){
         ins=true;
    }else{
        return;
    }
}

function overgame()//判斷遊戲是否結束
{
    for(var j=0;j<angel.length;j++) {
        if ((Math.abs(Math.sin((angel[num-1] - angel[j]) / 2))<3/43)&&(j!=num-1)) {
            over = true;
        }
    }
}

function ref()
{
    window.location="yx.html";

}

window.onload=function(){
    var but=document.getElementById("run");
    but.disabled = false;
    mapact();
}

這是我的html程式碼（yx.html）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="cc.js"></script>
</head>
<body>

       <canvas id="canvas" width="700px" height="700px"></canvas>
       <div id="info"></div>
       <input type="button" value="run" onclick="run()" id="run"/>
       <input type="button" value="insert" onclick="insert()" id="insert"/>
       <input type="button" value="reset" onclick="ref()" id="reset"/>
</body>
</html>

程式碼中有一些變數是直接用數字給出的，一些是位置資料，這個可以根據你們的需要更改，另一些是根據位置資料計算出的，最初設計時沒有把他設定成全域性變數是我的失誤，以後再寫程式碼時會注意的，遊戲結束判定是根據角度之差是否滿足兩球互不相碰判定的。

個人感覺基本流程有三點：

1.明白遊戲之後，先畫出初始介面

2.寫出遊戲的動畫

3.寫出遊戲的一些判斷邏輯，最後修飾一下介面即可。

這是我的感受，給大家分享一下，就是這樣。