LIS-FTWD-BrandyMcArthur#156

[bdmcarthur]

No description provided.

[soniameller]

Hey Brandy! Very good job.
I will add some comments so that you get a bit further.

If you check your treasure, you can see it is blinking, this happens because every time you move it is waiting for the load event listener.

The following is your code for the drawTreasure() function

function drawTreasure (){
    if(treasureItem.row === player.row && treasureItem.col === player.col){
        treasureItem.row = Math.floor(Math.random() * Math.floor(10));
        treasureItem.col = Math.floor(Math.random() * Math.floor(10));
    }

    let position = [treasureItem.row * 50, treasureItem.col * 50]

    const image = new Image();
    image.src = 'images/treasure.png';
  
    image.addEventListener('load', function () {
        const imageWidth = image.width/4.5;
        const imageHeight = image.height/4.5;
  
    ctx.drawImage(image, position[0], position[1], imageWidth, imageHeight);
    });
}

The suggestions I have for you are:

• For cleaner code, always define the variable in the top.
• In the example below I removed the definition of width and height from the event and put them in the top as well.
• I added an if statement with the condition image.complete. This is a property that returns whether or not the browser is finished loading an image. This will prevent the blinking.

function drawTreasure() {
  const image = new Image();
  image.src = "images/treasure.png";
  const imageWidth = image.width / 4.5;
  const imageHeight = image.height / 4.5;
  let position = [treasureItem.row * 50, treasureItem.col * 50];

  if (image.complete) {
    ctx.drawImage(image, position[0], position[1], imageWidth, imageHeight);
  } else {
    image.addEventListener('load',() => {
      ctx.drawImage(image, position[0], position[1], imageWidth, imageHeight);
    });  
  }
}

• There was also a problem when the player got the treasure. You are checking and drawing in the function treasure so you call the random function a bit late. If you move the condition to where you are listening to key events it will update when you get into the cell.
• Remember is always better practice to eddEventListener(event, function) than calling for example .onkeydown

document.addEventListener('keydown',function(e) {
  e.preventDefault();
  switch (e.keyCode) {
    case 37:
      player.moveLeft();
      break;
    case 38:
      player.moveUp();
      break;
    case 39:
      player.moveRight();
      break;
    case 40:
      player.moveDown();
      break;
  }

  if (treasureItem.row === player.row && treasureItem.col === player.col) {
    treasureItem.row = Math.floor(Math.random() * Math.floor(10));
    treasureItem.col = Math.floor(Math.random() * Math.floor(10));
  }
  drawEverything();
});

Let me know if this was not clear enough and we can talk it through!

[bdmcarthur]

Hi Sonia, That all makes sense, thanks so much!

…

On Fri, Aug 23, 2019 at 11:06 AM soniameller ***@***.***> wrote: Hey Brandy! Very good job. I will add some comments so that you get a bit further. If you check your treasure, you can see it is blinking, this happens because every time you move it is waiting for the load event listener. The following is your code for the drawTreasure() function function drawTreasure (){ if(treasureItem.row === player.row && treasureItem.col === player.col){ treasureItem.row = Math.floor(Math.random() * Math.floor(10)); treasureItem.col = Math.floor(Math.random() * Math.floor(10)); } let position = [treasureItem.row * 50, treasureItem.col * 50] const image = new Image(); image.src = 'images/treasure.png'; image.addEventListener('load', function () { const imageWidth = image.width/4.5; const imageHeight = image.height/4.5; ctx.drawImage(image, position[0], position[1], imageWidth, imageHeight); }); } The suggestions I have for you are: - For cleaner code, always define the variable in the top. - In the example below I removed the definition of width and height from the event and put them in the top as well. - I added an if statement with the condition image.complete. This is a property that returns whether or not the browser is finished loading an image. This will prevent the blinking. function drawTreasure() { const image = new Image(); image.src = "images/treasure.png"; const imageWidth = image.width / 4.5; const imageHeight = image.height / 4.5; let position = [treasureItem.row * 50, treasureItem.col * 50]; if (image.complete) { ctx.drawImage(image, position[0], position[1], imageWidth, imageHeight); } else { image.addEventListener('load',() => { ctx.drawImage(image, position[0], position[1], imageWidth, imageHeight); }); } } - There was also a problem when the player got the treasure. You are checking and drawing in the function treasure so you call the random function a bit late. If you move the condition to where you are listening to key events it will update when you get into the cell. - Remember is always better practice to eddEventListener(event, function) than calling for example .onkeydown document.addEventListener('keydown',function(e) { e.preventDefault(); switch (e.keyCode) { case 37: player.moveLeft(); break; case 38: player.moveUp(); break; case 39: player.moveRight(); break; case 40: player.moveDown(); break; } if (treasureItem.row === player.row && treasureItem.col === player.col) { treasureItem.row = Math.floor(Math.random() * Math.floor(10)); treasureItem.col = Math.floor(Math.random() * Math.floor(10)); } drawEverything(); }); Let me know if this was not clear enough and we can talk it through! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#8?email_source=notifications&email_token=AGHK2OJYJ3EK6PO4VCY6XXTQF6ZAVA5CNFSM4IOXLQK2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD47YNDY#issuecomment-524256911>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGHK2OPESBLNKEI6EM4NOJTQF6ZAVANCNFSM4IOXLQKQ> .