変数を変更せずにスプライトのスピードアップが行われるのはなぜですか？

Question

私はこのコードのどこかにバグを持っています。このバグは、地球から戻った後、船がより速く、より速く飛行する原因となります。私はこのことを理解できません。

私はスピードを0.1に設定して、スーパーのスペースが遅くなるようにしました。あなたが惑星をクリックすると、私はキャンバスの画面を動かす関数を実行し、zindexを使ってスタックの先頭にdivタグを置いています。あなたが着陸して軌道に戻ると、船は少し速く動くでしょう。それを約10-15回行った後、船は設定された0.1速度よりもはるかに大きく動く。私はhtml、js、cssをインクルードしますので、テストするために実行することができます。

ここにコード全体があります。

// Canvas Context's 
var canvasMS = document.getElementById('MainScreen_cvs'); 
var ctxMain = canvasMS.getContext('2d'); 
var canvasShip = document.getElementById('Ship_cvs'); 
var ctxShip = canvasShip.getContext('2d'); 
var PlanetDiv = document.getElementById('PlanetDiv'); 
var OrbitReturn = document.getElementById('OrbitReturn'); 
var canvasPlanets = document.getElementById('Planets_cvs'); 
var ctxPlanets = canvasPlanets.getContext('2d'); 
var canvasHUD = document.getElementById('HUD_cvs'); 
var ctxHUD = canvasHUD.getContext('2d'); 
var canvasSurface = document.getElementById('Surface_cvs'); 
var ctxSurface = canvasSurface.getContext('2d'); 

// ----------------------------------End Canvas Context 


var Player1; 
var Planet1; 
var planetClicked; 
var gameWidth = canvasMS.width; 
var gameHeight = canvasMS.height; 
var mouseX = 10000; 
var mouseY = 10000; 
var SpaceMapX = 10; 
var SpaceMapY = 10; 
var SurfaceMap = 0; 
var SurfaceMap2 = -1600; 
var inSpace = true; 
var onSurface = false; 
var requestAnimFrame = window.requestAnimationFrame || 
         window.webkitRequestAnimationFrame || 
         window.mozRequestAnimationFrame || 
         window.msRequestAnimationFrame || 
         window.oRequestAnimationFrame; 


// Load Images 

var imgMap = new Image(); 
imgMap.src = 'images/bg1.png'; 

var imgButtons = new Image(); 
imgButtons.src = 'images/button_sprite.png'; 

var imgBlueWindow = new Image(); 
imgBlueWindow.src = 'images/blue_window.png'; 

var imgSprite = new Image(); 
imgSprite.src = 'images/sprite.png'; 

var imgPlanets = new Image(); 
imgPlanets.src = 'images/earthlike_p1.png'; 

var imgBluesky1 = new Image(); 
imgBluesky1.src = 'images/bluesky1.png'; 

var imgBluesky2 = new Image(); 
imgBluesky2.src = 'images/bluesky2.png'; 

imgMap.addEventListener('load',init,false); 
// ------------- End Loading Images 


//-------------------- Create Game Objects ---------------- 

function CreateGameObjects(){ 
    Player1 = new Ship(); 
    Planet1 = new Planet(); 
}; 

//---------------END CREATING GAME OBJECTS------------------ 


function init(){ //----------------------------------------------- GAME INITIALIZATION 
    document.addEventListener('keydown',checkKeyDown,false); 
    document.addEventListener('keyup',checkKeyUp,false); 
    document.addEventListener("mousedown", checkMouseDown, false); 
    document.addEventListener("mouseup", checkMouseUp, false); 
    CreateGameObjects(); 
    Loop(); 
}; 

function Loop() { // ---------------- Main Game Loop 
     clearCtx(); 
     DrawGameObjects(); 
     requestAnimFrame(Loop); 
}; 
function planetSurface(){ 

     if(onSurface){ 
      clearCtx(); 
      HUD(); 
      Player1.draw(); 

      if(mouseY < 21 && mouseX > 693){ 
       ReturntoOrbit(); 
      } 
      planetClicked.drawSurfaceImg(); 
      var CloseButton = '<button style="float:right;" type="button">Return to Orbit</button>' ; 
      OrbitReturn.innerHTML = CloseButton; 



      requestAnimFrame(planetSurface); 
     } 
}; 

function DrawGameObjects(){ 
    Player1.draw(); 
    Planet1.draw(); 
    HUD(); 
}; 

function HUD(){ 
    canvasHUD.style.zIndex = "100"; 

    if (onSurface){ 
     ctxHUD.fillStyle = "#000"; 
     ctxHUD.fillText("locSurface: " + planetClicked.locSurface, 20,30); 
    } 
    if (inSpace) 
     ctxHUD.fillStyle = "#fff"; 


    ctxHUD.fillText("Speed: " + Player1.speed, 60,60); 
    ctxHUD.fillText("drawX: " + Player1.drawX, 600,40); 
    ctxHUD.fillText("drawY: " + Player1.drawY, 600,30); 

    // ctxHUD.fillText("Planet Clicked: " + Planet1.isClicked, 600,50); 
} 
//----------------------------------------------------------- Objects 
/************************************************************************************/ 
//--------------------------------- SPACE SHIP -------------------------------------- 

function Ship(){ 

    this.srcX = 0; 
    this.srcY = 0; 
    this.srcW = 60; 
    this.srcH = 60; 
    this.drawX = 20 ; 
    this.drawY = 50 ; 
    this.speed = 0; 
    this.surfaceSpeed = 10; 
    this.drift = 0.45; 
    this.w = 16; 
    this.h = 16; 
    this.isUpKey = false; 
    this.isDownKey = false; 
    this.isLeftKey = false; 
    this.isRightKey = false; 
    this.isSpacebar = false; 
    this.direction = "n/a"; 
    this.isMoving = false; 
    this.isClicked = false; 
    this.surfX = 350; 
    this.surfY = 200; 
}; 

Ship.prototype.draw = function() { 
    if(inSpace) 
     ctxShip.drawImage(imgSprite,this.srcX,this.srcY,this.srcW,this.srcH,this.drawX,this.drawY,this.w,this.h); 
    if(onSurface) 
     ctxShip.drawImage(imgSprite,this.srcX,this.srcY,this.srcW,this.srcH,this.surfX,this.surfY,this.w,this.h); 

    this.checkPos(planetClicked); 
}; 

Ship.prototype.checkPos = function (PlanetX){ 
    if(inSpace){ 
       this.srcY = 0; 
       this.srcW = 60; 
       this.w = 16; 
       this.h = 16; 
       this.speed = 0.1; 
    //----------------------------- Move Ship and Map based on the speed of the ship. 
     if(this.isLeftKey){ 
      this.drawX -= this.speed; 
      if(SpaceMapX >= 1){ 
       SpaceMapX -= this.speed; 
      } 
     } 

     if(this.isRightKey){ 
      this.drawX += this.speed; 
      if(SpaceMapX <= 2190)SpaceMapX += this.speed; 
     } 

     if(this.isDownKey){ 
      this.drawY += this.speed; 
      if(SpaceMapY <= 2490)SpaceMapY += this.speed; 

     } 
     if (this.isUpKey) { 
      this.drawY -= this.speed; 
      if(SpaceMapY >= 1){ 
       SpaceMapY -= this.speed;    
      } 

     } 
     if (SpaceMapY < 0) {SpaceMapY = 0;} 
     if (SpaceMapX < 0) {SpaceMapX = 0} 
      //--------------------------------------------------------------------END 
//-----------------------------------Change Ship Graphic based on direction and map boundaries. 
       if(this.isUpKey) this.srcX = 360; 
       if(this.isDownKey) this.srcX = 120; 
       if(this.isLeftKey) this.srcX = 240; 
       if(this.isRightKey) this.srcX = 0; 
       if(this.isUpKey && this.isLeftKey) this.srcX = 300; 
       if(this.isUpKey && this.isRightKey) this.srcX = 420; 
       if(this.isDownKey && this.isLeftKey) this.srcX = 180; 
       if(this.isDownKey && this.isRightKey) this.srcX = 60; 
       if (this.drawX <= 5) this.drawX = 5; 
       if (this.drawY <= 5) {this.drawY = 5}; 
       if (this.drawY >= 480) {this.drawY = 480}; 
       if (this.drawX >= 780) {this.drawX = 780}; 
    //----------------------------------------------------------------END 
    ctxMain.drawImage(imgMap,SpaceMapX,SpaceMapY,gameWidth,gameHeight,0,0,gameWidth,gameHeight); 
    } 
    if (onSurface) { 
       this.srcY = 240; 
       this.srcW = 92; 
       this.w = 93; 
       this.h = 60; 

     if(this.isLeftKey){ 
      PlanetX.locSurface -= this.surfaceSpeed; 
      SurfaceMap += this.surfaceSpeed; 
      SurfaceMap2 += this.surfaceSpeed; 
      PlanetX.MapDirection = -1; 
      this.srcX = 93; 
     } 
     if(this.isRightKey){ 
      PlanetX.locSurface += this.surfaceSpeed; 
      SurfaceMap -= this.surfaceSpeed; 
      SurfaceMap2 -= this.surfaceSpeed; 
      PlanetX.MapDirection = 1; 
      this.srcX = 0; 
     } 
    } 
}; 

//------------------------------END OF SPACE SHIP ------------------------------------ 


//----------------------------- PLANET OBJECT INFO ------------------------------------ 

function Planet(){ 

    this.srcX = 0; 
    this.srcY = 0; 
    this.srcW = 100; 
    this.srcH = 100; 
    this.w = 50; 
    this.h = 50; 
    this.coordX = 100; 
    this.coordY = 100; 
    this.planetType = "Small Earthlike Planet." 
    this.drawX = this.coordX - SpaceMapX; 
    this.drawY = this.coordY - SpaceMapY; 
    this.surfaceIMG = imgBluesky1; 
    this.isClicked = false; 
    this.locSurface = 0; 
}; 

Planet.prototype.draw = function(){ 
    this.drawX = this.coordX - SpaceMapX; 
    this.drawY = this.coordY - SpaceMapY; 
    ifClicked(this); 
    if(this.isClicked){ 
     PlanetDiv.style.display = "block"; 
     var LandPlanetDivButton = '<button id="LandPlanetDivButton" type="button" onclick="landOnSurface();">Land On Surface</button>'; 
     var ClosePlanetDivButton = '<button id="ClosePlanetDivButton" type="button" onclick="ClosePlanetDiv();">Close (x)</button><br/><p id="PlanetDivText">' ; 
     PlanetDiv.style.zIndex = "2"; 
     HideCanvas(); 
     planetClicked = this; 
     PlanetDiv.innerHTML = LandPlanetDivButton + ClosePlanetDivButton + this.planetType; + '</p>'; 

    } 
    ctxPlanets.drawImage(imgPlanets,this.srcX,this.srcY,this.srcW,this.srcH,this.drawX,this.drawY,this.w,this.h); 
}; 
Planet.prototype.drawSurfaceImg = function(){ 
    if(SurfaceMap2 >= 0) SurfaceMap2 = -1600; 
    if(SurfaceMap2 < -1600) SurfaceMap2 = -1; 
    if(SurfaceMap >= 1600) SurfaceMap = 0; 
    if(SurfaceMap < 0) SurfaceMap = 1599; 
    ctxSurface.drawImage(this.surfaceIMG, 0, 0, 1600, gameHeight, SurfaceMap, 0, 1600, gameHeight); 
    ctxSurface.drawImage(this.surfaceIMG, 0, 0, 1600, gameHeight, SurfaceMap2, 0, 1600, gameHeight); 
}; 

//----------------------------- END OF PLANET OBJECT ----------------------------------- 


//-----end Objects 
function randomFromTo(from,to){ 
    return Math.floor(Math.random()*(to-from+1)+from); 
}; 

function closestNum(Num, a){ 
    var num = Num + (gameWidth/2); 
    var closest = a[0]; 
    var difference = Math.abs (num - closest); 
     for (var i = 0; i < a.length; i++) { 
      var difference2 = Math.abs (num - a[i]); 
      if (difference2 < difference) { 
       difference = difference2; 
       closest = a[i]; 
      } 
     } 
    return closest; 
}; 

