js+css实现贪吃蛇学单词游戏代码-html代码-BFW代码库

js+css实现贪吃蛇学单词游戏代码

代码语言：html

所属分类：游戏

代码描述：js+css实现贪吃蛇学单词游戏代码，方向键 / W A S D — 移动，空格 — 暂停 / 继续，完成单词会朗读该词 — 支持离线声音合成。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>贪吃蛇学单词（含声音）</title>
<style>
  body { margin:0; background:#0b1020; color:#e6eef8; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial; display:flex; height:100vh; align-items:center; justify-content:center; }
  #wrap { display:flex; gap:20px; align-items:flex-start; }
  canvas { background: #0b1624; border-radius:8px; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
  .panel { width:300px; }
  h1 { margin:0 0 10px 0; font-size:20px; color:#fff; }
  .info { background: rgba(255,255,255,0.04); padding:12px; border-radius:8px; margin-bottom:12px; }
  .row { display:flex; justify-content:space-between; margin-bottom:6px; }
  button, input, select { padding:8px 10px; border-radius:6px; border: none; background:#1f2a3a; color:#e6eef8; cursor:pointer; }
  input[type="text"] { width:100%; box-sizing:border-box; background:#07101a; color:#fff; }
  .small { font-size:13px; color:#a9c0d9; }
  .letters { display:flex; gap:6px; flex-wrap:wrap; padding-top:6px; }
  .letter { padding:8px 10px; background: rgba(255,255,255,0.03); border-radius:6px; min-width:28px; text-align:center; font-weight:600; }
  .letter.done { background: #2a7a4d; color:#fff; }
  .letter.next { background:#d98b2a; color:#fff; }
  .controls { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  .center { text-align:center; }
  footer { margin-top:10px; font-size:12px; color:#9fb6d6; }
</style>
</head>
<body>
<div id="wrap">
  <canvas id="game" width="640" height="480"></canvas>

  <div class="panel">
    <h1>贪吃蛇学单词 🐍📚</h1>

    <div class="info">
      <div class="row"><div>关卡</div><div id="level">1</div></div>
      <div class="row"><div>分数</div><div id="score">0</div></div>
      <div class="row"><div>速度</div><div id="speed">6</div></div>
      <div class="row"><div>剩余字母</div><div id="remaining">0</div></div>
    </div>

    <div class="info">
      <div class="small">当前目标单词</div>
      <div style="font-size:22px;font-weight:700;margin-top:6px" id="targetWord">APPLE</div>

      <div class="letters" id="lettersRow" style="margin-top:10px;"></div>

      <div class="controls" style="margin-top:12px;">
        <button id="newWordBtn">下一词</button>
        <button id="toggleSoundBtn">声音：开</button>
        <button id="toggleTTSBtn">语音：开</button>
      </div>

      <div style="margin-top:10px;">
        <div class="small">自定义单词.........完整代码请登录后点击上方下载按钮下载查看