How to convert Khan academy code to p5.js

Question

I'm using the https://editor.p5js.org/Josef37/sketches/RGDv9lHkK for convert to p5.js and I'm still don't know how to convert 100% correct, the picture won't show up when i convert myCode from the khanAcademy Original code to p5.js and can you also help me put the sound clack.wave when Block fall down in my code as well?

myCode

function preload() {
  blockImg = loadImage('block.png');
}

var Block = function(x, y) {
    this.x = x;
    this.y = y;
    this.img = loadImage("block.png");
    this.sticks = 0;
};


  
  
function setup() {
  createCanvas(windowWidth, windowHeight);

Block.prototype.draw = function() {
    image(this.img, this.x, this.y, 40, 40);
};
  
Block.prototype.hop = function() {
    this.img = getImage("block.png");
    this.y -= -44;
};

Block.prototype.fall = function() {
    this.img = getImage("block.png");
    this.y += 5;
};
}



function draw() {
  background(200);

var block = new Block(10, 300);
block.draw();

}

I'm using P5.js on this website >https://editor.p5js.org/Josef37/sketches/RGDv9lHkK <

https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/side-scroller/a/beaver-character Original Code from KhanAcademy

var Beaver = function(x, y) {
    this.x = x;
    this.y = y;
    this.img = getImage("creatures/Hopper-Happy");
    this.sticks = 0;
};

Beaver.prototype.draw = function() {
    image(this.img, this.x, this.y, 40, 40);
};

Beaver.prototype.hop = function() {
    this.img = getImage("creatures/Hopper-Jumping");
    this.y -= -44;
};

Beaver.prototype.fall = function() {
    this.img = getImage("creatures/Hopper-Happy");
    this.y += 5;//Down Gavity
};


var beaver = new Beaver(10, 300);
beaver.draw();

Answer 1

The problem with your code is that you're trying to call the asynchronous loadImage() function within your constructor, which means the image will not be able to load before you attempt to draw the Block with .draw().

You already do check to make sure it has finished loading by putting an initial loadImage() call in your preload(), so the image will be loaded by the time your setup() and draw() functions run. This means you can just set the image to the preloaded one within your constructor:

var Block = function (x, y) {
  this.x = x;
  this.y = y;
  this.img = blockImg;
  this.sticks = 0;
};

Also, make sure to switch all your getImage()s to preloaded loadImage()s and their returned Objects, as getImage() does not exist within p5.js and using just loadImage() may give you the same problem you're having here.

Answer 2

Also, you have to have the file loaded into p5js. you have to run the program with the asset. In Khan academy they have it for you.