JavaScript中的Ping Pong?

时间:2016-03-08 19:02:41

标签: javascript

我正在尝试打乒乓球比赛。此刻,当球按下时,我将球移动并且两个拨片移动。但球没有从桨上反弹。有代码可以反弹播放器2桨,但它似乎不起作用。这是我知道的很多代码。你能帮我找出问题所在吗?

"use strict";
// Variables

var c = document.getElementById("sCanvas");
var ctx = sCanvas.getContext("2d");
var cHeight = sCanvas.height;
var cWidth = sCanvas.width;

//Objects

//create paddle object

class Paddle {
  constructor(x, y) {
    this.colour = "red";
    this.xPoss = x;
    this.yPoss = y;
    this.width = 12;
    this.height = 60;
    this.speed = 3;
  }

  drawMe() {
    ctx.fillStyle = this.colour;
    ctx.fillRect(this.xPoss, this.yPoss, this.width, this.height);
  }
} // end paddle object

//create the sphere object
class Sphere {
  constructor() {
    this.radius = (10);
    this.colour = "blue";
    this.xPos = 65; //Math.random() * cWidth;
    this.yPos = 100; //Math.random() * cHeight;
    this.speedY = 5; //* Math.random();
    this.speedX = 5; //* Math.random();
  }

  drawMe() {
      //method to draw itself
      ctx.beginPath();
      ctx.arc(this.xPos, this.yPos, this.radius, 0, Math.PI * 2, true);
      ctx.fillStyle = this.colour;
      ctx.fill();

    }
    //method to move itself
  moveMe() {
      this.yPos += this.speedY;
      this.xPos += this.speedX;

      //bounce off the bottom wall
      if (this.yPos > cHeight - this.radius) {
        this.speedY = -this.speedY;

      } //bounce off the top wall
      else if (this.yPos < 0 + this.radius) {
        this.speedY = -this.speedY;
      }

      //stop ball if hit right side
      if (this.xPos > cWidth) {
        this.speedX = 0;
        this.speedY = 0;

      }
      //bounce off player 2 paddle
      else if (this.xPos > player2.xPoss && (this.yPos > player2.yPoss && this.yPos < (player2.yPoss + player2.height))) {
        this.speedX = -this.speedX;

      }

    }
    //end moveMe function
} // end Sphere object

//******************
// create game objects
//******************
var ball = new Sphere();
var player1 = new Paddle(10, 150);
var player2 = new Paddle(580, 150);

//*********************
// Deal with key presses
// **********************

var keysDown = []; //empty array to store which keys are being held down


window.addEventListener("keydown", function(event) {
  keysDown[event.keyCode] = true; //store the code for the key being pressed
});

window.addEventListener("keyup", function(event) {
  delete keysDown[event.keyCode];
});

function checkKeys() {

  if (keysDown[90]) {
    if (player1.yPoss > 0) {
      player1.yPoss = -player1.speed; //z
    }
  }

  if (keysDown[88]) {
    if (player1.yPoss < (cHeight - player1.height)) {
      player1.yPoss += player1.speed; //x
    }
  }

  if (keysDown[190]) {
    if (player2.yPoss > 0) {
      player2.yPoss = -player2.speed; //"."
    }
  }

  if (keysDown[188]) {
    if (player2.yPoss < (cHeight - player2.height)) {
      player2.yPoss += player2.speed; //","
    }
  }

}

// your 2 new sets of code here for 2 more keys for player 2





//*********************
// Make the score board
// **********************



//*********************
// launch the ball from the centre, left and right, on space bar
// **********************


function render() {
  requestAnimationFrame(render);
  ctx.clearRect(0, 0, cWidth, cHeight);
  ball.drawMe();
  ball.moveMe();
  player1.drawMe();
  player2.drawMe();
  checkKeys();

}

render(); //set the animation and drawing on canvas going
<canvas id="sCanvas" width="600" height="400" style="border: solid;"></canvas>

0 个答案:

没有答案