如何做乒乓球的动作

这是我的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值，但然后球跟着球拍转。当我试图通过使速度与碰撞速度相反来改变方向时，球在碰撞时保持静止。请帮助。

欢迎任何帮助。

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

这是一个基本的pong动作。希望它能给你一些帮助。如果你想让别人纠正你的代码，你可能会把它放在代码审查上?这一运动的一个关键部分是拥有比人们最初想象的更多的变量。如。在这个代码中，需要有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>

如果球在(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相反的样子。也有可能球最终落在角落里，并在一个框架内与两面墙相撞。因此先处理x的碰撞，然后再处理y的碰撞-，不要认为，因为有了x的碰撞，就不会有y的碰撞。为了获得额外的乐趣，在划桨反弹后，为速度组件添加一点随机运动。

相关内容

最新更新

热门标签：