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