Question

这是我的HTML：

<html lang="en-US">
<head>
    <meta charset ="UTF-8"/>
    <title>Pong</title>
    <link rel="stylesheet" type="text/css" href="pong.css"/>
</head>
<body>
    <canvas id="mainCanvas" width="700" height="710"></canvas>
    <script type="text/javascript" src="pong.js"></script>
</body>
</html>

这是我的css：

#mainCanvas{
    width: 700px;
    height: 710px;
    background-color: black;
}

这是我的js：

//variables

var canvas = document.getElementById('mainCanvas');
var ctx = canvas.getContext('2d');

var keys = [];

var speed = 12,
    playerWidth = 8,
    playerHeight = 75,
    canvasW = 700,
    canvasH = 710,
    player1X = canvasW - 670,
    player2X = canvasW - 30,
    ballS = 15,
    running = true,
    acc = 0,
    ranNum = Math.floor(Math.random() * 10 + 1);

var requestAnimFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.msRequestAnimationFrame;

//objects

function player(x,y,width,height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}

function gameObj(x,y,vel,side,speed){
    this.x = x;
    this.y = y;
    this.side = side;
    this.speed = speed;
}

var player1 = new player(player1X,canvasH/2-playerHeight/2,playerWidth,playerHeight);
var player2 = new player(player2X,canvasH/2-playerHeight/2,playerWidth,playerHeight);

var ball = new gameObj(canvasW/2-ballS/2,canvasH/2-ballS/2,ballS,15);

//Events

window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

/*  
    keys
    up-38
    down-40

*/

//functions

function game(){
    update();
    render();
}

function update(){
    if(keys[38])player1.y -=speed;
    if(keys[40])player1.y +=speed;
    if(keys[87])player2.y -=speed;
    if(keys[83])player2.y +=speed;

    if(player1.y <0) player1.y=0;
    if(player1.y >= canvasH - player1.height) player1.y = canvasH - player1.height;

    if(player2.y <0) player2.y=0;
    if(player2.y >= canvasH - player2.height) player2.y = canvasH - player2.height;
    console.log("player1.y: " + player1.y);
    console.log("player2.y: " + player2.y);
}
function render(){
    ctx.clearRect(0,0,canvasW,canvasH);
    ctx.fillStyle="white";
    ctx.fillRect(player1.x, player1.y, player1.width, player1.height);
    ctx.fillStyle="white";

    ctx.fillRect(player2.x, player2.y, player2.width, player2.height);
    ctx.fillStyle="white";

    ctx.fillRect(canvasW/2-3, 0, 3, canvasH);
    ctx.fillStyle="white";
    ctx.fillStyle="red";
    ctx.fillRect(ball.x,ball.y,ball.side,ball.side);
}

function animate() {
    if (running) {
         game();
    }
    requestAnimFrame(animate);
}
animate();

我在乒乓球比赛中让球移动时遇到了一些麻烦。我没有太多经验。我知道你可以做ball.x += ball.speed但是我不知道如何让它反弹墙壁和桨叶。我试图这样做，当球与桨碰撞时，它等于它的x和y值，但随后球跟随桨。当我试图通过使速度与碰撞速度相反来改变方向时，球在碰撞时保持静止。请帮忙。

欢迎任何帮助。

很抱歉，如果我的代码有点草率，我没有接受过正式培训。

Answer 1

这是一个基本的 pong - 运动。希望它可以给你一些帮助。如果您希望有人更正您的代码，您可以将其放在Code Review上吗？这一运动的一个关键部分是拥有比最初想象的更多的变量。例如。这段代码是box1Left1 和 box1Left2所必需的。

var box1Left1 = 0; 
var box1Left2;

setInterval(box1Fly, 10); 
function box1Fly() {
  // Fly Right
  if ( box1Left1 < 300 ) {
    box1Left1++; 
    document.getElementById("box1").style.left = box1Left1 + "px"; 
    box1Left2 = box1Left1;
  }
  // Fly Left
  if ( box1Left1 >= (300) ) {
    box1Left2--; 
    document.getElementById("box1").style.left = box1Left2 + "px"; 
  }
  // Fly Right Again
  if( box1Left2 == 0 ) { box1Left1 = box1Left2; }
  
}

<div id="box1" style="position:absolute; top: 10px; left: 0px; width: 50px; height: 50px; background-color: #aa39fc;"></div>

Answer 2

如果球位于(ball.x, ball.y)并且在(speed.x speed.y)处移动，则在正常运动中它将移至(ball.x + speed.x, ball.y + speed.y)。然后执行此操作以测试碰撞以调整位置和速度：碰撞方向上的速度应翻转到与其相反的位置，并且还应将位置调整为相对于碰撞墙或桨叶的镜像，以便您的球不会超出范围。如果它与左侧球拍碰撞，即ball.x < 0，则speed.x变为与其相反，ball.x也是如此。如果它与右侧球拍发生碰撞，即ball.x >= width，则speed.x会与其相反，ball.x = width - (ball.x - width)或2*width - ball.x 如果它与底壁碰撞，即ball.y < 0，则speed.y变为与其相反，ball.y也是如此。如果它与顶墙碰撞，即ball.y >= height，那么speed.y就会与ball.y = 2*height - ball.y相反。• First Name • Last Name • Age。球也可以在一个角落里结束，并在一个框架内与两面墙碰撞。因此，处理x碰撞然后处理y碰撞 - 不要只是认为因为刚刚发生x碰撞而不会发生y碰撞。为了获得额外的乐趣，在桨叶反弹后为速度组件添加一点随机运动。

如何制作乒乓球运动

2 个答案: