https://sps.yy-gp.com/hea01/i.html
项目简介
春节投壶游戏是一个民俗游戏主题的互动游戏项目，还原了古代投壶这一传统游戏。项目采用蓝色背景和木纹风格设计，提供投掷力度控制、角度调整、箭矢管理等功能，让用户在游戏中体验古代投壶游戏的魅力。
核心特点：
- 物理模拟：简化的投掷物理模拟（力度+角度）
- 力度控制：可调节投掷力度（0-100%）
- 角度调整：可调节投掷角度（30-80度）
- 箭矢管理：每人5支箭，用完可重新开始
- 实时反馈：投掷结果实时显示，统计得分
iFlow CLI使用功能
本项目开发过程中使用了以下iFlow CLI功能：
- write_file - 创建HTML文件
- 文件路径管理 - 使用绝对路径确保文件创建位置正确
- 文档系统化创建 - 标准化的项目文档
实现过程
1. 页面结构设计
- 采用2列网格布局，左侧为投壶游戏区，右侧为游戏控制面板
- 头部：投壶风格的标题区域，带有投壶emoji（
） - 主内容区：游戏区域、箭矢数量显示、结果提示
- 侧边栏：力度控制、角度控制、游戏说明、统计面板、分享功能
2. 视觉风格
- 色彩方案：蓝色（#1e3c72、#2a5298）+ 红色（#c0392b）+ 金色（#f1c40f）+ 棕色（#8b4513）
- 字体选择：Microsoft YaHei微软雅黑，现代简洁
- 布局特点：投壶区背景渐变、木质箭矢、力度条渐变
- 视觉元素：投壶emoji（）、箭矢3D效果、壶的立体设计
3. 功能实现
3.1 游戏状态管理
let gameState = {
power: 50, // 投掷力度
angle: 60, // 投掷角度
arrowsLeft: 5, // 剩余箭数
hits: 0, // 投中次数
totalThrows: 0, // 总投掷次数
score: 0, // 总得分
isThrowing: false // 是否正在投掷
};
3.2 核心功能（8个）
- 力度调整 - 调整投掷力度（10-100%），每次增加10%
- 角度调整 - 滑块控制投掷角度（30-80度）
- 投掷箭矢 - 根据力度和角度投掷箭矢
- 物理模拟 - 简化的投掷物理模拟（抛物线轨迹）
- 命中检测 - 检测箭矢是否投入壶中
- 箭矢管理 - 显示剩余箭数，用完可重新开始
- 统计系统 - 显示投中次数、总投掷次数、总得分
- 分享功能 - 分享游戏成绩到社交平台
3.3 投掷物理模拟
// 简化的物理模拟
const distance = (power * 3) + Math.random() * 50; // 水平距离
const height = (power * 2) + Math.random() * 30; // 垂直高度
// 命中检测
const targetDistance = 200; // 壶的位置距离
const targetHeight = 0; // 壶的高度
const hitThreshold = 50; // 命中阈值
const distanceDiff = Math.abs(distance - targetDistance);
const heightDiff = Math.abs(height - targetHeight);
// 判断是否命中
if (distanceDiff < hitThreshold && heightDiff < hitThreshold) {
// 命中
}
4. 交互设计
- 点击"调整力度"按钮增加力度
- 拖动角度滑块调整投掷角度
- 点击"投掷"按钮发射箭矢
- 投掷过程中箭矢动画效果
- 投掷结果显示命中或未命中
5. 响应式设计
- 2列布局在小屏幕（<900px）变为单列
- 游戏区域在小屏幕自适应
- 字体大小在小屏幕自动缩小
- 按钮在小屏幕自适应
截图
项目包含以下截图位置：
- 投壶游戏区域
- 游戏控制面板
- 投掷成功提示
- 统计数据显示
体验链接
网页体验路径：
39_春节投壶游戏.html
在线部署后可分享链接。
技术亮点
- 物理模拟 - 简化的投掷物理模拟，力度和角度影响轨迹
- 动态调整 - 实时调整投掷力度和角度
- 动画效果 - 箭矢投掷动画，命中检测
- 实时反馈 - 投掷结果实时显示
- 箭矢管理 - 箭矢数量管理，用完可重新开始
文化意义
本项目通过投壶游戏，让用户：
- 体验古代投壶这一传统游戏
- 了解古代体育文化活动
- 培养手眼协调能力
- 增强对传统文化的认同感
未来改进方向
- 实现更精确的物理模拟
- 添加风力等环境因素
- 实现多人对战模式
- 添加音效和背景音乐
- 开发更多难度等级
- 实现成就系统
