0
私はJavascriptでブレークアウトゲームをコーディングしています。私はMDNチュートリアルと別のチュートリアルを取って、OOPアプローチでオリジナルを修正しようとしています。今までは、パドルによる衝突検出を除いてすべて正常に動作します。それは起こっていない。何故ですか？ここに私のコードです。誰かが助けることができますか？ありがとう！ブレークアウト衝突検出
var canvas = document.getElementById('game');
var theLoop;
var paddleSpeed = 4;
//OBJECTS
//Game
function Game() {
this.width = canvas.width;
this.height = canvas.height;
this.ctx = canvas.getContext('2d');
this.ctx.fillStyle = "white";
this.p = new Paddle(0, 130);
this.p.x = (this.width - this.p.width)/2;
this.keys = new Keylistener();
this.ball = new Ball();
this.ball.x = this.width/2;
this.ball.y = 125;
this.ball.vy = Math.floor(Math.random() * 12 - 6);
this.ball.vx = 7 - Math.abs(this.ball.vy);
}
Game.prototype.draw = function() {
this.ctx.clearRect(0, 0, this.width, this.height);
this.p.draw(this.ctx);
this.ball.draw(this.ctx);
};
Game.prototype.update = function() {
if (this.paused) return;
this.ball.update();
//Right Paddle's Directions
if (this.keys.isPressed(37)) { // LEFT
this.p.x = Math.max(0, this.p.x - paddleSpeed);
} else if (this.keys.isPressed(39)) { // RIGHT
this.p.x = Math.min(this.p.x + paddleSpeed, this.width - this.p.width);
}
if (this.ball.x < this.ball.ballRadius || this.ball.x > this.width - this.ball.ballRadius) { //LEFT & RIGHT
this.ball.vx = -this.ball.vx;
}
if (this.ball.y < this.ball.ballRadius) { //TOP
this.ball.vy = -this.ball.vy;
} else if (this.ball.y > this.height - this.ball.ballRadius) {
if (this.ball.x > this.p.x && this.ball.x < this.p.x + this.p.width) {
this.ball.vy = -this.ball.vy;
console.log('hit');
} else {
// console.log(this.ball.x);
}
}
};
/////Paddle
function Paddle(x, y) {
this.x = x;
this.y = y;
this.width = 30;
this.height = 5;
this.score = 0;
}
Paddle.prototype.draw = function(p) {
p.fillRect(this.x, this.y, this.width, this.height);
};
///KEY LISTENER
function Keylistener() {
this.pressedKeys = [];
this.keydown = function(e) {
this.pressedKeys[e.keyCode] = true;
};
this.keyup = function(e) {
this.pressedKeys[e.keyCode] = false;
};
document.addEventListener("keydown", this.keydown.bind(this));
document.addEventListener("keyup", this.keyup.bind(this));
}
Keylistener.prototype.isPressed = function(key) {
return this.pressedKeys[key] ? true : false;
};
Keylistener.prototype.addKeyPressListener = function(keyCode, callback) {
document.addEventListener("keypress", function(e) {
if (e.keyCode == keyCode) callback(e);
});
};
///BALL
function Ball() {
this.x = 0;
this.y = 0;
this.vx = 0;
this.vy = 0;
this.ballRadius = 5;
}
Ball.prototype.update = function() {
this.x += this.vx;
this.y += this.vy;
};
Ball.prototype.draw = function(p) {
p.beginPath();
p.arc(this.x, this.y, this.ballRadius, 0, Math.PI * 2, false);
p.fill();
p.closePath();
};
//Initialize the game
var game = new Game();
//the Main Engine
function mainLoop() {
theLoop = setInterval(function() {
game.update();
game.draw();
}, 33.3333);
}
//calling the Main Engine
mainLoop();#game {
width: 800px;
height: 400px;
background-color: #353535;
}<canvas id="game"></canvas>