我写了一个JavaScript来在画布上移动一只猫:"ฅ(*ΦωΦ*)ฅ"但猫很奇怪地跳了起来

Question

我创建了一个脚本,它使用HTML输入按钮在画布上移动猫.每次单击都会沿着单击的方向将cat移动10个像素(moveUp(); moveDown(); moveLeft(); moveRight();).这个脚本适用于前10-20次点击,但随后猫最终会跳转或卡在一个位置.

我不知道它为什么会这样.有人可以帮忙吗？

程序在jsfiddle上,你可以测试一下

https://jsfiddle.net/rockmanxdi/h2sk2sjz/2/

JavaScript代码如下:

let surface=document.getElementById("drawingArea");
let ctx=surface.getContext("2d");
let cor_x;
let cor_y;

/** draw a cat 
    *   input the coordinates x and y for the center of the cat
    *   does not return, output the drawing only.
    */
let drawCat = function (x, y) {

        ctx.save();
        ctx.translate(x, y);
        ctx.fillText("?(*???*) ?", -20,-5);
        ctx.restore();

        };

let updateCoordinate = function(x_increment,y_increment){
        console.log("before:" + cor_x + "/" + cor_y);
        cor_x += 10 * x_increment;
        cor_y += 10 * y_increment;
        console.log("updated:" + cor_x + "/" + cor_y);
};

let moveUp = function (){
    updateCoordinate(0,-1);
    console.log(cor_x + "/" + cor_y );
    ctx.clearRect(0,0,surface.width,surface.height);
    drawCat(cor_x,cor_y);
};


let moveLeft = function (){
    updateCoordinate(-1,0);
    console.log( cor_x + "/" + cor_y );
    ctx.clearRect(0,0,surface.width,surface.height);
    drawCat(cor_x,cor_y);  
};

let moveRight = function (){
    updateCoordinate(1,0);
    console.log( cor_x + "/" + cor_y );
    ctx.clearRect(0,0,surface.width,surface.height);
    drawCat(cor_x,cor_y);   
};

let moveDown = function (){
    updateCoordinate(0,1);
    console.log(cor_x + "/" + cor_y );
    ctx.clearRect(0,0,surface.width,surface.height);
    drawCat(cor_x,cor_y);  
};

let reset =  function(){
    cor_x=surface.width/2.0;
    cor_y=surface.height/2.0;
    console.log(cor_x + "/" + cor_y );
    ctx.clearRect(0,0,surface.width,surface.height);
    drawCat(cor_x,cor_y); 
}

drawCat(200,200);

html正文:

<canvas width="400" height="400" id="drawingArea" style="border:solid">cat image</canvas>
<p>
    <input type="button" id="resetBtn" value="reset" onclick="reset();" />    
</p>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" id="upBtn" value="Up" onclick="moveUp();"/>    
</p>
<p>
    <input type="button" id="leftBtn" value="Left" onclick="moveLeft();"/> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" id="rightBtn" value="Right" onclick="moveRight();"/>    
</p>
    <p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" id="downBtn" value="Down" onclick="moveDown();"/>    
</p>

顺便说一下,我把console.log()放在updateCoordinate()中; 并向上/向下/向右/向左移动(); 用于跟踪cat的x和y坐标值的函数.按F12键跟踪该值.

Answer 1

1）我只将所有let替换为var（一切正常）：

\n\n

\r\n

\r\n

var surface=document.getElementById("drawingArea");\r\nvar ctx=surface.getContext("2d");\r\nvar cor_x;\r\nvar cor_y;\r\n\r\n\r\n\r\n/** draw a cat \r\n\t*\tinput the coordinates x and y for the center of the cat\r\n\t*\tdoes not return, output the drawing only.\r\n\t*/\r\nvar drawCat = function (x, y) {\r\n\r\n\t\tctx.save();\r\n\t\tctx.translate(x, y);\r\n\t\tctx.fillText("\xe0\xb8\x85(*\xce\xa6\xcf\x89\xce\xa6*) \xe0\xb8\x85", -20,-5);\r\n\t\tctx.restore();\r\n\r\n\t\t};\r\n\r\nvar updateCoordinate = function(x_increment,y_increment){\r\n        console.log("before:" + cor_x + "/" + cor_y);\r\n        cor_x += 10 * x_increment;\r\n        cor_y += 10 * y_increment;\r\n        console.log("updated:" + cor_x + "/" + cor_y);\r\n};\r\n\r\nvar moveUp = function (){\r\n    updateCoordinate(0,-1);\r\n    console.log(cor_x + "/" + cor_y );\r\n    ctx.clearRect(0,0,surface.width,surface.height);\r\n    drawCat(cor_x,cor_y);\r\n};\r\n\r\n\r\nvar moveLeft = function (){\r\n    updateCoordinate(-1,0);\r\n    console.log( cor_x + "/" + cor_y );\r\n    ctx.clearRect(0,0,surface.width,surface.height);\r\n    drawCat(cor_x,cor_y);  \r\n};\r\n\r\nvar moveRight = function (){\r\n    updateCoordinate(1,0);\r\n    console.log( cor_x + "/" + cor_y );\r\n    ctx.clearRect(0,0,surface.width,surface.height);\r\n    drawCat(cor_x,cor_y);   \r\n};\r\n\r\nvar moveDown = function (){\r\n    updateCoordinate(0,1);\r\n    console.log(cor_x + "/" + cor_y );\r\n    ctx.clearRect(0,0,surface.width,surface.height);\r\n    drawCat(cor_x,cor_y);  \r\n};\r\n\r\nvar reset =  function(){\r\n\t\tcor_x=surface.width/2.0;\r\n\t\tcor_y=surface.height/2.0;\r\n    console.log(cor_x + "/" + cor_y );\r\n    ctx.clearRect(0,0,surface.width,surface.height);\r\n    drawCat(cor_x,cor_y); \r\n}\r\n\r\ndrawCat(200,200);

\r\n

<body onload="reset();">\r\n<main>\r\n\r\n<!-- place your HTML code within the main -->\r\n    \r\n    <canvas width="400" height="400" id="drawingArea" style="border:solid">cat image</canvas>\r\n    <p>\r\n        <input type="button" id="resetBtn" value="reset" onclick="reset();" />    \r\n    </p>\r\n    <p>\r\n        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\r\n        <input type="button" id="upBtn" value="Up" onclick="moveUp();"/>    \r\n    </p>\r\n    <p>\r\n        <input type="button" id="leftBtn" value="Left" onclick="moveLeft();"/> \r\n        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\r\n        <input type="button" id="rightBtn" value="Right" onclick="moveRight();"/>    \r\n    </p>\r\n        <p>\r\n        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\r\n        <input type="button" id="downBtn" value="Down" onclick="moveDown();"/>    \r\n    </p>\r\n</main>\r\n\r\n</body>

\r\n

\r\n

\r\n

\n\n

这是 let 变量的错误：

\n\n

从控制台日志：

\n\n

\n

(指数):96 之前:160/390

\n\n

（索引）：99 更新：160/400

\n\n

（索引）：126 160/280

\n

\n\n

在 updateCoordinate 内： cor_x = 160; cor_y = 400 但在 moveRight （或 moveLeft、moveUp、moveDown）内 cor_x = 160；cor_y = 280

\n