Question

我正在尝试使用以下Pong游戏代码来做三件事：

在中间的黑线虚线
使用更大的字体和更大的字体来增加得分
阻止拨板离开板上

这是HTML的一部分：

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title> Pong </title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <style>


body {background-color: pink;}
      #canvas {
        border: solid MediumTurquoise  0.5vw;
        height: 50%;
        width: 50%;
        background-color: white;
      }

      .welcome{    
     font-family: 'monospace'
      }
    </style>



 </head>
  <body>
   <div class = "welcome"> <center> <h2> Welcome to Pong! Good luck. <h2> </center> </div>

这是我启动画布的方式：

<center> <canvas id="canvas"></canvas> </center>
<score id ="left_score">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<script>
  /* initialize */

我所有的变量：

var context = $('#canvas')[0];
  var gameboard =context.getContext('2d');
  var ball_x_speed = 1;
  var ball_x_initial_speed = 1; 
  var ball_y_speed = 1;
  var ball_width = 20;
  var ball_height = 20;
  var ball_x_initial =140;
  var ball_y_initial = 65;
  var ball_x = ball_x_initial;
  var ball_y = ball_y_initial;
  var paddle_y = 30;
  var paddle_y_speed = 0;
  var paddle_y_initial = 50;
  var frames_per_second = 60;
  var paddle_2 = 100;
  var paddle_2_speed = 0;
  var paddle_2_initial = 50;
  var left_score = 0;
  var right_score = 0;

我最初用于插入矩形的游戏板填充功能。我想使黑色的虚线成为虚线。

 gameboard.fillRect(10,paddle_y,5,50);
 gameboard.fillRect (270,paddle_2,5,50);
 gameboard.fillStyle ='magenta';
 gameboard.fillStyle = 'yellowgreen';
 gameboard.fillRect(ball_x,ball_y,ball_width,ball_height);
 gameboard.setLineDash =(140,0,10,270)


setInterval(doSomething, 1000/frames_per_second); 

 $('body').on('keydown',move_paddle);
 $('body').on('keyup',stop_paddle);

此功能可上下移动拨片。我想将它们停在画布的边缘。

function move_paddle(event){
   if(event.which == 87){paddle_y_speed= -2;}
   if(event.which == 83){paddle_y_speed = 2;}
   if(event.which == 40){paddle_2_speed= 2;}
   if(event.which == 38){paddle_2_speed = -2;}
 }

 function stop_paddle(){
   paddle_y_speed = 0;
   paddle_2_speed = 0;

 };



  function doSomething(){
    gameboard.clearRect(0,0,300,150);
    gameboard.fillStyle = 'magenta';
    gameboard.fillRect(10,paddle_y,5,50);
    gameboard.fillRect (270,paddle_2,5,50);
    gameboard.fillStyle = 'black';
    gameboard.fillRect(140,0,10,270)




  /*end game */
  if (ball_x <=0){
      ball_x_speed = ball_x_initial_speed}
  if (ball_x >=280){
      ball_x_speed = ball_x_initial_speed}



  if (left_score >=5){
    alert ("Left player wins")
    gameboard.fillRect(10,paddle_y,5,50);
    gameboard.fillRect (270,paddle_2,5,50);
    gameboard.fillStyle ='red';
    gameboard.fillStyle = 'yellowgreen';
    gameboard.fillRect(ball_x,ball_y,ball_width,ball_height);
     }  


  /* bounce off walls */
    if(ball_y >= 150-ball_height){ball_y_speed = -1*ball_y_speed;};
    if(ball_y <=0){ball_y_speed = -1*ball_y_speed;};
    if(ball_x >=300-ball_width){ball_x_speed = -1*ball_x_speed;};

    if(ball_x <=0){
      right_score = right_score + 1;
      ball_x = ball_x_initial;
      ball_y = ball_y_initial; }

      if(ball_x >=280){
      left_score = left_score + 1;
      ball_x = ball_x_initial;
      ball_y = ball_y_initial;


      }

  /* bounce off paddles */
    if(ball_x <= 15 && ball_y <= paddle_y + 50 && ball_y >= paddle_y - 20){ball_x_speed = -1.25*ball_x_speed;};
    if(ball_x >= 250 && ball_y <= paddle_2 + 50 && ball_y >= paddle_2 - 20){ball_x_speed = -1.25*ball_x_speed;}
    ball_x = ball_x + ball_x_speed;
    ball_y = ball_y + ball_y_speed;
    paddle_y= paddle_y + paddle_y_speed
    paddle_2= paddle_2 + paddle_2_speed
    gameboard.fillStyle = 'yellowgreen';
    gameboard.fillRect(ball_x,ball_y,ball_width,ball_width);
    gameboard.fillStyle = 'red';
    gameboard.fillText(left_score,120,20);

    gameboard.fillText(right_score,160,20);

  }
  /*paddle goes off screen 
  if(paddle_2 <=0) {paddle_2 = paddle_2_initial} */

</script>

Answer 1

要使中间的虚线变为虚线，您不能简单地将fillRect替换为setLineDash。这只会设置您尚未绘制的线的属性。您可以例如绘制一条虚线：

gameboard.lineWidth = 5;
gameboard.beginPath();
gameboard.setLineDash([10, 10]);
gameboard.moveTo(140, 0);
gameboard.lineTo(140, 270);
gameboard.stroke();

要更改乐谱的字体，您需要设置font属性：

gameboard.font = "30px Arial";

最后，要确保桨不超出游戏板，一个简单的解决方案是将桨超出时将其设置为最大/最小允许值。

paddle_y= paddle_y + paddle_y_speed
if (paddle_y < 0) paddle_y = 0;
if (paddle_y > 100) paddle_y = 100;
paddle_2= paddle_2 + paddle_2_speed
if (paddle_2 < 0) paddle_2 = 0;
if (paddle_2 > 100) paddle_2 = 100;

用Java开发的Pong游戏

1 个答案: