如何清理此 JavaScript 代码？

Question

所以我创建了一个简单的乒乓球游戏，但在 canvas 的底部和顶部都有一个球拍。但我想知道如何清理代码来完善游戏。我想做的一件事是阻止球在击中时沉入桨中。而且，我知道我应该使用 requestAnimationFrame() 而不是 setInterval()，但我制作这个游戏只是为了练习，所以我并不在意。所以基本上我只是征求有关如何清理代码的建议。提前致谢！

我的代码

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = (canvas.width/2)-5;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleWidth = 75;
var paddleHeight = 10;
var paddleX = (canvas.width/2)-paddleWidth/2;
var leftPressed = false;
var rightPressed = false;

function ball() {
 ctx.beginPath();
 ctx.arc(x, y, ballRadius, 0, Math.PI*2);
 ctx.fillStyle = "#0095DD";
 ctx.fill();
 ctx.closePath();
}

function paddleOne() {
 ctx.beginPath();
 ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
 ctx.fillStyle = "green";
 ctx.fill();
 ctx.closePath();

 if(leftPressed && paddleX > 0) {
  paddleX -= 7;
 }

 if(rightPressed && paddleX < canvas.width-paddleWidth) {
  paddleX += 7;
 }
}

function paddleTwo() {
 ctx.beginPath();
 ctx.rect(paddleX, 0, paddleWidth, paddleHeight);
 ctx.fillStyle = "green";
 ctx.fill();
 ctx.closePath();
}

function ballBounce() {
  if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
  dx = -dx;
 }

 else if(y + dy < 0 + ballRadius) {
  if(x > paddleX && x < paddleX + paddleWidth) {
   dy = -dy;
  }
  
  else {
   alert("Game Over");
   document.location.reload();
  }
  
 }

 else if(y + dy > canvas.height - ballRadius) {
  if(x > paddleX && x < paddleX + paddleWidth) {
   dy = -dy;
  }

  else {
   alert("Game Over");
   document.location.reload();
  }
 }
}

function animate() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ball();
 paddleOne();
 paddleTwo();
 ballBounce();


 x += dx;
 y += dy;
}

setInterval(animate, 10);

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
 if(e.keyCode === 37) {
  leftPressed = true;
 }

 if(e.keyCode === 39) {
  rightPressed = true;
 }
}

function keyUpHandler(e) {
 if(e.keyCode === 37) {
  leftPressed = false;
 }

 if(e.keyCode === 39) {
  rightPressed = false;
 }
}

* { padding: 0; margin: 0; }
  canvas { background: #eee; display: block; margin: 0 auto; }

<canvas id="myCanvas" width="480" height="320"></canvas>

Answer 1

首先，您可以进行一些重构。

示例：PaddleTwo 和 PaddleOne 函数非常相似，在那里您可以使用带参数的函数，例如：DrawPaddle(positionX, positionY)

PaddleOne 中的 2 个条件不必存在。为机芯创建专用功能。

其次：添加一些变量（接近重构）

代码中直接有多个值。示例：如果我要求您更改桨的速度，您应该在脚本中找到所有值 "speed"。

用变量（键码、速度、动画时间、颜色等）替换脚本中的所有直接值。您将更好地控制脚本。

第三种：使用OOP。

使用class清除代码并使代码更加模块化。在这里我看到一些 class 你已经可以创建了： - 球（具有移动功能、绘图功能、键盘监听功能） - 桨（具有绘图功能和弹跳功能） - Point (with and X and a Y properties, and then avoid the variable like somethingX/somethingY)

再给我一个建议：检查并仔细检查您命名的有效性。如果你在你的代码中有错误的名字，你将无法理解它，你的同事也不会理解。并且您的代码中的一些黑区将出现。在那里我可以看到 dx 和 dy，我猜你的意思是 directionX 和 directionY 但谁知道呢？它有无数的理由，过几次你会问这是什么？

Answer 2

第一步是向您的函数添加参数，而不是让您的所有函数都依赖于全局状态。

如果您的函数所依赖的所有内容都作为参数传递，那么您就可以开始考虑实际重构了。

如何清理此 JavaScript 代码？

How do I clean up this JavaScript code?

html

javascript

css

canvas

pong