Javascript Image Help (1 Viewer)

nathan98

New Member
Joined
Mar 31, 2015
Messages
14
Gender
Male
HSC
2016
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!

Screen Shot 2015-07-17 at 8.29.04 pm.png
Screen Shot 2015-07-17 at 8.29.55 pm.png
 

GoldyOrNugget

Señor Member
Joined
Jul 14, 2012
Messages
583
Gender
Male
HSC
2012
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.
 

dan964

what
Joined
Jun 3, 2014
Messages
3,473
Location
South of here
Gender
Male
HSC
2014
Uni Grad
2019
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.
 

GoldyOrNugget

Señor Member
Joined
Jul 14, 2012
Messages
583
Gender
Male
HSC
2012
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

New Member
Joined
Mar 31, 2015
Messages
14
Gender
Male
HSC
2016
//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

Member
Joined
May 13, 2015
Messages
55
Gender
Male
HSC
2017
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.
 
Last edited:

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top