为什么我的精灵在不改变变量的情况下加速

Why is my sprite speeding up without changing variables?

本文关键字:变量 情况下 加速 改变 我的 精灵 为什么      更新时间:2023-09-26

我在这段代码中的某个地方有一个错误,导致飞船从地球返回后在太空中飞行得越来越快。我想不通这个。

我把速度设置为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;
}

Ship.prototype.checkPos发生了一些事情。每次你降落在行星上,检查都会暂停,然后在你进入轨道时启动。但这一次他检查Pos被叫得更快了。

我可以一直盯着它看,但你可能会从那里弄清楚。我在这个函数的顶部放了一个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.
};