Notes

// Inspired by: https://editor.p5js.org/kchung/sketches/Sk1BzeMI7

// This program will move an avatar to collect gold coins.

function preload() {
// Image is 50 x 50 pixels.
img = loadImage('https://i.imgur.com/AFfUFBS.png');
img2 = loadImage('https://i.imgur.com/vrVNQcW.png');
}

var x = 200; // initial x-coordinate for avatar
var y = 200; // initial y-coordinate for avatar
var c = 'white'; // initial avatar color
var s = 10; //initial avatar size
var coinSize = 10; // set size of coin

var coins = []; // the array to store the coin positions

function setup() {
createCanvas(400, 400);
rectMode(CENTER);
for(var i = 0; i < 4; i++) {
for(var j = 0; j < 4; j++) {
coins.push(new Coin(80+i*80,80+j*80));
}
}
}

function draw() {
background(0);
image(img, 0, 0, width, height, 0, 0, img.width, img.height);
// Draw Coins
for(var i = 0; i < coins.length; i++) {
coins[i].display();
var d = dist(coins[i].x,coins[i].y,x,y)
var d2 = s/2 + coinSize/2;
if(d < d2) {
coins.splice(i,1);
s += 10;
}
}

// Draw Avatar

image(img2, x, y, s, s);


// Allow avatar to move
if(keyIsPressed) {
if(keyCode === UP_ARROW) {
y--;
} else if(keyCode === DOWN_ARROW) {
y++;
} else if(keyCode === LEFT_ARROW) {
x--;
} else if(keyCode === RIGHT_ARROW) {
x++;
}
}
}

// Object that stores positions of coins
function Coin(x,y) {
this.x = x;
this.y = y;

this.display = function() {
fill('yellow');
ellipse(this.x,this.y,coinSize);
}
}