Question

我正在使用JavaScript画布制作乒乓球式游戏。我正在尝试使用乒乓球板的x和y网格值来创建球的原型函数，以使其在碰触时从乒乓球板弹起。我尝试了几种不同的方法，但似乎无法将球从乒乓球板上弹开。我认为游戏功能的这一方面不会是困难的部分。我将在下面提供我认为是问题的代码段：

var Pongboard = function() {
  this.x = 15;
  this.y = 15;
}

Ball.prototype.draw = function() {
  makeBall(this.x, this.y, 5);
}

var pongboardValues = Object.values(Pongboard);
var pongX = pongboardValues[0];
var pongY = pongboardValues[1];

Ball.prototype.checkPongCollision = function() {
  if (this.x < pongX && this.y < pongY) {
    this.xSpeed = -this.xSpeed;
    this.ySpeed = -this.ySpeed;
  };
}

关于如何使它工作的任何建议？任何提示将不胜感激。如果有帮助，我将在下面提供完整的代码。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

//Create ball function
function makeBall (x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI*2, false);
  ctx.fill();
}

//Create pong board function
function makePong (x, y) {
  ctx.fillRect(x, y, 10, 60);
}

//Ball construcor function
var Ball = function() {
  this.x = width;
  this.y = height/2;
  this.xSpeed = 6;
  this.ySpeed = Math.random()*8 - 2;
}

//Pong board constructor function
var Pongboard = function() {
  this.x = 15;
  this.y = 15;
}

//These are the values for the Pongboard object's location
var pongboardValues = Object.values(Pongboard);
var pongX = pongboardValues[0];
var pongY = pongboardValues[1];

Ball.prototype.draw = function() {
  makeBall(this.x, this.y, 5);
}

Ball.prototype.move = function() {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 0 || this.x > width) {
    this.xSpeed = -this.xSpeed;
  };
  if (this.y < 0 || this.y > height) {
    this.ySpeed = -this.ySpeed;
  };
}

Ball.prototype.checkPongCollision = function() {
  if (this.x < pongX && this.y < pongY) {
    this.xSpeed = -this.xSpeed;
    this.ySpeed = -this.ySpeed;
  };
}

Pongboard.prototype.draw = function() {
  makePong(this.x, this.y);
}

var keyNames = {
  38: "up",
  40: "down"
};

Pongboard.prototype.moveUpAndDown = function(direction) {
  if (direction==="up") {
    this.y = this.y += -1*10;
  };
  if (direction==="down") {
    this.y = this.y += 10;
  };
};


var ball = new Ball();
var pong = new Pongboard();

$("#start-button").click(function() {
  setInterval(function() {
    ctx.clearRect(0, 0, width, height);
    pong.draw();
    ball.draw();
    ball.move();
    ctx.strokeRect(0, 0, width, height);
  }, 30);
})

$("body").keydown(function(event) {
  var direction = keyNames[event.keyCode];
  pong.moveUpAndDown(direction);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start-button">Start</button><br>
<canvas width=300 height=200 id="canvas"></canvas>

Answer 1

在这里，我已经按照我认为您想要的方式进行工作。

您可以扩展它以使球也沿Y轴随机反弹。.

我已经注释掉确实没有做任何事情的代码。

另外值得注意的是，您甚至没有调用checkPongCollision，所以我将其放在了计时器中。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

//Create ball function
function makeBall (x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI*2, false);
  ctx.fill();
}

//Create pong board function
function makePong (x, y) {
  ctx.fillRect(x, y, 10, 60);
}

//Ball construcor function
var Ball = function() {
  this.x = width;
  this.y = height/2;
  this.xSpeed = 6;
  this.ySpeed = Math.random()*8 - 2;
}

//Pong board constructor function
var Pongboard = function() {
  this.x = 15;
  this.y = 15;
}

//These are the values for the Pongboard object's location
//not needed..
//var pongboardValues = Object.values(Pongboard);
//var pongX = pongboardValues[0];
//var pongY = pongboardValues[1];

Ball.prototype.draw = function() {
  makeBall(this.x, this.y, 5);
}

Ball.prototype.move = function() {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 0 || this.x > width) {
    this.xSpeed = -this.xSpeed;
  };
  if (this.y < 0 || this.y > height) {
    this.ySpeed = -this.ySpeed;
  };
}

Ball.prototype.checkPongCollision = function() {
  //if (this.x < pong.x && this.y < pong.y) {
  if (
    this.x >= pong.x && this.x < pong.x + 10 &&
    this.y >= pong.y && this.y < pong.y + 60) 
  { 
    this.xSpeed = -this.xSpeed;
    //this.ySpeed = -this.ySpeed;
  };
}

Pongboard.prototype.draw = function() {
  makePong(this.x, this.y);
}

var keyNames = {
  38: "up",
  40: "down"
};

Pongboard.prototype.moveUpAndDown = function(direction) {
  if (direction==="up") {
    this.y = this.y += -1*10;
  };
  if (direction==="down") {
    this.y = this.y += 10;
  };
};


var ball = new Ball();
var pong = new Pongboard();

$("#start-button").click(function() {
  this.style.display = "none";
  setInterval(function() {
    ctx.clearRect(0, 0, width, height);
    pong.draw();
    ball.draw();
    ball.move();
    ctx.strokeRect(0, 0, width, height);
    ball.checkPongCollision();
  }, 30);
})

$("body").keydown(function(event) {
  var direction = keyNames[event.keyCode];
  pong.moveUpAndDown(direction);
});

body {
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="float:left" id="start-button">Start</button>
<canvas width=300 height=180 id="canvas"></canvas>

如何使用构造函数中的值制作原型函数

1 个答案: