iT邦幫忙

1

javascript引用P5.js的碰裝偵測原理?

各位好,小弟最近用javascript引用P5.js寫了一個簡易的彈幕遊戲,但想請問最後碰撞偵測(請看程式碼check dead)的部分,是如何使用畢氏定理偵測?
完整程式碼:

const w = 400;  //設定遊戲寬度
const h = 400;  //設定遊戲高度
let score = 0;  //設定初始分數
let check = 1;  //死亡偵測
function setup() { //創造w*h大小的畫布
  createCanvas(w, h);
} 


function createBall() { //定義創造球時的基本參數
  let ball = {
    x: w/2 + Math.random()*100, //初始x座標
    y: h/2 + Math.random()*100, //初始y座標
    vx: Math.random()*2 + 1,  //球x軸滑行速度
    vy: Math.random()*2 + 1,  //球y軸滑行速度
    c: [Math.random() * 255, Math.random() * 255, Math.random() * 255],
    //球的顏色
    r: Math.random() * 20 + 5 //球的半徑
  };
  return ball;
}

let balls = [] //創造球的數列
for(i = 0; i < 30; i++){
  balls.push(createBall());
}//在球的數列創造30顆球

function draw() {
  background(20);//設定背景顏色
  
  for(let ball of balls){  //畫出所有球
    if(check > 0){  //如果尚未GameOver時
      fill(color(ball.c[0], ball.c[1], ball.c[2])); //球的顏色隨機
      ball.x += ball.vx;  //球x座標移動
      ball.y += ball.vy;  //球y座標移動
      if(ball.x > w||ball.x < 0) {  //碰到左右邊界反彈,並加分
        ball.vx = ball.vx * -1;
        score = score + 1;
      }
      if(ball.y > h||ball.y < 0) {  //碰到上下邊界反彈,並加分
        ball.vy = ball.vy * -1;
        score = score + 1;
      }
    }
    ellipse(ball.x, ball.y, ball.r, ball.r);  //畫出球
    triangle(mouseX, mouseY - 5, mouseX - 5,  //畫出主角三角形
           mouseY + 5, mouseX + 5, mouseY + 5);
  
    //check dead
    //ball.x, ball.y mouseX, mouseY
    if( (ball.x - mouseX)*(ball.x - mouseX) + (ball.y - mouseY)*(ball.y - mouseY) < ball.r*ball.r ) { //若撞到球,進入GameOver
      check = 0;
      console.log('dead');
    } 
  }


  fill(color(255,255,255));
  textSize(20);
  text(score, 10, 30); //顯示分數
  
}


看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2018-07-11 10:31:08 檢舉
不就是檢查 (mouseX, mouseY) 到 (ball.x, ball.y) 的距離平方,是否小於半徑的平方?
froce iT邦高手 1 級 ‧ 2018-07-11 11:19:30 檢舉
我想說他code明明就寫對,到底要問什麼?
fillano iT邦超人 1 級 ‧ 2018-07-11 11:56:48 檢舉
所以code是誰寫的XD
很久以前自己寫的,但很久以後,已經忘記自己在寫甚麼了....感謝!

尚未有邦友回答

立即登入回答