javascript - 在 if 语句中使用 style.display 暂停 javascript 游戏不起作用

Question

我正在开发一个 javascript 游戏，并尝试向按钮添加一些代码，以切换游戏的可见性并充当暂停按钮，这样它就会停止运行，并且如果你隐藏它，它不会继续推动得分警报。 ，而我编写的所有代码都失败了。在这里，希望有人能帮我解决它。

<div id = 'games'>
<!-- I only put this canvas in a div because there will be more games here soon. -->
<canvas id='my' width = '640' height = '480'></canvas>
</div>

<script>
var canvas = document.getElementById("my");
var ctx = canvas.getContext("2d");

function paddle(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.speedModifier = 0;
    this.hasCollidedWith = function(ball) {
        var paddleLeftWall = this.x;
        var paddleRightWall = this.x + this.width;
        var paddleTopWall = this.y;
        var paddleBottomWall = this.y + this.height;
        if (ball.x > paddleLeftWall &&
            ball.x < paddleRightWall &&
            ball.y > paddleTopWall &&
            ball.y < paddleBottomWall) {
            return true;
        }
        return false;
    };
    this.move = function(keyCode) {
        var nextY = this.y;
        if (keyCode == 40) {
            nextY += 5;
            this.speedModifer = 1.5;
        } else if (keyCode == 38) {
            nextY += -5;
            this.speedModifier = 1.5;
        } else {
            this.speedModifier = 0;
        }
        nextY = nextY < 0 ? 0 : nextY;
        nextY = nextY + this.height > 480 ? 480 - this.height : nextY;
        this.y = nextY;
    };
}
var player = new paddle(5, 200, 25, 100);

var ai = new paddle(610, 200, 25, 100);
var ball = {
    x: 320,
    y: 240,
    radius: 7,
    xSpeed: 2,
    ySpeed: 0,
    playerscore: 0,
    aiscore: 0,
    reverseX: function() {
        this.xSpeed *= -1;
    },
    reverseY: function() {
        this.ySpeed *= -1;
    },
    reset: function() {
        alert('The score is now ' + this.playerscore + ' to ' + this.aiscore);
        this.x = 20;
        this.y = 24;
        this.xSpeed = 2;
        this.ySpeed = 0;
        
    },
    isBouncing: function() {
        return ball.ySpeed != 0;
    },
    modifyXSpeedBy: function(modification) {
        modification = this.xSpeed < 0 ? modification * -1 : modification;
        var nextValue = this.xSpeed + modification;
        nextValue = Math.abs(nextValue) > 9 ? 9 : nextValue;
        this.xSpeed = nextValue;
    },
    modifyYSpeedBy: function(modification) {
     
   modification = this.ySpeed < 0 ? modification * -1 : modification;
        this.ySpeed += modification;
    }
};
function tick() {
   
   updateGame();
    draw()
    window.setTimeout("tick()", 1000 / 60);
}

function updateGame() {
    ball.x += ball.xSpeed;
    ball.y += ball.ySpeed;
    if (ball.x < 0) {
        ball.reset();
        ball.aiscore = ball.aiscore + 1;
        
    }
    if (ball.x > 640) {
        ball.reset();
        ball.playerscore = ball.playerscore + 1
        
    }
    if (ball.y <= 0 || ball.y >= 480) {
        ball.reverseY();
    }
    var collidedWithPlayer = player.hasCollidedWith(ball);
    var collidedWithAi = ai.hasCollidedWith(ball);
    if (collidedWithPlayer || collidedWithAi) {
        ball.reverseX();
        ball.modifyXSpeedBy(0.25);
        var speedUpValue = collidedWithPlayer ? player.speedModifier : ai.speedModifier;
        ball.modifyYSpeedBy(speedUpValue);
    }
    for (var keyCode in heldDown) {
        player.move(keyCode);
    }
    var aiMiddle = ai.y + (ai.height / 2);
    if (aiMiddle < ball.y) {
        ai.move(40);
    }
    if (aiMiddle > ball.y) {
        ai.move(38);
    }
    
}

function draw() {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, 640, 480);
    renderPaddle(player);
    renderPaddle(ai);
    renderBall(ball);
}

function renderPaddle(paddle) {
    ctx.fillStyle = "blue";
    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
}

function renderBall(ball) {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = "pink";
    ctx.fill();
}
var heldDown = {};
window.addEventListener("keydown", function(keyInfo) {
    heldDown[event.keyCode] = true;
}, false);
window.addEventListener("keyup", function(keyInfo) {
    delete heldDown[event.keyCode];
}, false);
function playPong(){
 if (canvas.style.display == 'none'){canvas.style.display = 'block';}
 else {canvas.style.display == 'none';}
if (canvas.style.display === 'block')
{
tick()};

}



</script>

<script>
function hide() {
var games = document.getElementById('games')
if (games.style.display === 'block')
games.style.display = 'none';
else{games.style.display = 'block';}
}
function show(){
var canvas = document.getElementById('my')
canvas.style.display = 'block';
}
</script>


<button onclick = 'hide()'> Hide or show the games</button>

<button onclick = 'playPong();show()'> Play pong </button>

标签： javascripthtmlcsscanvas

Answer 1

