

小熊吃星星

码途钥匙

2025-09-01

· 点击蓝字，关注我们

效果图

一、HTML

HTML 就像游戏的 “地基”，负责定义所有可见元素的基本结构，让游戏有 “形” 可依。在 “小熊吃星星” 中，HTML 的核心工作是 “占位”：创建全屏的<canvas>作为游戏的 “画布”，所有动画和交互都在这上面呈现；用<div>搭建关卡选择面板、下一关按钮、游戏说明文字等 UI 组件；再通过隐藏的<pre>标签存储每一关的地图数据 —— 比如用 “@” 代表小熊、“*” 代表星星、“=” 代表固定线段，为后续 JS 解析地图做好准备。简单说，HTML 的作用就是 “告诉浏览器：这里放画布、这里放按钮、这里存关卡数据”，搭建起游戏的基本框架。

二、CSS

有了骨架，就需要 CSS 来 “化妆”，让游戏变得好看又好操作。CSS 的核心任务有两方面：一是视觉美化，定义按钮、面板的样式 —— 圆角设计、半透明背景、模糊效果，让 UI 更精致；给小熊、星星、线段设定不同颜色（比如粉色小熊、黄色星星、蓝色可动线段），让元素区分清晰。二是交互反馈，比如鼠标悬停小熊时变成 “抓取” 光标，拖动时变成 “抓握” 光标，点击按钮时颜色变亮，让用户操作有明确的视觉响应；还通过transition实现按钮弹出、关卡面板滑动等平滑动画，提升体验感。简言之，CSS 负责 “让游戏变好看、操作有反馈”，用样式增强游戏的亲和力。

三、JS

如果说 HTML 是骨架、CSS 是颜值，JS 就是让游戏 “活起来” 的灵魂，负责实现所有玩法逻辑和动态效果。

在 “小熊吃星星” 中，JS 的核心能力体现在三方面：一是解析关卡数据，读取 HTML 中

标签存储的符号，自动生成对应关卡的网格、线段、小熊和星星位置；二是实现交互逻辑，比如监听鼠标拖动事件 —— 拖动网格时计算旋转角度，让线段跟着转动；拖动小熊时判断是否沿线段移动，防止 “穿墙”；三是判断游戏胜负，实时检测小熊是否到达星星位置，若通关则触发胜利动画，并弹出 “下一关” 按钮。此外，JS 还通过localStorage记录已通关关卡，让用户下次打开时能接着玩。