function sortNum(a) 
{ 
    var swapped; 
    do{ 
     swapped = false; 
     for (var i=0; i < a.length-1; i++) { 
      if (a[i] > a[i+1]) { 
       var temp = a[i]; 
       a[i] = a[i+1]; 
       a[i+1] = temp; 
       swapped = true; 
      } 
     } 
    }while (swapped); 
}; 

function ifClicked(obj){ 
    if(mouseX >= obj.drawX && mouseX <= obj.drawX + obj.w){ 
     if(mouseY >= obj.drawY && mouseY <= obj.drawY + obj.h){ 
      obj.isClicked = true; 
     } 
    } 
    else{ 
     obj.isClicked = false; 
    } 
}; 


function clearCtx() { 

    ctxMain.clearRect(0,0,gameWidth,gameHeight); 
    ctxShip.clearRect(0,0,gameWidth,gameHeight); 
    ctxPlanets.clearRect(0,0,gameWidth,gameHeight); 
    ctxHUD.clearRect(0,0,gameWidth,gameHeight); 
    ctxSurface.clearRect(0,0,gameWidth,gameHeight); 
}; 

function checkKeyDown(e){ 
    var keyID = e.keyCode || e.which; 
    if(keyID === 38 || keyID === 87){ // up arrow or W key 
     Player1.isUpKey = true; 
     Player1.direction = "North"; 
     Player1.isMoving = true; 
     e.preventDefault(); 
    } 
    if(keyID === 39|| keyID === 68){ // right arrow or D key 
     Player1.isRightKey = true; 
     Player1.direction = "East" 
     Player1.isMoving = true; 
     e.preventDefault(); 
    } 
    if(keyID === 40 || keyID === 83){ // down arrow or S key 
     Player1.isDownKey = true; 
     Player1.direction = "South"; 
     Player1.isMoving = true; 
     e.preventDefault(); 
    } 
    if(keyID === 37 || keyID === 65){ // left arrow or A key 
     Player1.isLeftKey = true; 
     Player1.direction = "West"; 
     Player1.isMoving = true; 
     e.preventDefault(); 
    } 

}; 

function checkKeyUp(e){ 
    var keyID = e.keyCode || e.which; 
    if(keyID === 38 || keyID === 87){ // up arrow or W key 
     Player1.isUpKey = false; 
     Player1.isMoving = false; 
     e.preventDefault(); 
    } 
    if(keyID === 39|| keyID === 68){ // right arrow or D key 
     Player1.isRightKey = false; 
     Player1.isMoving = false; 
     e.preventDefault(); 
    } 
    if(keyID === 40 || keyID === 83){ // down arrow or S key 
     Player1.isDownKey = false; 
     Player1.isMoving = false; 
     e.preventDefault(); 
    } 
    if(keyID === 37 || keyID === 65){ // left arrow or A key 
     Player1.isLeftKey = false; 
     Player1.isMoving = false; 
     e.preventDefault(); 
    } 

}; 


function clearMouse(){ 
     mouseX = 10000; 
     mouseY = 10000; 
}; 

function checkMouseDown(e) { 
    var mX = (e.clientX - (canvasMS.offsetLeft - canvasMS.scrollLeft)); 
    var mY = (e.clientY - (canvasMS.offsetTop - canvasMS.scrollTop)); 
    if(mX <= gameWidth && mX >= 0) mouseX = mX; 
    if(mY <= gameHeight && mY >= 0) mouseY = mY; 
    //mouseIsDown = true; 

}; 

function checkMouseUp(e){ 
    //mouseIsDown = false; 
    clearMouse(); 
}; 

function ClosePlanetDiv(){ 
    PlanetDiv.style.zIndex = "-2"; 
    PlanetDiv.innerHTML = ""; 
    PlanetDiv.style.display = "none"; 
    ShowCanvas(); 
}; 

function HideCanvas(){ 
    canvasShip.style.marginTop = "-10000px"; 
    canvasPlanets.style.marginTop = "-10000px"; 

}; 
function ShowCanvas(){ 
    canvasShip.style.marginTop = "-500px"; 
    canvasPlanets.style.marginTop = "-500px"; 

}; 

