我做了什麼？

透過操作canvas畫布以及物件，再配合偵測鼠標位置，來控制球的移動。另外，移動的步驟是使用setInterval()不斷擦掉畫布重畫的方式 ，使得看起來運作十分順暢。

鼠標偵測及重力牽引

透過計算出鼠標與球的相對角度，之後讓球的速度往該方向增加，就可以做出類似受到重力牽引的效果。

//此為右邊範例的程式，可以把鼠標靠過去看看
document.addEventListener("mousemove", mouseMoveHandler);
function mouseMoveHandler(e) {
    var temp = getPosition(canvas);
    relativeX = e.clientX - $(window).width() + canvas.width; 
    relativeY =  e.clientY - (temp.y-scrollY);
    console.log(relativeX,relativeY,canvas.offsetLeft,canvas.offsetTop);
}
function changeWay(){
    ax = relativeX - x;
    ay = relativeY - y;
    cosx = ax / Math.sqrt(ax**2 + ay**2);
    siny = ay / Math.sqrt(ax**2 + ay**2);
}

關卡制度

透過碰撞計算分數，並且越來越難。有些甚至我都沒破關

講那麼多，不如直接去玩

規則說明

請盡量使用電腦、Google Chrome瀏覽器

  • 你要控制的球

  • 碰到得一分

  • 碰到得三分

  • 碰到扣三分

  • 尚未完成，敬請期待

破不了關？看提示 鼠標越靠近球，會越好控制
多多利用牆壁的反彈
盡量往東西多的地方撞就對了


Get in touch