JavaScript开发Simon游戏调用nextSequence()如何实现关卡递增

现有代码问题梳理 #

• 缺失buttonColors、gamePattern两个全局变量定义，运行时会抛出引用错误
• level变量自增逻辑已完成，但未同步更新到页面标题，用户无法看到等级变化
• 初始触发逻辑中先显示Level 0再调用nextSequence()，会出现等级显示一闪而过的体验问题

修正后代码 #

JavaScript代码 #

var buttonColors = ["red", "blue", "green", "yellow"];
var gamePattern = [];
var started = false; // 游戏启动开关
var level = 0;

$(document).on("keydown", function() {
  if (!started) {
    nextSequence();
    started = true;
  }
})

function nextSequence() {
  var randomNumber = Math.floor(Math.random() * 4);
  var randomChosenColor = buttonColors[randomNumber];
  gamePattern.push(randomChosenColor);

  // 按钮闪烁动画
  $("#" + randomChosenColor).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
  
  // 等级更新
  level++;
  $("h1").text(`Level ${level}`);
  console.log(level);
}

HTML引入代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

优化说明 #

• 合并了随机数生成的两行代码，简化逻辑
• 调整初始触发逻辑，直接调用nextSequence()生成第一关内容，避免等级显示跳变
• 使用模板字符串简化等级文本拼接逻辑

内容的提问来源于stack exchange，提问作者Gurpyar