代码之家 › 专栏 › 技术社区 › Gavin T

如何清理此JavaScript代码?[已关闭]

pong canvas css html javascript

Gavin T · 技术社区 · 7 年前

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>

2 回复 | 直到 7 年前

Flavien Marianacci 7 年前

首先,可以进行一些重构。

示例: PaddleTwo 和 PaddleOne DrawPaddle(positionX, positionY)

桨一号

第二:添加一些变量(接近重构)

在代码中直接有多个值。例如:如果我要求你改变桨的速度,你应该在脚本中找到所有的值“速度”。

第三:使用OOP。

在这里,我看到了一些您已经可以创建的类: -Ball(具有移动功能、绘图功能、键盘侦听器功能) -桨叶(具有牵引功能和反弹功能)

给我的另一个建议是:检查并再次检查你的名字的有效性。如果你的代码中有错误的名字,你将无法理解,你的同事也不会理解。代码中会出现一些黑区。在那里我可以看到dx和dy,我想你指的是方向x和方向y,但谁知道呢?它有无穷多的理由比在几次你会问这是什么?

RobbyD 7 年前

如果函数所依赖的一切都作为参数传递,那么您可以开始考虑实际的重构。