function landOnSurface(){ 
    ClosePlanetDiv(); 
    inSpace = false; 
    onSurface = true; 
    Player1.srcX = 0; 
    planetSurface(); 
    canvasSurface.style.display = "block"; 
    OrbitReturn.style.display = "block"; 

}; 
function ReturntoOrbit(){ 
    OrbitReturn.style.display = "none"; 
    canvasSurface.style.display = "none"; 
    inSpace = true; 
    onSurface = false; 

    Loop(); 
}; 

<!doctype html> 
<html lang='en'> 
<head> 
    <meta charset="utf-8"> 
    <title>Space Explorer</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="Functions.js"></script> 
</head> 
<body> 
    <canvas id="MainScreen_cvs" width="800" height="500"></canvas> 
    <div id="PlanetDiv"></div> 

    <canvas id="Surface_cvs" width="800" height="500"></canvas> 
    <canvas id="Ship_cvs" width="800" height="500"></canvas> 
    <canvas id="Planets_cvs" width="800" height="500"></canvas> 
    <canvas id="HUD_cvs" width="800" height="500"></canvas> 
    <div id="OrbitReturn"></div> 



    <div id="log"> 

     <h1 style="color:blue;">Recent updates will be logged here when made live.</h1> 
     <hr /> 
     <h3> Wednesday August 3, 2016 </h3> 
     <ul> 
      <li> HTML file completed. Working on getting JS files started.</li> 
      <li> JS files created. </li> 
      <li>Basic ship & flight functions in place. Basic star map initialized.</li> 
     </ul> 
     <hr /> 

    </div> 

    <script type="text/javascript" src="game.js"></script> 
</body> 
</html> 


body { 
background: #303030; 
} 

#MainScreen_cvs { 
    position: relative; 
    display: block; 
    background: #777777 ; 
    margin: 30px auto 0px; 
    z-index: 1; 
} 
#Surface_cvs{ 
    position: relative; 
    display: none; 
    z-index: 1; 
    margin: -500px auto 0px; 

} 
#Ship_cvs, #Planets_cvs, #HUD_cvs { 
    display: block; 
    position: relative; 
    margin: -500px auto 0px; 
    z-index: 1; 
} 
#log { 
    display: block; 
    position: absolute; 
    top: 560px; 
    left: 233px; 
    background: #ffffff; 
    overflow: scroll; 
    width: 800px; 
    height: 300px; 
    z-index: 3; 
} 
#OrbitReturn{ 
    display: block; 
    position: relative; 
    width: 800px; 
    height: 500px; 
    z-index: 3; 
    margin: -500px auto 0px; 
} 
#PlanetDiv { 
    display: block; 
    position: relative; 
    width: 800px; 
    height: 500px; 
    background-image: url("images/Sky.jpg"); 
    z-index: -2; 
    margin: -500px auto 0px; 
} 
#ClosePlanetDivButton{ 
    float: right; 

} 
#LandPlanetDivButton{ 
    position: absolute; 
    top: 400px; 
    left: 325px; 
    font-size: 20px; 
} 
#PlanetDivText{ 
    text-indent: 50px; 
    font-size: 20px; 
} 

Answer 1

Ship.prototype.checkPosで何かが起きています。あなたが惑星に着陸するたびに、チェックが一時停止したように見え、軌道に入ると起動します。しかし今回は、checkPosがより速く呼び出されています。

私はそれを見つめ続けることができましたが、あなたはそれを理解することができるかもしれません。私はconsole.log（ 'checkPos'）をその関数の先頭に置き、一時停止して再起動するのを見ました。私はそれがかもしれないと思う

Ship.prototype.checkPos = function(PlanetX) { 
    console.log('checkPos'); 
    if (inSpace) { 
    ... 

ここ

function ReturntoOrbit() { 
    OrbitReturn.style.display = "none"; 
    canvasSurface.style.display = "none"; 
    inSpace = true; 
    onSurface = false; 

    //Loop(); <--- this little guy. Get rid of him. 
};