samedi 12 janvier 2019

My "if" statement in javascript crashes my game in canvas (Black Screen)

I am a new learner, learning programming languages in school. I am doing my homework, in it i am doing my final assignment of the course and i have no clue why i keep getting this error. Whenever myGamePiece goes to the most right side of the screen.

if (myGamePiece.x >= 1300 && myGamePiece.level === 1 {myGamePiece.lvl1(); myBackground.lvl2(); myGamePiece.level = 2;}

It is supposed to fire this code:

this.lvl2 = function() {
    myBackground = new component1(1300, 601, "Background2.png", 0, 
            0, "image");
};

Instead of loading a image it shows me a black screen.

I am sure that my image is available in my folder

I have tried removing each piece of the code, moving things around, None of that work.

Here is my JavaScript code(It is pain in the butt to indent all of this):

var myGamePiece;
var myBackground;


function startGame() {
    "use strict";
    myGameArea.start();
    myGamePiece = new component(30, 30, "GamePiece.png", 10, 389, "image");              
/* Javascript that controls the movment of the character and the 
background when the game loads*/
    myBackground = new component1(1300, 601, "Background.png", 0, 0, 
    "image");
    var button = document.getElementById("Play");
    button.style.display = "none";
}

var myGameArea = {
    canvas : document.getElementById("myCanvas"),
    start : function() {
        "use strict";
        this.canvas.width = 1300;
        this.canvas.height = 600;
        this.canvas.style.backgroundImage = "none";
        this.canvas.style.position = "absolute";
        this.canvas.style.top = "267px";
        this.canvas.style.left = "303px";
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, 
        document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type === "keydown");                      
/* Loading the Canvas and style for it to stay at the exact same position 
otherwise would go at the top left of the page*/
        });
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type === "keydown");            
        });
    }, 
    clear : function(){
        "use strict";
        this.context.clearRect(0, 0, this.canvas.width, 
        this.canvas.height);
    }
};

function component(width, height, color, x, y, type) {
    this.type = type;
    if (type === "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;
    this.level = 0;
    this.gravity = 0.16;
    this.gravitySpeed = 0;
    this.jumping = 0;
    this.update = function() {
        context = myGameArea.context;
        if (type === "image") {
            context.drawImage(this.image, 
                this.x, 
                this.y,
                this.width, this.height);                                             
/* makes variables for a specific component "GamePiece" */
        } else {
            context.fillStyle = color;
            context.fillRect(this.x, this.y, this.width, this.height);
        }
    };
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    };
    this.hitBottom = function() {
        var rockbottom = 389;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    };
    this.lvl1 = function() {
        this.x = 0;
        this.y = 389;
    };
    this.backlvl1 = function() {
        this.x = 1290;
        this.y = 389;
    };
    this.block1 = function() {
        var toprock1 = 347;
        var siderock1 = 360;
        var othersiderock1 = 420;
        if (this.y > toprock1 && this.x > siderock1 && this.x < 
                othersiderock1 && this.y < 355) {
            this.y = toprock1;
            this.gravitySpeed = 0;
        }
    };
    this.block2 = function() {
        var toprock2 = 347;
        var siderock2 = 700;
        var othersiderock2 = 760;
        if (this.y > toprock2 && this.x > siderock2 && this.x < 
                othersiderock2 && this.y < 355) {
            this.y = toprock2;
            this.gravitySpeed = 0;
        }
    };
    this.block3 = function() {
        var toprock3 = 301;
        var siderock3 = 767;
        var othersiderock3 = 827;
        if (this.y > toprock3 && this.x > siderock3 && this.x < 
                othersiderock3 && this.y < 309) {
            this.y = toprock3;
            this.gravitySpeed = 0;
        }
    };
    this.block11 = function() {
        var toprock11 = 376;
        var siderock11 = 42;
        var othersiderock11 = 56;
        if (this.y > toprock11 && this.x > siderock11 && this.x < 
                othersiderock11 && this.y < 380) {
            this.y = toprock11;
            this.gravitySpeed = 0;
        }
    };
 }


function updateGameArea() {
    "use strict";                                                     
/* Updating the game are when ever a change is made certain times per 
second*/
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;    
    if (myGamePiece.y > 389) {myGamePiece.y = 389; }
    if (myGamePiece.x < -16) {myGamePiece.x = -16; }
    if (myGamePiece.level ===1) {myGamePiece.block1(); 
        myGamePiece.block2(); myGamePiece.block3();}
    if (myGamePiece.level === 2) {myGamePiece.block11(); 
        myGamePiece.block12(); myGamePiece.block13();}
    if (myGamePiece.x >= 1300 && myGamePiece.level === 0) 
        {myGamePiece.lvl1(); myBackground.lvl1(); myGamePiece.level = 1;}
    if (myGamePiece.x >= 1300 && myGamePiece.level === 1) 
        {myGamePiece.lvl1(); myBackground.lvl2(); myGamePiece.level = 2;}
    if (myGamePiece.level === 1 && myGamePiece.x <= -15) 
        {myGamePiece.backlvl1(); myBackground.lvl0(); myGamePiece.level = 
        0;}
    if (myGamePiece.level === 2 && myGamePiece.x <= -15) 
        {myGamePiece.backlvl1(); myBackground.lvl1(); myGamePiece.level = 
        1;}
    if (myGamePiece.y >= 389 || myGamePiece.y === 347 && 
        myGamePiece.level === 1) {myGamePiece.jumping = 0;}
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 2; }
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = 
        -2; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 
        2; }
    if (myGamePiece.jumping <= 0 && myGameArea.keys && 
        myGameArea.keys[38]) {myGamePiece.speedY = -40; myGamePiece.jumping 
        = 1;}
    myBackground.newPos();
    myBackground.update();
    myGamePiece.newPos();    
    myGamePiece.update();

}
function component1(width, height, color, x, y, type) {
    this.type = type;
    if (type === "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;
    this.update = function() {
        context = myGameArea.context;
        if (type === "image") {
            context.drawImage(this.image, 
                this.x, 
                this.y,
                this.width, this.height);                                             
/* makes variables for a specific component "Background" */
        } else {
            context.fillStyle = color;
            context.fillRect(this.x, this.y, this.width, this.height);
        }
    };
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
    };
    this.lvl1 = function() {
        myBackground = new component1(1300, 601, "Background1.png", 
                0, 0, "image");
    };
    this.lvl2 = function() {
        myBackground = new component1(1300, 601, "Background2.png", 
                0, 0, "image");
    };
    this.lvl0 = function() {
        myBackground = new component1(1300, 601, "Background.png", 
                0, 0, "image");

    };
}

Aucun commentaire:

Enregistrer un commentaire