javascript - 在 HTML5 益智游戏中移动 Canvas 位置

Question

我已经下载了现成的HTML5 tile-swapping puzzle ，但我不知道如何更改 Canvas 位置。如果我们通过给 body 留出边距来改变 Canvas 位置，拼图就不起作用。我想将拼图与页面中间对齐。

这是一个带有拼图代码的 JSFiddle:

https://jsfiddle.net/kilobyte/0ej6cv6w/

这是您应该检查的代码摘录，其中我正在更改边距:

function Add(){
    alert("Congratulation...! You have Won...!!");
        var btn=document.createElement("input");
        btn.type="button";
        btn.id="mybutton";
        btn.value="Submit";
        btn.style.width="100px";
        btn.style.height="50px";
        btn.style.background="green";
        btn.style.margin="100px";
        document.body.appendChild(btn);
        var buttonid =document.getElementById("mybutton");
        buttonid.addEventListener('click', ButtonClick,false);
    }
    function gameOver(){
        document.onmousedown = null;
        document.onmousemove = null;
        document.onmouseup = null;
        Add();  
    //initPuzzle();
    }

Answer 1

编辑:好的，似乎 Firefox 可以工作，但 chrome 有不同的行为。我不打算重写游戏，但我可以为您提供指导。您需要编辑名为 onPuzzleClick() 的函数，它位于代码的第 103 行。这就是设置点击位置的地方(_mouse.x 和 _mouse.y)。您需要找出 chrome 中的不同之处并在那里设置正确的位置，我建议查看左边距和顶部边距或一些绝对位置或类似位置