我会尝试不使用画布的可见性作为 if 语句中的决定因素，而是尝试这样的事情 -

<div id='games'>
  <canvas id='my' width='640' height='480'></canvas>
</div>
<script>
  var paused = false

  function PausePlay() {
    if (paused === false) {
      paused = true;
    } else {
      paused = false;
    }
  }
  var canvas = document.getElementById("my");
  var ctx = canvas.getContext("2d");

  function paddle(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.speedModifier = 0;
    this.hasCollidedWith = function(ball) {
      var paddleLeftWall = this.x;
      var paddleRightWall = this.x + this.width;
      var paddleTopWall = this.y;
      var paddleBottomWall = this.y + this.height;
      if (ball.x > paddleLeftWall &&
        ball.x < paddleRightWall &&
        ball.y > paddleTopWall &&
        ball.y < paddleBottomWall) {
        return true;
      }
      return false;
    };
    this.move = function(keyCode) {
      var nextY = this.y;
      if (keyCode == 40) {
        nextY += 5;
        this.speedModifer = 1.5;
      } else if (keyCode == 38) {
        nextY += -5;
        this.speedModifier = 1.5;
      } else {
        this.speedModifier = 0;
      }
      nextY = nextY < 0 ? 0 : nextY;
      nextY = nextY + this.height > 480 ? 480 - this.height : nextY;
      this.y = nextY;
    };
  }
  var player = new paddle(5, 200, 25, 100);

  var ai = new paddle(610, 200, 25, 100);
  var ball = {
    x: 320,
    y: 240,
    radius: 7,
    xSpeed: 2,
    ySpeed: 0,
    playerscore: 0,
    aiscore: 0,
    reverseX: function() {
      this.xSpeed *= -1;
    },
    reverseY: function() {
      this.ySpeed *= -1;
    },
    reset: function() {
      alert('The score is now ' + this.playerscore + ' to ' + this.aiscore);
      this.x = 20;
      this.y = 24;
      this.xSpeed = 2;
      this.ySpeed = 0;

    },
    isBouncing: function() {
      return ball.ySpeed != 0;
    },
    modifyXSpeedBy: function(modification) {
      modification = this.xSpeed < 0 ? modification * -1 : modification;
      var nextValue = this.xSpeed + modification;
      nextValue = Math.abs(nextValue) > 9 ? 9 : nextValue;
      this.xSpeed = nextValue;
    },
    modifyYSpeedBy: function(modification) {

      modification = this.ySpeed < 0 ? modification * -1 : modification;
      this.ySpeed += modification;
    }
  };

  function tick() {


    updateGame();
    draw()
    window.setTimeout("tick()", 1000 / 60);

  }


  function updateGame() {
    if (paused === false) {
      ball.x += ball.xSpeed;
      ball.y += ball.ySpeed;
      if (ball.x < 0) {
        ball.reset();
        ball.aiscore = ball.aiscore + 1;

      }
      if (ball.x > 640) {
        ball.reset();
        ball.playerscore = ball.playerscore + 1

      }
      if (ball.y <= 0 || ball.y >= 480) {
        ball.reverseY();
      }
      var collidedWithPlayer = player.hasCollidedWith(ball);
      var collidedWithAi = ai.hasCollidedWith(ball);
      if (collidedWithPlayer || collidedWithAi) {
        ball.reverseX();
        ball.modifyXSpeedBy(0.25);
        var speedUpValue = collidedWithPlayer ? player.speedModifier : ai.speedModifier;
        ball.modifyYSpeedBy(speedUpValue);
      }
      for (var keyCode in heldDown) {
        player.move(keyCode);
      }
      var aiMiddle = ai.y + (ai.height / 2);
      if (aiMiddle < ball.y) {
        ai.move(40);
      }
      if (aiMiddle > ball.y) {
        ai.move(38);
      }
    }
  }

  function draw() {
    if (paused === false) {
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, 640, 480);
      renderPaddle(player);
      renderPaddle(ai);
      renderBall(ball);
    }
  }

  function renderPaddle(paddle) {
    ctx.fillStyle = "blue";
    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
  }

  function renderBall(ball) {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = "pink";
    ctx.fill();
  }
  var heldDown = {};
  window.addEventListener("keydown", function(keyInfo) {
    heldDown[event.keyCode] = true;
  }, false);
  window.addEventListener("keyup", function(keyInfo) {
    delete heldDown[event.keyCode];
  }, false);

  function playPong() {
    tick()
  }
</script>



<script>
  function getOff() {
    alert("you've been on for five minutes now. Time to take a break.");
    setTimeout(function() {
      alert("it's been 10 minutes now. Get back to work.");
      close();
      var body = document.getElementById('hide5')
      body.style.display = 'none'
    }, 300000);
  }
  setInterval(getOff, 300000)

  }
</script>
<script>
  function hide() {
    var games = document.getElementById('games')
    if (games.style.display === 'block')
      games.style.display = 'none';
    else {
      games.style.display = 'block';
    }
  }

  function show() {
    var canvas = document.getElementById('my')
    canvas.style.display = 'block';
  }
</script>


<button onclick='hide()'> Hide or show the games</button>
<button onclick='PausePlay()'> Pause games </button>
<button onclick='playPong()'> Play pong </button>