Warum beschleunigt sich mein Sprite, ohne Variablen zu ändern?

Question

Ich habe irgendwo einen Fehler in diesem Code, der dazu führt, dass das Schiff nach der Rückkehr vom Planeten immer schneller im Weltraum fliegt. Ich kann das nicht herausfinden.

Ich stelle die Geschwindigkeit auf 0,1, so dass es sehr langsam im Raum ist. Wenn du auf den Planeten klickst, führe ich eine Funktion aus, die den Bildschirm des Canvas verschiebt, und benutze zindex, um ein Div-Tag an den Anfang des Stapels zu bringen. Wenn Sie landen und in den Orbit zurückkehren, bewegt sich das Schiff etwas schneller. Nach ca. 10-15 mal bewegt sich das Schiff weit größer als die eingestellte 0.1 Geschwindigkeit. Ich werde die html, js und css einschließen, damit Sie es zum Testen ausführen können.

Hier ist der ganze Code.

// 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

Etwas passiert mit Ship.prototype.checkPos. Jedes Mal, wenn du auf dem Planeten landest, sieht es so aus, als ob die Überprüfung pausiert und dann startet, wenn du in den Orbit kommst. Aber dieses Mal wird checkPos schneller angerufen.

Ich könnte es weiter anstarren, aber Sie könnten es von dort aus herausfinden. Ich legte eine console.log ('checkPos') oben auf diese Funktion und sah es pausieren und neu starten.

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

ich denke, es könnte sort hier

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

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