css 如何 在 画布 游戏 中 添加 " 开始 游戏 " 和 " 再 玩 一 次 " ?

xzlaal3s  于 2022-11-19  发布在  其他
关注(0)|答案(1)|浏览(157)

我创建了游戏使用Javascript以下YouTube视频游戏教程。游戏工作得很好,但我想添加的能力,输入昵称在游戏开始。输入昵称后,点击播放按钮,游戏将开始,昵称将显示在屏幕的中间上方。然后在失去游戏,窗口与得分和播放一遍按钮应该弹出。点击播放一遍按钮后,另一个游戏开始。
第一个

unftdfkk

unftdfkk1#

你的代码里有你需要的一切...

let gameOver = false;
let zombies = [];

我们所需要做的就是稍微修改一下您的代码以利用这些优点。
我不打算实现你的 “窗口与得分和播放一次按钮弹出”,相反,我打算一个更简单的超时来演示如何重新启动你的游戏。
游戏中设定“结束”的关键点如下:

if (lives == 0) {
            zombies = []
            gameOver = true;
            gameEnded = Date.now()
            setTimeout(() => { 
              gameOver = false 
              lives = 3
            }, 5000)
          }

之前你只是有了gameOver,现在我做了一些其他的事情,比如setTimeout会在5秒内重启游戏,重启游戏只是为了把gameOver设置回false,给予用户一些生命。
你的function animate是绘制循环发生的地方,我做了一些修改,现在我们不再停止循环,而是绘制其他东西,我们可以在那里添加许多条件:

function animate(timestamp) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      if (gameOver) {
          drawGameOver();
      } else if (abc < 20) {
          drawABC();
      } else if (def == "start_message") {
          drawDEF();
      } else {
          ...
      }
      requestAnimationFrame(animate)
  }

下面是我添加的简化代码
第一个

相关问题