四、代码

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>让小熊吃到星星</title>    <meta name="viewport" content="width=device-width, initial-scale=1" />    <style>      * {        box-sizing: border-box;      }      body {        margin: 0;        padding: 0;        overflow-x: hidden;        font-family: "Avenir Next", Avenir, sans-serif;        font-weight: 500;        font-size: 20px;        color: #555;      }      canvas {        cursor: move;        display: block;        position: absolute;        max-width: 100%;        left: 0;        top: 0;      }      .is-cub-hovered,      .is-cub-hovered canvas {        cursor: -webkit-grab;        cursor: grab;      }      .is-cub-dragging,      .is-cub-dragging canvas {        cursor: -webkit-grabbing;        cursor: grabbing;      }      .instruction {        padding: 0 10px;        text-align: center;        position: absolute;        width: 100%;        padding-bottom: 40px;      }      .button {        font-family: "Avenir Next", Avenir, sans-serif;        font-weight: 500;        font-size: 20px;        padding: 5px 15px;        margin: 10px;        background: #bbb;        color: white;        border-radius: 5px;        border: none;        cursor: pointer;      }      .button:hover {        background: #09f;      }      .top-bar {        position: absolute;        left: 0;        top: 0;      }      .level-select-button {        position: relative;        z-index: 2; /* above canvas */      }      .next-level-button {        position: absolute;        left: 50%;        -webkit-transform: translateX(-110px) scale(0.5);        transform: translateX(-110px) scale(0.5);        opacity: 0;        background: #09f;        width: 200px;        height: 80px;        pointer-events: none;        -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;        transition: transform 0.2s, opacity 0.2s;      }      .next-level-button:hover {        background: #2bf;      }      .next-level-button.is-open {        display: inline-block;        pointer-events: auto;        -webkit-transform: translateX(-110px) scale(1);        transform: translate(-110px) scale(1);        opacity: 1;      }      /* ---- level list ---- */      .level-list {        position: absolute;        background: #eee;        width: 100%;        min-height: 100%;        left: 0;        top: 0;        margin: 0;        list-style: none;        padding: 10px;        z-index: 3; /* above canvas, level select button */        left: -100%;        transition: left 0.2s;      }      .level-list.is-open {        left: 0;      }      .level-list__item {        display: inline-block;        background: #ddd;        margin: 5px;        padding: 10px;        width: 80px;        height: 80px;        text-align: center;        border-radius: 10px;        position: relative;      }      .level-list__item:hover {        color: #09f;        cursor: pointer;        background: white;      }      .level-list__item.is-playing {        background: #09f;        color: white;      }      .level-list__item__number {        display: block;        font-size: 30px;        line-height: 35px;      }      .level-list__item__blurb {        display: block;        font-size: 16px;      }      .level-list__item__check {        position: absolute;        right: -10px;        top: -10px;        width: 30px;        line-height: 30px;        background: #555;        border-radius: 15px;        color: white;        display: none;      }      .level-list__item.did-complete .level-list__item__check {        display: block;      }      /* ---- level pres ---- */      .levels {        display: none;      }    </style>  </head>  <body>    <div class="top-bar">      <button class="button level-select-button">关卡</button>    </div>    <ol class="level-list"></ol>    <canvas></canvas>    <p class="instruction"></p>    <button class="button next-level-button">下一关</button>    <div class="levels">      <pre id="intro-fixed1" data-blurb="Tutorial">blurb: Tutorialinstruction: 拖动小熊到星星---*=.=.    !. . .    !@=.=.</pre      >      <pre id="intro-fixed2" data-blurb="Tutorial">blurb: Tutorialinstruction: 拖动网格来旋转。小熊和星星会随着网格一起移动。橙线会保持不动。---* . .    !. . .    !@=.=.</pre      >      <pre id="intro-fixed3" data-blurb="★">blurb: ★---@=. .. . .    !*=. .</pre      >      <pre id="intro-free1" data-blurb="Tutorial">blurb: Tutorialinstruction: 蓝线会随着网格移动。旋转网格来连接蓝线和橙线。---@-. .!   | . . .    |*-.-.</pre      >      <pre id="m3x3-2-med" data-blurb="★">blurb: ★---. . *| | | . . .| | | @ .=.</pre      >      <pre id="m3x3-fixed-switch" data-blurb="★">blurb: ★---*=.-.. . .    | @-. .</pre      >      <pre id="m4x4-2" data-blurb="★">blurb: ★---. .=. .  | !  . . .-*  |    . . . .. @-. .</pre      >      <pre id="m4x4-1" data-blurb="★">blurb: ★---. . . .* . . @  | ! |. . . .  !    . . . .</pre      >      <pre id="m4x4-3" data-blurb="★">blurb: ★---. @ . .! |    . . . .      |.=.=.-.|       . * . .</pre      >      <pre id="m4x4-4" data-blurb="★">blurb: ★---. . . .* . . .    !  . . .-.!      .=.=. @</pre      >      <pre id="m4x4-5" data-blurb="★">blurb: ★---.-.-.-.|       @ .-.-.* .=. .!   |   .-.-. .</pre      >      <pre id="m4x4-6-med" data-blurb="★">blurb: ★---. * . ..-.=. .  |. . . .!   |.=. @ .</pre      >      <pre id="m4x4-7-hard1" data-blurb="★★">blurb: ★★---. . *-..-.=. .      |.=. . .  | |  @-.-.=.</pre      >      <pre id="m4x4-8-hard2" data-blurb="★★">blurb: ★★---.-@ .=.. . . .    |  .-. .-*  |    . .=.-.</pre      >      <pre id="m4x4-9-hard1" data-blurb="★★">blurb: ★★---. . .=.  !    @-. .-.. .=. .. . * .</pre      >