1

我正在检查画布。现在我有小代码，我有桨和球，就像在砖游戏中一样。每次我击球时我都想添加额外的球，或者更好的是我想添加 x5 球。我只是想知道如何完成这项工作。也许某种我可以乘以的球计数器，或者每次我击球时调用我的抽球函数。任何建议如何解决这个问题？

我的球码

'use strict';
const canvas = document.getElementById('gameCanvas');
let context;

const ball = {
  ballX: 90,
  ballY: 90,
  size: 10,
  ballSpeedX: 5,
  ballSpeedY: 5,
  color: '#ffffff',
  ballSpedvar: 0.35,
};

const paddle = {
  width: 100,
  thick: 10,
  paddleX: 400,
  paddleDistEdge: 50,
  color: '#ee4fee',
};

window.onload = function () {
  context = canvas.getContext('2d');
  canvas.addEventListener('mousemove', updateMousePosition);

  const framesPerSecond = 30;
  setInterval(updateAll, 1000 / framesPerSecond);
};

const updateAll = () => {
  moveAll();
  drawAll();
};

const updateMousePosition = (e) => {
  /* get mous position */
  const rect = canvas.getBoundingClientRect();
  const root = document.documentElement;
  const mouseX = e.clientX - rect.left - root.scrollLeft;
  // const mouseY = e.clientY - rect.top - root.scrollTop;

  paddle.paddleX = mouseX - paddle.width / 2;
  // paddle.paddleY = mouseY;
};

const moveAll = () => {
  ball.ballX += ball.ballSpeedX;
  ball.ballY += ball.ballSpeedY;

  if (ball.ballX > canvas.width) {
    //left
    ball.ballSpeedX *= -1;
  } else if (ball.ballX < 0) {
    //right
    ball.ballSpeedX *= -1;
  }

  if (ball.ballY > canvas.height) {
    //down
    resetBall();
    // ball.ballSpeedY *= -1;
  } else if (ball.ballY < 0) {
    // top
    ball.ballSpeedY *= -1;
  }
  const paddleTopEdgeY = canvas.height - (paddle.paddleDistEdge + 11);
  const paddleBottomEdgeY = paddleTopEdgeY + paddle.thick;
  const paddleLeftEdgeX = paddle.paddleX;
  const paddleRightEdgeY = paddleLeftEdgeX + paddle.width;

  if (
    ball.ballY > paddleTopEdgeY && //below paddle
    ball.ballY < paddleBottomEdgeY && //above bottom of paddle
    ball.ballX > paddleLeftEdgeX && // right of the left side of paddle
    ball.ballX < paddleRightEdgeY // left of right side paddle
  ) {
    ball.ballSpeedY *= -1;

    const paddleCenterX = paddle.paddleX + paddle.width / 2;
    const ballDistFromCenterX = ball.ballX - paddleCenterX;

    ball.ballSpeedX = ballDistFromCenterX * ball.ballSpedvar;
  }
};

/* draw all elements */
const drawAll = () => {
  /* draw canvas */
  colorRect(0, 0, canvas.width, canvas.height, '#000000');

  /* draw paddle */
  colorRect(
    paddle.paddleX,
    canvas.height - paddle.paddleDistEdge,
    paddle.width,
    paddle.thick,
    paddle.color
  );

  /* draw ball */
  colorCircle(ball.ballX, ball.ballY, ball.size, ball.color);
};

const colorRect = (topLeftX, topLeftY, boxWidth, boxHeight, fillColor) => {
  context.fillStyle = fillColor;
  context.fillRect(topLeftX, topLeftY, boxWidth, boxHeight);
};

const colorCircle = (centerX, centreY, radius, fillColor) => {
  context.fillStyle = fillColor;
  context.beginPath();
  context.arc(centerX, centreY, radius, 0, Math.PI * 2, true);
  context.fill();
};

const resetBall = () => {
  ball.ballX = canvas.width / 2;
  ball.ballY = canvas.height / 2;
};
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brick game</title>
 
  </head>
  <body>
    <div class="container">
      <h1>Brick Game</h1>
      <canvas id="gameCanvas" width="800" height="600"> </canvas>
    </div>
  </body>
</html>

4

