alert("Touch to start"); let bricks = []; function Paddle(x, y, w, h, dx){ this.x = x; this.y = y; this.w = w; this.h = h; this.dx = dx; this.left = false; this.right = false; this.create = ()=>{ fill("orange"); rect(this.x, this.y, this.w, this.h); } this.move=()=>{ if (this.left){ this.x -= this.dx; } else if(this.right){ this.x += this.dx; } } } function Brick(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.create = ()=>{ fill("brown"); rect(this.x, this.y, this.w, this.h); } this.collision = (ballT,ballB,ballL,ballR)=>{ let top = this.y; let bottom = this.y+this.h; let left = this.x; let right = this.x + this.w; if(bottom>=ballT &&bottom <= ballB){ if((left<= ballR && right >= ballR)||(right>=ballL&&left<=ballL)){ return 'y' } }else if(top<=ballB&& top>=ballT){ if((left<= ballR && right >= ballR)||(right>=ballL&&left<=ballL)){ return 'y' } } else if(left<=ballR&& left>=ballL){ if((bottom>=ballT && top<=ballT)||(bottom >= ballB && top <= ballB)){ return 'x' } } else if(right>= ballL && right<=ballR){ if((bottom>=ballT && top<=ballT)||(bottom >= ballB && top <= ballB)){ return 'x' } } else{ return 'z' } // console.log(top,bottom,left,right) } } function Ball(x, y, w, h, dx, dy){ this.x = x; this.y = y; this.w = w; this.h = h; this.dx = dx; this.dy = dy; this.spawn = false; this.create = ()=>{ if (this.spawn){ fill(0); ellipse(this.x, this.y, this.w, this.h); } } this.move = ()=>{ if (this.spawn){ this.x += this.dx; this.y += this.dy; if (this.x + this.w/2 >= width || this.x - this.w/2 <= 0){ this.dx *= -1; } else if (this.y + this.h/2 >= height || this.y - this.h/2 <= 0){ this.dy *= -1; } } } } function mousePressed(){ if (mouseY > 70){ b.spawn = true; //print("hit") } } function setup(){ createCanvas(342, 530); rectMode(CENTER); angleMode(DEGREES); noStroke(); buttonU = createButton("<").id("btnl"); buttonU.touchStarted(left); buttonU.touchEnded(stopLeft); buttonU.mousePressed(left); buttonU.mouseReleased(stopLeft); buttonB = createButton(">").id("btnr"); buttonB.touchStarted(right); buttonB.touchEnded(stopRight); buttonB.mousePressed(right); buttonB.mouseReleased(stopRight); p1 = new Paddle(width/2, height-50, 80, 5, 5); b = new Ball(width/2, height/2, 20, 20, 5, -5); for (let i=0; i<6; i++){ for (let j=0; j<5; j++){ bricks.push(new Brick(i*55+30, j*35, 50, 30)); } } } function left(){ p1.left = true; } function stopLeft(){ p1.left = false; } function right(){ p1.right = true; } function stopRight(){ p1.right = false; } function draw(){ background(255); p1.create(); p1.move(); b.create(); b.move(); let ballTop = b.y - b.h/2; let ballBottom = b.y + b.h/2; let ballLeft = b.x - b.w/2; let ballRight = b.x + b.w/2; for (let i in bricks){ bricks[i].create(); let res =bricks[i].collision(ballTop,ballBottom,ballLeft,ballRight) if(res == 'y'){ b.dy *= -1; bricks.splice(i,1) break } else if(res == 'x'){ b.dx *= -1; bricks.splice(i,1) break } //console.log(res) } let paddleTop = p1.y - p1.h/2; let paddleBottom = p1.y + p1.h/2; let paddleLeft = p1.x - p1.w/2; let paddleRight = p1.x + p1.w/2; if (ballBottom > paddleTop && ballTop < paddleBottom && ballLeft < paddleRight && ballRight > paddleLeft){ b.dy *= -1; } else { return false; } }

Q/A p5js collision help