var player_maps = [ [0,0,1,1,1,1,0,0], [0,1,1,1,1,1,1,0], [0,1,2,1,1,2,1,0], [1,1,1,1,1,1,1,1], [1,1,1,1,1,1,1,1], [0,1,2,2,2,2,1,0], [3,3,3,3,3,3,3,3], [0,0,0,3,3,0,0,0], [0,0,0,3,3,0,0,0], [0,0,0,3,3,0,0,0], ] var main ; var button,button1,button2; var player; var goRight = false; var goLeft = false; var platform= [] ; var bg; function preload(){ bg = loadImage("https://i.ibb.co/8DRj6yy/cartoon-landscape-md.png"); } function setup(){ createCanvas(windowWidth,windowHeight).position(0,0); background(0); player = new Player(); button = createButton("⬆").id("b"); button.position(width/2-50,height-70); button.mouseClicked(jump); button1 = createButton("⬅").id("b"); button1.position(0,height-70); button1.touchStarted(left); button1.touchEnded(stopLeft); button2 = createButton("➡").id("b"); button2.position(width-80,height-70); button2.touchStarted(right); button2.touchEnded(stopRight); strokeWeight(0.5); platform.push(new Platform(width-100,height/2,100,20,"grey")); platform.push(new Platform(0,height/2,100,20,"grey")); platform.push(new Platform(50,height-180,100,20,"grey")); /*platform.push(new Platform(50,height-190,100,20,"grey")); */ platform.push(new Platform(150,height/2-50,100,20,"grey")); platform.push(new Platform(width-100,100,100,20,"grey")); platform.push(new Platform(0,200/2,100,20,"grey")); platform.push(new Platform(0,height-100,width,100,"grey")); } function draw(){ background(0); fill("grey"); image(bg,0,0,width,height); player.show(); player.edges() player.update() for(var i = 0;i=height-this.h){ // this.vel = 0; this.y = height-this.h; } if(goRight){ this.x+=this.x_vel++; } else if(goLeft){ this.x+=this.x_vel--; } if(this.y=width-this.w){ this.x = width-this.w; } else if(this.x<=0){ this.x= 0; } else if(this.y>=height-this.h){ this.y = height -this.h; } else if(this.y<=0){ this.y = 0; } } } function jump(){ player.jump(); }; function Platform(x,y,w,h,col){ this.x = x; this.y = y; this.w = w; this.h = h; this.col = col; this.show = function(){ fill(col) ; rect(this.x,this.y,this.w,this.h,5); } } function left(){ goLeft =true; goRight = false; } function right(){ goRight =true; goLeft =true; } function stopLeft(){ goLeft = false; goRight = false; } function stopRight(){ goLeft =false; goRight =false; } function collisionCheck(character, platform){ var vectorX = (character.x + (character.w/2)) - (platform.x + (platform.w/2)); var vectorY = (character.y + (character.h/2)) - (platform.y + (platform.h/2)); var halfWidths = (character.w/2) + (platform.w/2); var halfHeights = (character.h/2) + (platform.h/2); var collisionDirection = null; if(Math.abs(vectorX) < halfWidths && Math.abs(vectorY) < halfHeights){ var offsetX = halfWidths - Math.abs(vectorX); var offsetY = halfHeights - Math.abs(vectorY); if(offsetX < offsetY){ if (vectorX > 0){ collisionDirection = "left"; character.x += offsetX; } else { collisionDirection = "right"; character.x -= offsetX; } } else { if (vectorY > 0){ collisionDirection = "top"; character.y += offsetY; } else{ collisionDirection = "bottom"; character.y -= offsetY; } } } return collisionDirection; }

Platformer || p5.js