Question

我正在努力提高对JavaScript的理解，因此选择了pong比赛，并删除了其他玩家来创建游戏，目标是不让球撞到底壁。如果您击中了桨，您的分数将增加。

问题：

我遇到的问题是，当球击中底部的任何地方时，无论是桨还是墙，得分都会增加。

目标：

仅在击打桨时增加分数。

当它触底时，我得到了增加，但是我一直在努力寻找正确的代码组合，以使其正常工作。

下面是我正在尝试更新每次碰撞得分的代码部分。在下面，您将找到一个代码片段，以自己运行代码以查看其工作方式，并在需要时找到其他代码。

// update : pos, mov , score, ...

function update(){
  ball.x += ball.velocityX;
  ball.y += ball.velocityY;

  // simple AI to control the com paddle

  if(ball.y + ball.radius >= cvs.height || ball.y - ball.radius <= 0){
    ball.velocityY = -ball.velocityY;
  }
  if(ball.x + ball.radius > cvs.width || ball.x - ball.radius <= 0){
    ball.velocityX = -ball.velocityX;
  }
  let player = (ball.x < cvs.width/2)/* ? user : com*/;

  if(collision(ball,player)){
    // where the ball hit the player
    let collidePoint = ball.y - (player.y + player.height/2);


    // normalization
    collidePoint = (collidePoint/player.height/2);

    // calculate angle in radian
    let angleRad = collidePoint * Math.PI/4;

    // x direction of the ball when its hit
    let direction = (ball.x < cvs.width/2) ? 1 : -1;
    // change vel x and y
    ball.velocityX = direction * ball.speed * Math.cos(angleRad);
    ball.velocityY =             ball.speed * Math.sin(angleRad);

    // everytime the ball hit a paddle we encrese its speed
    ball.speed += 0.5;


  }
  // update the score
    if(ball.y >= user.y){
    // the user win
    user.score++;

  }

}

// draw rect

const cvs = document.getElementById("paddle");
const ctx = cvs.getContext("2d");


//create the user
const user = {
  x : cvs.width-100,
  y : 790,
  width : 100,
  height : 10,
  color : "RED",
  score : 0
}


// create ball
const ball = {
  x : cvs.width/2,
  y : cvs.height/2,
  radius : 10,
  speed : 5,
  velocityX : 0,
  velocityY : 0,
  color : "WHITE"
}

// click for the ball to drop and start game
window.addEventListener('click',function(){
  ball.velocityX = 5;
  
  if(ball.velocityY <= 0){
    ball.velocityY -= 7;
  }
  else{
    ball.velocityY += 7;
  }
});
// draw rect function
function drawRect(x, y, w, h ,color){
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
 
}


// draw circle
function drawCircle(x,y,r,color){
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(x,y,r,0,Math.PI*2,false);
  ctx.closePath();
  ctx.fill();
}

// draw text

function drawText(text,x,y,color){
  ctx.fillStyle = color;
  ctx.font = "45px fantasy";
  ctx.fillText(text,x,y);
}
// render the game
function render(){
  // clear the canvas
  drawRect(0, 0, cvs.width, cvs.height, "BLACK");
  // drawscore
  drawText(user.score,cvs.width/2,cvs.height/5,"WHITE");
  // drawText(com.score,3*cvs.width/4,cvs.height/5,"WHITE");
  
  // draw the user paddle
  drawRect(user.x, user.y, user.width, user.height, user.color);
 
  // draw the Ball
  drawCircle(ball.x, ball.y, ball.radius, ball.color);
}

// control the user paddle

cvs.addEventListener("mousemove",movePaddle);

function movePaddle(evt){
 let rect = cvs.getBoundingClientRect();
 
user.y = evt.clientY - rect.top - user.height/2
 user.x = evt.clientX - rect.left - user.width/2;
}

// collision detection
function collision(b,p){
  b.top = b.y - b.radius;
  // b.bottom = b.y + b.radius;
  b.left = b.x - b.radius;
  b.right= b.x + b.radius;
  
  p.top = p.y;
  p.bottom = p.y + p.height;
  p.left = p.x;
  p.right = p.x + p.width;
  
  return b.right > p.left && b.bottom > p.top && b.left < p.right && b.top < p.bottom;
}

// reset ball
function resetBall(){
  ball.x = cvs.width/2;
  ball.y = cvs.width/2;
  
  ball.speed = 5;
  ball.velocityX = -ball.velocityX;
}

// update : pos, mov , score, ...

function update(){
  ball.x += ball.velocityX;
  ball.y += ball.velocityY;
  
  // simple AI to control the com paddle
  
  if(ball.y + ball.radius >= cvs.height || ball.y - ball.radius <= 0){
    ball.velocityY = -ball.velocityY;
  }
  if(ball.x + ball.radius > cvs.width || ball.x - ball.radius <= 0){
    ball.velocityX = -ball.velocityX;
  }
  let player = (ball.x < cvs.width/2)/* ? user : com*/;
  
  if(collision(ball,player)){
    // where the ball hit the player
    let collidePoint = ball.y - (player.y + player.height/2);

    
    // normalization
    collidePoint = (collidePoint/player.height/2);

    // calculate angle in radian
    let angleRad = collidePoint * Math.PI/4;
    
    // x direction of the ball when its hit
    let direction = (ball.x < cvs.width/2) ? 1 : -1;
    // change vel x and y
    ball.velocityX = direction * ball.speed * Math.cos(angleRad);
    ball.velocityY =             ball.speed * Math.sin(angleRad);
    
    // everytime the ball hit a paddle we encrese its speed
    ball.speed += 0.5;
    

  }
  // update the score
    if(ball.y >= user.y){
    // the user win
    user.score++;
   
  }
  
}
// game init
 function game(){
   update();
   render();
 }
 function gameOver(){
  drawText('Game Over',cvs.width/2,cvs.height/5,"WHITE");
  return;
}
// loop
 const framePerSecond = 50;
 setInterval(game,1000/framePerSecond);
 
 console.log('this console works');

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Paddle The Ball</title>
    
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" type="image/x-icon" href="#">
  </head>
  
  <body>
   <canvas id="paddle" width="600" height="800"></canvas>

    <!--JavaScript-->
 
    <script src="paddle.js"></script>
  </body>
</html>

Answer 1

在data <- sub("^[^.]*\\.", "", string_1) strsplit(data, "\\s+") # [[1]] # [1] "1" # [2] "11858" # [3] "281" # [4] "+" # [5] "248956422" # [6] "TTTTCTTTTCGTTAACTTGCCGTCAGCCTTTTCTTTGACCTCTTCTTTCTGTTCATGTGTATTTGCTGTCTCTTAGCCCAGACTTCCCGTGTCCTTTCCACCGGGCCTTTGAGAGGTCACAGGGTCTTGATGCTGTGGTCTTCATCTGCAGGTGTCTGACTTCCAGCAACTGCTGGCCTGTGCCAGGGTGCAAGCTGAGCACTGGAGTGGAGTTTTCCTGTGGAGAGGAGCCATGCCTAGAGTGGGATGGGCCAT-TGTTCATCTTCTGGCCCCTGTTGTCT"中，注释了对user.y的更新：

movePaddle

稍后您要检查球是否在球员的球拍上方时，它的起始值并没有改变，这可能会无意中影响得分。

Answer 2

如果您确信碰撞函数可以正常工作，那么为什么在确定碰撞发生后就不增加分数，而不是稍后再检查相对y值呢？要进行测试，请在发生冲突时使用console.log并在有问题的情况下console.log。

球与桨碰撞时，得分不会增加

2 个答案: