Javascript Image Help (1 Viewer)

[nathan98]

Im currently making a game for my year 11 assignment. My game is basically a Mario racer based game. Im wanting to load a finish screen once the players score =20. The first image shows a screenshot of me specifying the src of my image. The image is named finale.png. The second image is where i need to implement the photo once the score hits 20. The score present in that image is a test to see whether the event works. At the moment once the score hits 20 it changes to 999 (this was for testing purposes) Instead i want the finale.png to load. This photo has just simple text of well done you have completed the game.
Any help would be great thanks!

 

[obliviousninja]

System.out.print("hello world")

 

[nathan98]

System.out.print("hello world")

What do you mean by this ?

 

[GoldyOrNugget]

He was just trolling. You have to post all your code (or at least a sizeable chunk). we can't debug from a screenshot of two lines.

 

[obliviousninja]

Yeah need more^

 

[dan964]

if it was a web app i'd recommend putting into a div and changing the innerhtml/content of the div rather than updating the src of an image.

 

[Eluate]

Assuming you are using javascript then something similar to this should work:

var _img = document.getElementById('id1');
var newImg = new Image;
newImg.onload = function() {
_img.src = this.src;
}
newImg.src = 'http://whatever';

Source: http://stackoverflow.com/questions/19396390/load-image-from-javascript
For future reference, it's good to use google: I'm too lazy to search it myself

 

[nathan98]

I have tried using this. No luck what should I do ?

 

[GoldyOrNugget]

We can't help you unless you post your code buddy. It's like asking "what's wrong with my working out for this maths question" without posting your working out. Stop asking until you post your code, or at least a relevant sample of it.

 

[nathan98]

//world
var canvas;
var ctx;
var width = 600;
var height = 600;
var starfield;
var starX = 0;
var starY = 0;
var starY2 = -600;


//scoring
var score = 0;
var goal = 20;
var alive = true;
var lives = 1;
var gameStarted = false;






//Clear the canvas, this is required before each canvas frame update
function clearCanvas() {
ctx.clearRect(0, 0, width, height);
}

//Initialize image objects, canvas, and event listeners
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
enemy = new Image();
enemy.src = 'enemy.png';
ship = new Image();
ship.src = 'mariokart.png';
starfield = new Image();
starfield.src = 'starfield.jpg';
document.addEventListener('keydown', keyDown, true);
document.addEventListener('keyup', keyUp, false);
canvas.addEventListener('click', gameStart, false);
gameLoop();
}

//Used by an event listener. Removes the overall canvas listener once game has started.
function gameStart() {
gameStarted = true;
canvas.removeEventListener('click', gameStart, false);
}

//Game loop that calls all the functions needed to be updated
function gameLoop() {
clearCanvas();
drawStarfield();
if (alive && gameStarted && lives > 0) {
hitTest();
moveEnemies();
moveLaser();
drawEnemies();
drawShip();
drawLaser();
shipCollision();
}
scoreTotal();
//game = setTimeout(gameLoop, 1000 / 30); //not sure why 'game =' is included...
setTimeout(gameLoop, 1000 / 30); //this works too...
}

//Used to draw several text and shape objects for score, lives, and pre-game information.
function scoreTotal() {
ctx.font = 'bold 18px Lobster';
ctx.fillStyle = '#FF0000';
ctx.fillText('Score: ', 10, 55);
ctx.fillText(score, 70, 55);
ctx.fillText('Lives: ', 10, 30);
ctx.fillText(lives, 68, 30);

if (!alive) {
ctx.fillText('Game Over!', 245, (height / 2));

//Continue button
ctx.fillText('Click to Continue', 236, (height / 2) + 35);
canvas.addEventListener('click', continueButton, false);
}

//Pre-Game Text
if (!gameStarted) {
ctx.font = 'bold 50px Lobster';
ctx.fillText('Mario Racer', (width / 1.85) - 150, (height / 2)); //CHANGED THE TEXT AND WIDTH TO CATER FOR THE NEW WORD PREVIOUSLY WAS 2 (WIDTH)
ctx.font = 'bold 20px BlairMdITC TT';
ctx.fillText('Click to Play' , (width / 2.35) - 56, (height / 2) + 35); //CHANGED POSTIONING OF INSTRUCTIONS ORIGINAL (W/2) -100 (H / 2)+30
ctx.fillText('Use arrow keys to move', (width / 2.7) - 100, (height / 2.8) + 270); //CHANGED POSTIONING OF INSTRUCTIONS ORIGINAL (W/2) -100 (H / 2)+60
ctx.fillText('Use the Spacebar key to shoot', (width / 3.3) - 100, (height / 2.5) + 290); //CHANGED POSTIONING OF INSTRUCTIONS ORIGINAL (W/2) -100 (H / 2) +90

}
}

//Used by an event listener. Detects if mouse click is within a specific area.
function continueButton(e) {
if (cursorPos.x > (width / 2) - 53 && cursorPos.x < (width / 2) + 47 && cursorPos.y > (height / 2) + 10 && cursorPos.y < (height / 2) + 50) {
alive = true;
lives = 3;
reset();
canvas.removeEventListener('click', continueButton, false);
}
}


//Store x and y cursor position
function cursorPosition(x, y) {
this.x = x;
this.y = y;
}

//Check lives
function checkLives() {
lives -= 1;
if (lives < 0) {
reset();
} else if (lives == 0) {
alive = false;
}
}

//Finale// This checks to see if player score is >20 if so activates finale

function finale() {
var _img = document.getElementById('finale.png');
var newImg = new Image;
newImg.onload = function() {
_img.src = 'finale.png';
}






var img= new finale.png();
img.src = 'finale.png';
img.addEventListener("load", function() {
ctx.drawImage(image, 30, 30);
}, true);



}

//Reset enemies and player back to default position
function reset() {
var enemy_reset_x = 50;
ship_x = (width / 2) - 25;
ship_y = height - 75;
ship_w = 50;
ship_h = 57;

for (var i = 0; i < enemies.length; i++) {
enemies[0] = enemy_reset_x;
enemies[1] = -45;
enemy_reset_x = enemy_reset_x + enemy_w + 60;
}
}

//Draw a continuous, scrolling starfield (using two instances)
function drawStarfield() {
ctx.drawImage(starfield, starX, starY);
ctx.drawImage(starfield, starX, starY2);

if (starY > 600) {
starY = -599;
}

if (starY2 > 600) {
starY2 = -599;
}

starY += 1;
starY2 += 1;
}

//Initialize canvas when page is loaded
window.onload = init;

 

[Eluate]

I have tried using this. No luck what should I do ?

Looking at your code, it looks like you are doing something completely different in finale() compared to what you are doing in drawStarField().

Your finale code should look like this:

// if player score < 20 (implement this as code)
var img = new Image()
img.src = 'finale.png';
ctx.drawImage(image, 30, 30);

Also, you should only call finale() when a players score changes.