已正确引入jQuery仍报ReferenceError: $ is not defined的问题求助

你遇到的ReferenceError: $ is not defined核心原因是：你把前端浏览器端的jQuery代码写到了Node.js后端服务器文件里，Node环境本身不包含jQuery，自然识别不了$。

具体拆解问题 #

你的game2.js同时承担了两个角色：

• 后端Express服务器（负责提供HTML页面、监听端口）
• 前端交互逻辑（用jQuery绑定键盘/点击事件）

但Node.js是后端运行环境，它不会加载HTML里的jQuery库，也不理解浏览器端的DOM操作（比如$(document)），所以直接运行这个文件就会报错。

正确的解决步骤：拆分前后端代码 #

1. 新建前端交互文件

创建一个单独的game.js文件，把原来game2.js里的jQuery相关代码全部移进去：

let buttonColours = ["red", "blue", "green", "yellow"];
let gamePattern = [];
let userClickedPattern = [];
let started = false;
let level = 0;

$(document).keypress(function() {
  if (!started) {
    $("#level-title").text("Level " + level);
    nextSequence();
    started = true;
  }
});

$(".bbtn").click(function() {
  let userChosenColour = $(this).attr("id");
  userClickedPattern.push(userChosenColour);
  playSound(userChosenColour);
  animatePress(userChosenColour);
  checkAnswer(userClickedPattern.length - 1);
});

function checkAnswer(currentLevel) {
  if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
    if (userClickedPattern.length === gamePattern.length) {
      setTimeout(function() {
        nextSequence();
      }, 1000);
    }
  } else {
    playSound("wrong");
    $("body").addClass("game-over");
    $("#level-title").text("Game Over, Press Any Key to Restart");
    setTimeout(function() {
      $("body").removeClass("game-over");
    }, 200);
    startOver();
  }
}

function nextSequence() {
  userClickedPattern = [];
  level++;
  $("#level-title").text("Level " + level);
  let randomNumber = Math.floor(Math.random() * 4);
  let randomChosenColour = buttonColours[randomNumber];
  gamePattern.push(randomChosenColour);
  $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
  playSound(randomChosenColour);
}

function animatePress(currentColor) {
  $("#" + currentColor).addClass("pressed");
  setTimeout(function() {
    $("#" + currentColor).removeClass("pressed");
  }, 100);
}

function playSound(name) {
  let audio = new Audio("sounds/" + name + ".mp3");
  audio.play();
}

function startOver() {
  level = 0;
  gamePattern = [];
  started = false;
}

2. 简化后端服务器文件

修改原来的game2.js，只保留Express后端相关代码，删除所有jQuery逻辑：

const express = require("express");
const app = express();
const bodyParser = require("body-parser");

// 配置静态文件目录（让Express能找到你的CSS、JS、音频等资源）
app.use(express.static(__dirname));

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.listen(process.env.PORT || 3000, function() {
  console.log("Server is running on port 3000.");
});

注意：添加app.use(express.static(__dirname))是为了让Express能正确加载你的静态资源（比如styles.css、game.js、音频文件）。

3. 确认HTML里的引用顺序

确保HTML里的脚本引用顺序正确，jQuery在前，你的前端game.js在后：

<!-- 先加载jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 再加载你的前端交互脚本 -->
<script src="game.js" charset="utf-8"></script>

为什么之前的HTML引用jQuery没用？ #

因为你是在Node环境里运行game2.js，Node作为后端服务器，它执行的是服务器逻辑，不会去解析HTML里的脚本标签，自然也不会加载jQuery。只有当浏览器请求HTML页面后，才会加载HTML里的jQuery和前端脚本，这时候$才会被定义。

现在重新启动你的Node服务器，打开浏览器访问localhost:3000，游戏应该就能正常运行了。

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