javascript - html5 Canvas 绘图位置不正确

Question

我目前正在编写一个简单的贪吃蛇游戏。
http://jsfiddle.net/jhGq4/3/
我开始为背景绘制网格

function fill_grid() {
    ctx.beginPath();
    var row_no = w/cw;
    var col_no = h/cw;
    for (var i=0;i<row_no;i++)
    {
        for (var j=0;j<col_no;j++)
        {
            ctx.rect(i*cw, j*cw, (i+1)*cw, (j+1)*cw);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.strokeStyle = '#135d80';
            ctx.stroke();
        }
    }

}

效果很好，但是当我画蛇时，位置出错了，长度加倍了。我尝试 console.log 我的蛇的 x 位置，但它们是正确的。

function paint_cell(x, y)
{
    console.log(x*cw);
    console.log((x+1)*cw);
    ctx.fillStyle = '#fff799';
    ctx.fillRect(x*cw, y*cw, (x+1)*cw, (y+1)*cw);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#135d80';
    ctx.strokeRect(x*cw, y*cw, (x+1)*cw, (y+1)*cw);
}

***因为有人想学习如何制作贪吃蛇游戏，这是我对这个游戏的最终解决方案。 http://jsfiddle.net/wd9z9/
你也可以访问我的网站玩:

使用WSAD 来玩。 http://www.catoyeung.com/snake2/single.php:D

Answer 1

我测试了这个替代的初始化函数:

function init()
{
        fill_grid();
        // create_snake1();
        // paint_snake1();
        paint_cell(5, 5)
}

它绘制一个从坐标 (5,5) 开始但大小为 6x6 的正方形。

我认为您误用了 fillRect() 方法。使用

        ctx.fillRect(x*cw, y*cw, cw, cw);

代替

        ctx.fillRect(x*cw, y*cw, (x+1)*cw, (y+1)*cw);

这可能同样适用于 strokeRect。

顺便说一下，我正在查看您的网格填充函数。你填充 i*j 个相邻的方 block ，这很有效，但你实际上只需要 i 条垂直线和 j 条水平线 - 这需要更少的处理。以更少的计算运行更快的循环:

function fill_grid() {
        ctx.beginPath();
        ctx.fillStyle = 'black';
        ctx.fillRect(0,0,w,h);
        for (var i=0;i<=h;i+=cw)
        {
            ctx.moveTo(0,i);
            ctx.lineTo(w,i);
            ctx.moveTo(i,0);
            ctx.lineTo(i,h);
        }
        ctx.stroke();
    }

我也只会在您初始化 Canvas 时定义一次线宽和描边颜色。当然，您可能不需要为此担心。但是，如果您经常刷新网格来为您的蛇设置动画，这种细心会有所不同。