Im stuck on figuring out how to bring my character/player to the front of the canvas. and to make it the correct colour
#Changing the player colour
echo kettle
here is my code
lemme try to write it out so no download is needed
let player;
let pressedKeys = {};
function setup() {
createCanvas(800, 800);
player = new Player(width/2, height/2);
}
function draw() {
Background()
SmMount()
BgMount()
Ground()
player.update();
player.draw();
}
function keyPressed(){
pressedKeys[key] = true;
}
function keyReleased(){
delete pressedKeys[key];
}
class Player {
constructor(x, y){
this.x = x;
this.y = y;
this.speed = 4;
}
update(){
let mvmt = createVector(0, 0);
if(pressedKeys.a){
mvmt.x -= 1;
}
if(pressedKeys.d){
mvmt.x += 1;
}
if(pressedKeys.w){
mvmt.y -= 1;
}
if(pressedKeys.s){
mvmt.y += 1;
}
mvmt.setMag(this.speed);
this.x += mvmt.x;
this.y += mvmt.y;
}
draw(){
fill(0, 0, 0);
circle(this.x, this.y, 30);
}
}
function Background(){
let gradient = drawingContext.createLinearGradient(400, 0, 400, 800);{
gradient.addColorStop(0, color(1, 1, 1));
gradient.addColorStop(0.5, color(8, 100, 199));
gradient.addColorStop(1, color(88, 206, 224));
drawingContext.fillStyle = gradient;
rect(-100, -100, 900, 900)
}
}
function Ground(){
let gradient = drawingContext.createLinearGradient(50, 300, 750, 800);{
gradient.addColorStop(0, color(7, 11, 54));
gradient.addColorStop(0.28, color(60, 70, 181));
gradient.addColorStop(0.57, color(39, 46, 122));
gradient.addColorStop(0.65, color(112, 44, 15));
gradient.addColorStop(0.85, color(77, 29, 8));
gradient.addColorStop(1, color(26, 8, 0));
drawingContext.fillStyle = gradient;
stroke(31, 38, 115);
beginShape();
vertex(0, 300);
vertex(5, 295);
vertex(20, 375);
vertex(32, 365);
vertex(40, 375);
vertex(60, 470);
vertex(90, 475);
vertex(94, 575);
vertex(103, 675);
vertex(119, 685);
vertex(135, 750);
vertex(0, 750);
endShape(CLOSE);
beginShape();
vertex(362, 745);
vertex(365, 705);
vertex(380, 700);
vertex(400, 715);
vertex(425, 708);
vertex(460, 720);
vertex(473, 708);
vertex(483, 708);
vertex(510, 750);
endShape(CLOSE);
noStroke()
rect(0, 740, 900, 100);
}
}
function BgMount(){
let gradient = drawingContext.createLinearGradient(600, 400, 800, 740);{
gradient.addColorStop(0, color(107, 41, 13));
gradient.addColorStop(0.48, color(61, 21, 4));
gradient.addColorStop(0.65, color(46, 15, 1));
gradient.addColorStop(1, color(26, 8, 0));
drawingContext.fillStyle = gradient;
beginShape();
vertex(738, 740);
vertex(738, 540);
vertex(750, 520);
vertex(755, 510);
vertex(760, 505);
vertex(785, 495);
vertex(800, 500);
vertex(800, 740);
endShape(CLOSE);
stroke(66, 31, 16);
beginShape();
vertex(465, 740);
vertex(517, 710);
vertex(543, 650);
vertex(595, 630);
vertex(630, 625);
vertex(652, 600);
vertex(665, 560);
vertex(658, 543);
vertex(648, 538);
vertex(660, 440);
vertex(655, 430);
vertex(680, 400);
vertex(740, 460);
vertex(790, 780);
endShape(CLOSE);
}
}
function SmMount(){
let gradient = drawingContext.createLinearGradient(350, 500, 350, 735);{
gradient.addColorStop(0, color(7, 11, 54));
gradient.addColorStop(0.5, color(39, 46, 122));
gradient.addColorStop(0.65, color(3, 9, 77));
gradient.addColorStop(1, color(60, 70, 181));
drawingContext.fillStyle = gradient;
stroke(31, 38, 115)
beginShape();
vertex(190, 780);
vertex(240, 730);
vertex(253, 710);
vertex(260, 680);
vertex(280, 695);
vertex(283, 720);
vertex(290, 740);
endShape(CLOSE);
beginShape();
vertex(155, 677);
vertex(164, 640);
vertex(183, 620);
vertex(190, 670);
vertex(202, 685);
vertex(243, 720);
vertex(263, 770);
vertex(148, 780);
endShape(CLOSE);
beginShape();
vertex(280, 750);
vertex(290, 710);
vertex(295, 705);
vertex(300, 710);
vertex(315, 695);
vertex(319, 703);
vertex(340, 715);
vertex(355, 720);
vertex(372, 730);
vertex(380, 742);
endShape(CLOSE);
}
}