gpt4 book ai didi

javascript - javascript中的乒乓球游戏碰撞

转载 作者:数据小太阳 更新时间:2023-10-29 04:48:48 26 4
gpt4 key购买 nike

您好,我尝试制作乒乓球游戏。但是我的碰撞方法不起作用我看不出我做错了什么。球穿过球员。碰撞方法对我来说似乎不错

 if (player.left < ball.right && player.right > ball.left &&
player.top < ball.bottom && player.bottom > ball.top) {
ball.vel.x = -ball.vel.x;
}

class Vec {
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
}

class Rect {
constructor(w, h) {
this.pos = new Vec;
this.size = new Vec(w, h)
}
get left() {
return this.pos.x - this.size.x / 2;
}
get right() {
return this.pos.x - this.size.x / 2;
}
get top() {
return this.pos.y - this.size.y / 2;
}
get bottom() {
return this.pos.y - this.size.y / 2;
}
}
class Ball extends Rect {
constructor() {
super(10, 10);
this.vel = new Vec;
}
}
class Player extends Rect {
constructor() {
super(20, 100);
this.score = 0;
}
}
class Pong {
constructor(canvas) {
this._canvas = canvas;
this._context = canvas.getContext('2d');

this.ball = new Ball;
this.ball.pos.x = 100;
this.ball.pos.y = 50;

this.ball.vel.x = 100;
this.ball.vel.y = 100;

this.players = [
new Player,
new Player,
];

this.players[0].pos.x = 40;
this.players[1].pos.x = this._canvas.width - 40;
this.players.forEach(player => {
player.pos.y = this._canvas.height / 2;
})


let lastTime;
const callback = (millis) => {
if (lastTime) {
this.update((millis - lastTime) / 1000);
}
lastTime = millis;
requestAnimationFrame(callback);
};
callback();
}
collide(player, ball) {
if (player.left < ball.right && player.right > ball.left &&
player.top < ball.bottom && player.bottom > ball.top) {
ball.vel.x = -ball.vel.x;
}
}
draw() {

this._context.fillStyle = '#000';
this._context.fillRect(0, 0, this._canvas.width, this._canvas.height);

this.drawRect(this.ball);
this.players.forEach(player => this.drawRect(player));
}
drawRect(rect) {
this._context.fillStyle = '#fff';
this._context.fillRect(rect.left, rect.top, rect.size.x, rect.size.y);
}
update(dt) {
this.ball.pos.x += this.ball.vel.x * dt;
this.ball.pos.y += this.ball.vel.y * dt;

if (this.ball.left < 0 || this.ball.right > this._canvas.width) {
this.ball.vel.x = -this.ball.vel.x;
}
if (this.ball.top < 0 || this.ball.bottom > this._canvas.height) {
this.ball.vel.y = -this.ball.vel.y;
}
this.players[1].pos.y = this.ball.pos.y;

this.players.forEach(player => this.collide(player, this.ball));

this.draw();
}

}
const canvas = document.getElementById('pong');
const pong = new Pong(canvas);

canvas.addEventListener('mousemove', event => {
pong.players[0].pos.y = event.offsetY;
})
<body>
<canvas id="pong" width="600" height="400"></canvas>
</body>

最佳答案

它似乎在矩形碰撞时使用标准矩形,例如:

if ( player.pos.x < ball.pos.x + ball.size.x &&
player.pos.x + player.size.x > ball.pos.x &&
player.pos.y < ball.pos.y + ball.size.y &&
player.size.y + player.pos.y > ball.pos.y ) {
ball.vel.x = -ball.vel.x;
}

关于javascript - javascript中的乒乓球游戏碰撞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54852140/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com