snake-game:基于原生 HTML5 Canvas 的单文件小游戏项目

贪吃蛇小游戏 — 由 AtomCode 构建的单文件 Web 应用(HTML+CSS+JS 零依赖,打开即玩,支持最高分记录)

分支1Tags0

snake-game · 贪吃蛇

贪吃蛇小游戏 —— 由 AtomCode 构建的单文件 Web 应用。

玩法

  1. 用浏览器直接打开 index.html 即可开始,无需安装任何东西。
  2. 控制方式:
    • 键盘:↑ ↓ ← → 或 W A S D
    • 暂停 / 继续:空格
    • 手机:在棋盘上滑动即可控制方向
  3. 规则:吃到食物蛇变长、得分 +1,速度逐渐加快;撞墙或咬到自己则游戏结束。
  4. 最高分保存在浏览器本地(localStorage),随时挑战自己的纪录。

特性

  • 单文件实现:HTML + CSS + JS 全部在 index.html 中,零依赖、离线可玩
  • 速度随得分递增,越吃越快
  • 最高分本地记录,破纪录有 🎉 提示
  • 深色主题 + 荧光风格渲染(Canvas)
  • 桌面键盘与移动端触屏滑动双支持

技术说明

项目 说明
渲染 原生 Canvas 2D,20×20 棋盘
逻辑 setInterval 驱动的经典贪吃蛇状态机
存储 localStorage 保存最高分
依赖 无任何第三方库

运行

# 方式一(推荐,最简单):直接双击 index.html 用浏览器打开

# 方式二:起一个本地静态服务(可选)
# 注意:必须先进入 index.html 所在的目录,再启动服务
cd snake-game
python -m http.server 8080
# 然后用浏览器访问 http://localhost:8080

由 AtomCode 在芯捷社区创建 🐍

项目介绍

贪吃蛇小游戏 — 由 AtomCode 构建的单文件 Web 应用(HTML+CSS+JS 零依赖,打开即玩,支持最高分记录)

定制我的领域