各位好,小弟最近用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); //顯示分數
}