所以我创建了一个简单的乒乓球游戏，但在画布底部和顶部有一个划水板。但我想知道如何清理代码来完善游戏。我想做的一件事就是当球击中它时，阻止球沉入桨中。而且，我知道我应该使用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>import pandas as pd
df = pd.DataFrame(
dict(A=(1, 2, 3, 4), B=(5, 6, 7, 8), C=(9, 10, 11, 12),
D=(1, 2, 3, 4)))
search = dict(A=2, B=6)
search_string = ','.join(map(str, search.values()))
df['merged'] = df.apply(
lambda x: ','.join(map(str, [getattr(x, col) for col in search])),
axis=1)
df = df[df['merged'] == search_string].drop('merged', axis=1).set_index(
[k for k in search])
print(df)
答案 0 :(得分：0)
第一步是向函数添加参数，而不是让所有函数都依赖于全局状态。
如果您的函数所依赖的所有内容都作为参数传递，那么您可以开始考虑实际的重构。
答案 1 :(得分：-1)
首先，你可以做一些重构。
例如：PaddleTwo和PaddleOne函数非常相似，您可以使用带参数的函数：DrawPaddle(positionX, positionY)
PaddleOne中的2个条件必须不在那里。为运动创建专用功能。
第二：添加一些变量（它接近重构）
您在代码中直接有多个值。 例如：如果我要求你改变桨的速度，你应该找到所有的值＆＃34;速度＆＃34;在脚本中。
用变量替换脚本中的所有直接值（键码，速度，动画时间，颜色......）。您可以更好地控制脚本。
第三：使用OOP。
使用class清除代码并使代码更加模块化。 在这里，我看到一些你已经可以创建的课程： - Ball（具有移动功能，绘图功能，键盘监听功能） - 桨（具有绘图功能和反弹功能） - Point（带有X和Y属性，然后避免像somethingX / somethingY这样的变量）
对我来说还有一个建议：检查并仔细检查命名的有效性。如果您的代码中的名称错误，您将无法理解它，您的同事也不会理解。您的代码中会出现一些blackzone。 在那里我可以看到dx和dy，我猜你的意思是directionX和directionY但是谁知道呢？它有无数的理由，而不是几次你会问这是什么？