1 回答 1

1 

const canvas = document.getElementById('gameCanvas');
let context;

// array of ball instances
const balls = [];
// Ball class
class Ball {
  constructor() {
    balls.push(this);
  }
  ballX= 90;
  ballY= 90;
  size= 10;
  ballSpeedX= 5;
  ballSpeedY= 5;
  color= '#ffffff';
  ballSpedvar= 0.35;
  draw() {
    colorCircle(this.ballX, this.ballY, this.size, this.color);
  }
  reset() {
    this.ballX = canvas.width / 2;
    this.ballY = canvas.height / 2;
  }
};
// First ball..
new Ball();


const paddle = {
  width: 100,
  thick: 10,
  paddleX: 400,
  paddleDistEdge: 50,
  color: '#ee4fee',
};

window.onload = function () {
  context = canvas.getContext('2d');
  canvas.addEventListener('mousemove', updateMousePosition);
  const framesPerSecond = 30;
  setInterval(updateAll, 1000 / framesPerSecond);
};

const updateAll = () => {
  moveAll();
  drawAll();
};

const updateMousePosition = (e) => {
  /* get mous position */
  const rect = canvas.getBoundingClientRect();
  const root = document.documentElement;
  const mouseX = e.clientX - rect.left - root.scrollLeft;
  // const mouseY = e.clientY - rect.top - root.scrollTop;

  paddle.paddleX = mouseX - paddle.width / 2;
  // paddle.paddleY = mouseY;
};

const moveAll = () => {
  const paddleTopEdgeY = canvas.height - (paddle.paddleDistEdge + 11);
  const paddleBottomEdgeY = paddleTopEdgeY + paddle.thick;
  const paddleLeftEdgeX = paddle.paddleX;
  const paddleRightEdgeY = paddleLeftEdgeX + paddle.width;

  balls.forEach(ball => {
    ball.ballX += ball.ballSpeedX;
    ball.ballY += ball.ballSpeedY;

    if (ball.ballX > canvas.width) {
      ball.ballSpeedX *= -1;
    } else if (ball.ballX < 0) {
      ball.ballSpeedX *= -1;
    }

    if (ball.ballY > canvas.height) {
      ball.reset();
    } else if (ball.ballY < 0) {
      ball.ballSpeedY *= -1;
    }
    
    if (
      ball.ballY > paddleTopEdgeY && //below paddle
  //    ball.ballY < paddleBottomEdgeY && //above bottom of paddle
      ball.ballX > paddleLeftEdgeX && // right of the left side of paddle
      ball.ballX < paddleRightEdgeY // left of right side paddle
    ) {
      ball.ballSpeedY *= -1;

      const paddleCenterX = paddle.paddleX + paddle.width / 2;
      const ballDistFromCenterX = ball.ballX - paddleCenterX;

      ball.ballSpeedX = ballDistFromCenterX * ball.ballSpedvar;
      
      // New ball.
      new Ball();
    }
  });


};

/* draw all elements */
const drawAll = () => {
  /* draw canvas */
  colorRect(0, 0, canvas.width, canvas.height, '#000000');

  /* draw paddle */
  colorRect(
    paddle.paddleX,
    canvas.height - paddle.paddleDistEdge,
    paddle.width,
    paddle.thick,
    paddle.color
  );

  /* draw balls */
  balls.forEach(ball => ball.draw());
};

const colorRect = (topLeftX, topLeftY, boxWidth, boxHeight, fillColor) => {
  context.fillStyle = fillColor;
  context.fillRect(topLeftX, topLeftY, boxWidth, boxHeight);
};

const colorCircle = (centerX, centreY, radius, fillColor) => {
  context.fillStyle = fillColor;
  context.beginPath();
  context.arc(centerX, centreY, radius, 0, Math.PI * 2, true);
  context.fill();
};

const resetBall = () => {
  ball.ballX = canvas.width / 2;
  ball.ballY = canvas.height / 2;
};
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brick game</title>
  </head>
  <body>
    <div class="container">
      <h1>Brick Game</h1>
      <canvas id="gameCanvas" width="600" height="400"> </canvas>
    </div>
  </body>
</html>

于 2021-02-18T13:03:14.500 回答