我写了一个JavaScript来在画布上移动一只猫：“ฅ（*ΦωΦ*）ฅ”但猫很奇怪地跳了起来

Question

我创建了一个脚本，它使用HTML输入按钮在画布上移动猫。每次单击都会将猫沿着单击的方向移动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 body：

<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（一切正常）：

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



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

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

		};

var 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);
};

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


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

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

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

var 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);

<body onload="reset();">
<main>

<!-- place your HTML code within the main -->
    
    <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>
</main>

</body>

让变量：

是错误

从控制台日志：

  

（指数）：96之前：160/390

     

（指数）：99更新：160/400

     

（指数）：126 160/280

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