Napisałem skrypt JavaScript, aby przenieść kota na płótno: "ฅ (* ΦωΦ *) ฅ" Ale kot skacze dziwnie

Question

Stworzyłem skrypt, który wykorzystuje przyciski wprowadzania HTML, aby przenieść kota na płótnie. Każde kliknięcie przesuwa kota o 10 pikseli w kierunku, w którym został kliknięty (moveUp(); moveDown(); moveLeft(); moveRight();). Ten skrypt działa dobrze dla pierwszych 10-20 kliknięć, ale potem kot w końcu skacze lub utknął w jednym miejscu.

Nie mam pojęcia, dlaczego zachowuje się w ten sposób. Czy ktoś może pomóc?

Program jest na jsfiddle można przetestować go

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

JavaScript kod jest poniżej: ciało

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> 

W sposób umieścić console.log wewnątrz updateCoordinate()(); i przesuń w górę/w dół/w prawo/w lewo(); funkcje do śledzenia wartości współrzędnych x i y kota. Naciśnij klawisz F12, aby śledzić wartość.

Answer 1

1) Wymieniłem tylko wszystko niech do var (wszystko działa dobrze):

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

 

 

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

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

 
\t \t }; 
 

 
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(){ 
 
\t \t cor_x=surface.width/2.0; 
 
\t \t 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>

Jest bug ze zmienną wynajęcia:

Z dziennika konsoli:

(indeks): 96 przed: 160/390

(wskaźnik) 99 aktualizacja: 160/400

(Indeks) 126 160/280

W updateCoordinate: cor_x = 160; cor_y = 400 ALE w moveRight (lub moveLeft, moveUp, moveDown) cor_x = 160; cor_y = 280