Skip to content

K
kaboomjs-template
Commit 69928630 authored by xiezhi's avatar xiezhi
Browse files
Options

初始化KaboomJS游戏模板项目 

- 基于KaboomJS的平台跳跃游戏
- 包含玩家角色、敌人、金币收集系统
- 支持本地库文件，无需CDN
- 配置环境变量端口APP_PORT_1
- 包含Docker容器化部署
- 完整的Makefile构建脚本
- 符合平台标准的.eazy配置文件
parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1274 additions and 0 deletions
.eazy 0 → 100644
View file @ 69928630
{
"version": "1.0.0",
"name": "KaboomJS游戏",
"tags": ["javascript", "kaboomjs", "game", "html5", "web-game"],
"description": "基于KaboomJS的平台跳跃游戏模板",
"init_commands": ["make install"],
"start_commands": ["make run"],
"stop_commands": ["make stop"],
"mapping_ports": {
"APP_PORT_1": 8000,
"APP_PORT_2": 8001,
"APP_PORT_3": 8002,
"APP_PORT_4": 8003
},
"deploy": [
{
"image_name": "kaboomjs-game",
"app_access_entry": true,
"ports": [
{
"name": "APP_PORT_1",
"main_port": true,
"inner_access_env_key": "GAME_URL",
"open_access": true,
"open_access_env_key": "GAME_DOMAIN"
}
],
"docker_file_dir": "./",
"deploy_resources": {
"cpu_limit": 0.1,
"memory_limit": 0.5,
"storage_limit": 0
}
}
]
}
.gitignore 0 → 100644
View file @ 69928630
# 依赖文件
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# 环境变量文件
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# 构建输出
dist/
build/
out/
# 日志文件
*.log
# 运行时数据
pids
*.pid
*.seed
*.pid.lock
# 覆盖率目录
coverage/
.nyc_output
# 依赖目录
jspm_packages/
# 可选的npm缓存目录
.npm
# 可选的eslint缓存
.eslintcache
# 可选的REPL历史
.node_repl_history
# 输出目录
*.tgz
# Yarn完整性文件
.yarn-integrity
# dotenv环境变量文件
.env
# 编辑器目录和文件
.idea/
*.swp
*.swo
*~
# 操作系统生成的文件
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
# 临时文件
*.tmp
*.temp
# 备份文件
*.bak
*.backup
.vscode/extensions.json 0 → 100644
View file @ 69928630
{
"recommendations": [
"ms-vscode.vscode-node-azure-pack",
"ms-vscode.vscode-typescript-next",
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode",
"ms-vscode.vscode-eslint",
"formulahendry.code-runner",
"editorconfig.editorconfig",
"ms-vscode.vscode-json"
]
}
\ No newline at end of file
Dockerfile 0 → 100644
View file @ 69928630
# KaboomJS游戏Docker镜像
FROM hb.eazytec-cloud.com/eazytec/eazydevelop-node:ubuntu22.04-node20-latest
# 设置工作目录
WORKDIR /app
# 设置环境变量
ENV NODE_ENV=production
ENV PORT=${APP_PORT_1:-8000}
# 安装系统依赖
RUN apk add --no-cache \
bash \
curl \
&& rm -rf /var/cache/apk/*
# 复制package文件
COPY package*.json ./
# 安装依赖
RUN npm ci --only=production && \
npm cache clean --force
# 复制应用文件
COPY . .
# 创建非root用户
RUN addgroup -g 1001 -S nodejs && \
adduser -S kaboom -u 1001
# 更改文件所有权
RUN chown -R kaboom:nodejs /app
USER kaboom
# 暴露端口
EXPOSE ${APP_PORT_1:-8000}
# 健康检查
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD curl -f http://localhost:${APP_PORT_1:-8000}/ || exit 1
# 复制并设置启动脚本
COPY docker-entrypoint.sh /usr/local/bin/
USER root
RUN chmod +x /usr/local/bin/docker-entrypoint.sh
USER kaboom
# 启动应用
ENTRYPOINT ["docker-entrypoint.sh"]
CMD ["npm", "start"]
Makefile 0 → 100644
View file @ 69928630
# KaboomJS游戏项目 Makefile
# 用于构建、运行和部署KaboomJS游戏
# 变量定义
APP_NAME = kaboomjs-game
NODE_VERSION = 20
MAIN_FILE = index.html
APP_PORT = $(or $(APP_PORT_1),8000)
LOG_FILE = $(abspath $(dir $(lastword $(MAKEFILE_LIST))))/.logs/app.log
PID_FILE = $(abspath $(dir $(lastword $(MAKEFILE_LIST))))/.logs/app.pid
DOCKER_IMAGE = $(APP_NAME)
DOCKER_TAG = latest
# Node.js命令
NODE = node
NPM = npm
NPXCMD = npx
# Docker命令
DOCKER = docker
# 默认目标
.PHONY: all
all: install
# 安装命令
.PHONY: install
install:
@echo "🎮 初始化 KaboomJS 游戏项目..."
@echo "检查 Node.js 版本..."
@$(NODE) --version
@echo "检查 NPM 版本..."
@$(NPM) --version
@echo "安装项目依赖..."
@if [ -f "package.json" ]; then \
$(NPM) install; \
echo "✅ 依赖安装完成"; \
else \
echo "❌ package.json 不存在"; \
exit 1; \
fi
@echo "✅ KaboomJS 游戏项目安装完成！"
# 开发模式运行（前台运行，带热重载）
.PHONY: dev
dev: install
@echo "🚀 启动 KaboomJS 游戏开发服务器..."
@echo "服务器将在端口 $(APP_PORT) 上运行"
@echo "浏览器将自动打开游戏页面"
@echo "按 Ctrl+C 停止服务器"
@$(NPM) run dev
# 生产模式运行（后台运行）
.PHONY: run
run: install
@echo "🎮 启动 KaboomJS 游戏服务器（生产模式）..."
@mkdir -p $(dir $(LOG_FILE))
@if [ -f "$(PID_FILE)" ]; then \
echo "服务器已在运行中，PID: $$(cat $(PID_FILE))"; \
exit 1; \
fi
@echo "启动服务器在端口 $(APP_PORT)..."
@PORT=$(APP_PORT) nohup $(NPM) start > $(LOG_FILE) 2>&1 & echo $$! > $(PID_FILE)
@sleep 2
@echo "✅ KaboomJS 游戏服务器已启动，PID: $$(cat $(PID_FILE))"
@echo "🎯 游戏访问地址: http://localhost:$(APP_PORT)/"
@echo "📋 查看日志: tail -f $(LOG_FILE)"
# 停止服务器
.PHONY: stop
stop:
@echo "🛑 停止 KaboomJS 游戏服务器..."
@if [ -f "$(PID_FILE)" ]; then \
PID=$$(cat $(PID_FILE)); \
if ps -p $$PID > /dev/null 2>&1; then \
echo "正在停止进程 $$PID..."; \
kill -TERM $$PID; \
sleep 2; \
if ps -p $$PID > /dev/null 2>&1; then \
echo "强制停止进程 $$PID..."; \
kill -9 $$PID; \
fi; \
echo "✅ 服务器已停止"; \
else \
echo "服务器进程不存在"; \
fi; \
rm -f $(PID_FILE); \
else \
echo "服务器未运行"; \
fi
# 强制停止所有相关进程
.PHONY: kill
kill:
@echo "🔥 强制停止所有相关的游戏服务器进程..."
@PIDS=$$(ps aux | grep -E "http-server.*$(APP_PORT)|npm.*start" | grep -v grep | awk '{print $$2}'); \
if [ -n "$$PIDS" ]; then \
echo "找到相关进程: $$PIDS"; \
for PID in $$PIDS; do \
echo "正在杀死进程 $$PID..."; \
kill -9 $$PID 2>/dev/null || true; \
done; \
sleep 1; \
echo "✅ 所有相关进程已被强制停止"; \
else \
echo "未找到相关进程"; \
fi
@rm -f $(PID_FILE)
@echo "✅ 强制停止操作完成"
# 重启服务器
.PHONY: restart
restart: stop run
# 查看服务器状态
.PHONY: status
status:
@echo "📊 检查 KaboomJS 游戏服务器状态..."
@if [ -f "$(PID_FILE)" ]; then \
PID=$$(cat $(PID_FILE)); \
if ps -p $$PID > /dev/null 2>&1; then \
echo "✅ 服务器正在运行"; \
echo " PID: $$PID"; \
echo " 端口: $(APP_PORT)"; \
echo " 访问地址: http://localhost:$(APP_PORT)/"; \
echo " 日志文件: $(LOG_FILE)"; \
else \
echo "❌ 服务器未运行（PID文件存在但进程不存在）"; \
rm -f $(PID_FILE); \
fi; \
else \
echo "❌ 服务器未运行"; \
fi
# 构建Docker镜像
.PHONY: docker-build
docker-build:
@echo "🐳 构建 KaboomJS 游戏 Docker 镜像..."
@$(DOCKER) build -t $(DOCKER_IMAGE):$(DOCKER_TAG) .
@echo "✅ Docker 镜像构建完成: $(DOCKER_IMAGE):$(DOCKER_TAG)"
# 运行Docker容器
.PHONY: docker-run
docker-run: docker-build
@echo "🚀 启动 KaboomJS 游戏 Docker 容器..."
@$(DOCKER) run -d \
--name $(APP_NAME)-container \
-p $(APP_PORT):3000 \
$(DOCKER_IMAGE):$(DOCKER_TAG)
@echo "✅ Docker 容器已启动"
@echo "🎯 游戏访问地址: http://localhost:$(APP_PORT)/"
# 停止Docker容器
.PHONY: docker-stop
docker-stop:
@echo "🛑 停止 KaboomJS 游戏 Docker 容器..."
@$(DOCKER) stop $(APP_NAME)-container 2>/dev/null || true
@$(DOCKER) rm $(APP_NAME)-container 2>/dev/null || true
@echo "✅ Docker 容器已停止并删除"
# 查看Docker容器日志
.PHONY: docker-logs
docker-logs:
@echo "📋 查看 KaboomJS 游戏 Docker 容器日志..."
@$(DOCKER) logs -f $(APP_NAME)-container
# 测试游戏
.PHONY: test
test:
@echo "🧪 测试 KaboomJS 游戏项目..."
@echo "检查必要文件..."
@for file in package.json index.html game.js; do \
if [ -f "$$file" ]; then \
echo "✅ $$file 存在"; \
else \
echo "❌ $$file 不存在"; \
exit 1; \
fi; \
done
@echo "检查依赖..."
@$(NPM) list --depth=0 > /dev/null 2>&1 && echo "✅ 依赖检查通过" || echo "⚠️ 依赖可能有问题"
@echo "✅ 测试完成！"
# 清理文件
.PHONY: clean
clean:
@echo "🧹 清理 KaboomJS 游戏项目文件..."
@rm -rf node_modules
@rm -rf .logs
@rm -rf dist
@rm -rf build
@rm -f package-lock.json
@echo "✅ 清理完成！"
# 完全清理（包括Docker）
.PHONY: clean-all
clean-all: clean docker-stop
@echo "🧹 完全清理项目和Docker资源..."
@$(DOCKER) rmi $(DOCKER_IMAGE):$(DOCKER_TAG) 2>/dev/null || true
@echo "✅ 完全清理完成！"
# 显示项目信息
.PHONY: info
info:
@echo "🎮 KaboomJS 游戏项目信息"
@echo "=========================="
@echo "项目名称: $(APP_NAME)"
@echo "Node.js版本要求: $(NODE_VERSION)"
@echo "默认端口: $(APP_PORT)"
@echo "主文件: $(MAIN_FILE)"
@echo "游戏文件: game.js"
@echo "Docker镜像: $(DOCKER_IMAGE):$(DOCKER_TAG)"
@echo ""
@if [ -f "package.json" ]; then \
echo "项目详情:"; \
$(NODE) -p "const pkg = require('./package.json'); \
console.log(' 名称: ' + pkg.name); \
console.log(' 版本: ' + pkg.version); \
console.log(' 描述: ' + pkg.description);"; \
fi
# 显示帮助信息
.PHONY: help
help:
@echo "🎮 KaboomJS 游戏项目 Makefile"
@echo "============================="
@echo ""
@echo "基本命令:"
@echo " make install - 安装项目依赖"
@echo " make dev - 启动开发服务器（前台，热重载）"
@echo " make run - 启动生产服务器（后台运行）"
@echo " make stop - 停止服务器"
@echo " make restart - 重启服务器"
@echo " make status - 查看服务器状态"
@echo " make kill - 强制停止所有相关进程"
@echo ""
@echo "Docker命令:"
@echo " make docker-build - 构建Docker镜像"
@echo " make docker-run - 运行Docker容器"
@echo " make docker-stop - 停止Docker容器"
@echo " make docker-logs - 查看容器日志"
@echo ""
@echo "维护命令:"
@echo " make test - 测试项目"
@echo " make clean - 清理项目文件"
@echo " make clean-all - 完全清理（包括Docker）"
@echo " make info - 显示项目信息"
@echo " make help - 显示此帮助信息"
@echo ""
@echo "使用示例:"
@echo " make dev # 开发模式启动游戏"
@echo " make run # 生产模式启动游戏"
@echo " make docker-run # 使用Docker运行游戏"
@echo " make status # 查看游戏服务器状态"
@echo ""
@echo "环境变量:"
@echo " APP_PORT_1 - 服务器端口（默认: 3000）"
@echo ""
@echo "🎯 游戏访问地址: http://localhost:$(APP_PORT)/"
README.md 0 → 100644
View file @ 69928630
# 🎮 KaboomJS 游戏模板
这是一个基于 [KaboomJS](https://kaboomjs.com/) 的游戏开发模板，提供了一个完整的游戏开发环境和示例游戏。
## 📋 项目概述
KaboomJS 是一个轻量级的 JavaScript 游戏引擎，专为快速原型开发和简单游戏制作而设计。本模板包含：
- 🎯 完整的平台跳跃游戏示例
- 🚀 开发和生产环境配置
- 🐳 Docker 容器化支持
- 📦 自动化构建和部署脚本
- 🎨 现代化的用户界面设计
## 🚀 快速开始
### 本地开发
1. **克隆项目**
```bash
git clone <repository-url>
cd kaboomjs-template
```
2. **安装依赖**
```bash
make install
# 或者
npm install
```
3. **启动开发服务器**
```bash
make dev
# 或者
npm run dev
```
4. **打开浏览器访问**
```
http://localhost:3000
```
### Docker 部署
1. **构建并运行 Docker 容器**
```bash
make docker-run
```
2. **访问游戏**
```
http://localhost:3000
```
## 🎮 游戏说明
这是一个简单的平台跳跃游戏，包含以下特性：
### 游戏机制
- **角色控制**: 使用空格键跳跃，左右箭头键移动
- **收集系统**: 收集金币获得分数
- **敌人系统**: 避开敌人，否则游戏结束
- **场景切换**: 包含主菜单、游戏场景和游戏结束场景
### 游戏特性
- 🎯 物理引擎支持（重力、碰撞检测）
- 🎵 音效系统
- 🎨 精美的像素艺术风格
- 📱 响应式设计，支持不同屏幕尺寸
- 🏆 分数系统
## 📁 项目结构
```
kaboomjs-template/
├── package.json # 项目配置和依赖
├── index.html # 游戏入口页面
├── game.js # 主游戏逻辑
├── lib/
│ └── kaboom.js # KaboomJS 本地库文件
├── .eazy # 项目配置文件
├── .resource/
│ └── resource_dev.json # 外部资源配置
├── Dockerfile # Docker 配置
├── docker-entrypoint.sh # Docker 启动脚本
├── Makefile # 自动化构建脚本
└── README.md # 项目说明文档
```
## 🛠️ 开发指南
### 核心文件说明
#### `game.js` - 游戏主逻辑
```javascript
/**
* 游戏的核心逻辑，包含：
* - 游戏引擎初始化
* - 资源加载
* - 场景定义
* - 游戏机制实现
*/
```
#### `index.html` - 游戏入口
- 游戏的 HTML 入口文件
- 包含游戏界面样式
- 提供游戏说明和控制提示
### 自定义游戏
1. **修改游戏设置**
```javascript
const k = kaboom({
width: 800, // 游戏宽度
height: 600, // 游戏高度
background: [135, 206, 235], // 背景色
debug: true, // 调试模式
});
```
2. **添加新的精灵和音效**
```javascript
k.loadSprite("newSprite", "path/to/sprite.png");
k.loadSound("newSound", "path/to/sound.wav");
```
3. **创建新的游戏对象**
```javascript
const newObject = k.add([
k.sprite("newSprite"),
k.pos(x, y),
k.area(),
k.body(),
"newTag"
]);
```
## 🔧 可用命令
### 基本命令
```bash
make install # 安装项目依赖
make dev # 启动开发服务器（前台，热重载）
make run # 启动生产服务器（后台运行）
make stop # 停止服务器
make restart # 重启服务器
make status # 查看服务器状态
make kill # 强制停止所有相关进程
```
### Docker 命令
```bash
make docker-build # 构建Docker镜像
make docker-run # 运行Docker容器
make docker-stop # 停止Docker容器
make docker-logs # 查看容器日志
```
### 维护命令
```bash
make test # 测试项目
make clean # 清理项目文件
make clean-all # 完全清理（包括Docker）
make info # 显示项目信息
make help # 显示帮助信息
```
## 📦 依赖说明
### 本地库文件
- **lib/kaboom.js**: KaboomJS 游戏引擎核心库（本地版本，无需网络连接）
### 开发依赖
- **http-server**: 开发和生产服务器
### 优势
- ✅ **离线运行**: 无需网络连接，完全本地化
- ✅ **加载速度快**: 本地文件加载，无CDN延迟
- ✅ **版本稳定**: 锁定特定版本，避免CDN更新导致的兼容性问题
## 🌐 部署选项
### 1. 静态文件部署
游戏可以作为静态文件部署到任何 Web 服务器：
```bash
# 复制文件到 Web 服务器目录
cp -r . /var/www/html/kaboomjs-game/
```
### 2. Docker 容器部署
```bash
# 构建镜像
docker build -t kaboomjs-game .
# 运行容器
docker run -d -p 3000:3000 kaboomjs-game
```
### 3. 云平台部署
- **Vercel**: 直接部署静态文件
- **Netlify**: 支持持续集成部署
- **GitHub Pages**: 免费静态网站托管
## 🎨 自定义主题
### 修改游戏外观
1. **背景颜色**
```javascript
background: [R, G, B] // RGB 颜色值
```
2. **游戏尺寸**
```javascript
width: 800, // 宽度
height: 600, // 高度
```
3. **UI 样式**
修改 `index.html` 中的 CSS 样式
## 🔍 调试和开发
### 开启调试模式
```javascript
const k = kaboom({
debug: true, // 显示碰撞边界和调试信息
});
```
### 常用调试功能
- 显示 FPS
- 显示碰撞边界
- 控制台日志输出
- 性能监控
## 📚 学习资源
### KaboomJS 官方资源
- [官方网站](https://kaboomjs.com/)
- [官方文档](https://kaboomjs.com/doc)
- [示例游戏](https://kaboomjs.com/play)
- [API 参考](https://kaboomjs.com/doc/intro)
### 游戏开发教程
- [KaboomJS 入门教程](https://kaboomjs.com/doc/intro)
- [制作你的第一个游戏](https://kaboomjs.com/doc/intro)
- [高级游戏机制](https://kaboomjs.com/doc)
## 🤝 贡献指南
欢迎提交问题和改进建议！
1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request
## 📄 许可证
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
## 🙏 致谢
- [KaboomJS](https://kaboomjs.com/) - 优秀的游戏引擎
- [Node.js](https://nodejs.org/) - JavaScript 运行时
- [Docker](https://www.docker.com/) - 容器化平台
## 📞 支持
如果您遇到任何问题或需要帮助，请：
1. 查看 [FAQ](#) 部分
2. 搜索现有的 [Issues](../../issues)
3. 创建新的 [Issue](../../issues/new)
4. 联系维护者
---
**快乐游戏开发！** 🎮✨
docker-entrypoint.sh 0 → 100755
View file @ 69928630
#!/bin/bash
# KaboomJS游戏Docker启动脚本
# 此脚本用于在容器启动时进行必要的初始化工作
set -e
# 颜色输出函数
print_info() {
echo -e "\033[36m[INFO]\033[0m $1"
}
print_success() {
echo -e "\033[32m[SUCCESS]\033[0m $1"
}
print_error() {
echo -e "\033[31m[ERROR]\033[0m $1"
}
print_warning() {
echo -e "\033[33m[WARNING]\033[0m $1"
}
# 显示启动信息
print_info "=== KaboomJS 游戏容器启动 ==="
print_info "Node.js 版本: $(node --version)"
print_info "NPM 版本: $(npm --version)"
print_info "工作目录: $(pwd)"
print_info "用户: $(whoami)"
# 检查必要文件
print_info "检查必要文件..."
required_files=("package.json" "index.html" "game.js")
for file in "${required_files[@]}"; do
if [ -f "$file" ]; then
print_success "✓ $file 存在"
else
print_error "✗ $file 不存在"
exit 1
fi
done
# 检查node_modules
if [ ! -d "node_modules" ]; then
print_warning "node_modules 不存在，正在安装依赖..."
npm install
print_success "依赖安装完成"
else
print_success "✓ node_modules 存在"
fi
# 检查端口环境变量
if [ -z "$APP_PORT_1" ]; then
export APP_PORT_1=8000
print_warning "APP_PORT_1 环境变量未设置，使用默认端口: $APP_PORT_1"
else
print_info "使用端口: $APP_PORT_1"
fi
export PORT=$APP_PORT_1
# 创建必要的目录
print_info "创建必要目录..."
mkdir -p logs
mkdir -p tmp
# 设置权限
print_info "设置文件权限..."
chmod -R 755 .
# 显示游戏信息
print_info "=== 游戏信息 ==="
if [ -f "package.json" ]; then
GAME_NAME=$(node -p "require('./package.json').name" 2>/dev/null || echo "KaboomJS Game")
GAME_VERSION=$(node -p "require('./package.json').version" 2>/dev/null || echo "1.0.0")
print_info "游戏名称: $GAME_NAME"
print_info "游戏版本: $GAME_VERSION"
fi
# 显示访问信息
print_info "=== 访问信息 ==="
print_info "本地访问: http://localhost:$APP_PORT_1"
print_info "容器内访问: http://0.0.0.0:$APP_PORT_1"
# 健康检查函数
health_check() {
print_info "执行健康检查..."
if curl -f -s "http://localhost:$PORT" > /dev/null; then
print_success "健康检查通过"
return 0
else
print_error "健康检查失败"
return 1
fi
}
# 优雅关闭处理
cleanup() {
print_info "收到关闭信号，正在优雅关闭..."
if [ ! -z "$SERVER_PID" ]; then
kill -TERM "$SERVER_PID" 2>/dev/null || true
wait "$SERVER_PID" 2>/dev/null || true
fi
print_success "应用已关闭"
exit 0
}
# 设置信号处理
trap cleanup SIGTERM SIGINT
# 如果传入了参数，直接执行
if [ "$#" -gt 0 ]; then
print_info "执行命令: $@"
exec "$@"
fi
# 默认启动游戏服务器
print_success "=== 启动 KaboomJS 游戏服务器 ==="
print_info "服务器将在 http://0.0.0.0:$APP_PORT_1 上运行"
print_info "按 Ctrl+C 停止服务器"
# 启动服务器并获取PID
npm start &
SERVER_PID=$!
# 等待服务器启动
sleep 3
# 执行健康检查
if health_check; then
print_success "🎮 KaboomJS 游戏服务器启动成功！"
print_info "现在可以在浏览器中访问游戏了"
else
print_warning "健康检查失败，但服务器可能仍在启动中..."
fi
# 等待服务器进程
wait "$SERVER_PID"
game.js 0 → 100644
View file @ 69928630
/**
* KaboomJS游戏主文件
* 这是一个简单的平台跳跃游戏示例
*/
/**
* 初始化kaboom游戏引擎
*/
const k = kaboom({
width: 800,
height: 600,
background: [135, 206, 235], // 天空蓝色背景
debug: true, // 开启调试模式
});
/**
* 加载游戏资源
*/
k.loadSprite("player", "https://kaboomjs.com/sprites/bean.png");
k.loadSprite("enemy", "https://kaboomjs.com/sprites/ghosty.png");
k.loadSprite("coin", "https://kaboomjs.com/sprites/coin.png");
k.loadSprite("grass", "https://kaboomjs.com/sprites/grass.png");
k.loadSprite("steel", "https://kaboomjs.com/sprites/steel.png");
// 加载音效
k.loadSound("jump", "https://kaboomjs.com/sounds/jump.wav");
k.loadSound("coin", "https://kaboomjs.com/sounds/coin.wav");
/**
* 主菜单场景
*/
k.scene("menu", () => {
// 添加标题
k.add([
k.text("🎮 KaboomJS 游戏", { size: 48 }),
k.pos(k.width() / 2, k.height() / 2 - 100),
k.anchor("center"),
k.color(255, 255, 255),
]);
// 添加开始提示
k.add([
k.text("按空格键开始游戏", { size: 24 }),
k.pos(k.width() / 2, k.height() / 2),
k.anchor("center"),
k.color(200, 200, 200),
]);
// 添加控制说明
k.add([
k.text("控制说明：空格键跳跃，左右箭头移动", { size: 16 }),
k.pos(k.width() / 2, k.height() / 2 + 100),
k.anchor("center"),
k.color(180, 180, 180),
]);
// 监听空格键开始游戏
k.onKeyPress("space", () => {
k.go("game");
});
});
/**
* 游戏主场景
*/
k.scene("game", () => {
// 设置重力
k.setGravity(1600);
// 创建地面平台
for (let i = 0; i < k.width() / 64; i++) {
k.add([
k.sprite("grass"),
k.pos(i * 64, k.height() - 64),
k.area(),
k.body({ isStatic: true }),
k.scale(2),
"ground"
]);
}
// 创建一些额外的平台（降低高度）
k.add([
k.sprite("steel"),
k.pos(300, k.height() - 150),
k.area(),
k.body({ isStatic: true }),
k.scale(2),
"platform"
]);
k.add([
k.sprite("steel"),
k.pos(500, k.height() - 200),
k.area(),
k.body({ isStatic: true }),
k.scale(2),
"platform"
]);
// 添加更多较低的平台
k.add([
k.sprite("steel"),
k.pos(650, k.height() - 120),
k.area(),
k.body({ isStatic: true }),
k.scale(1.5),
"platform"
]);
// 创建玩家
const player = k.add([
k.sprite("player"),
k.pos(100, k.height() - 150),
k.area(),
k.body(),
k.scale(2),
"player"
]);
// 创建敌人
const enemy = k.add([
k.sprite("enemy"),
k.pos(400, k.height() - 150),
k.area(),
k.body(),
k.scale(1.5),
"enemy"
]);
// 创建金币
const coin = k.add([
k.sprite("coin"),
k.pos(350, k.height() - 180), // 放在较低平台上
k.area(),
k.scale(1.5),
"coin"
]);
// 添加更多金币
k.add([
k.sprite("coin"),
k.pos(550, k.height() - 230),
k.area(),
k.scale(1.5),
"coin"
]);
k.add([
k.sprite("coin"),
k.pos(700, k.height() - 150),
k.area(),
k.scale(1.5),
"coin"
]);
// 分数
let score = 0;
const scoreLabel = k.add([
k.text("分数: 0", { size: 24 }),
k.pos(20, 20),
k.color(255, 255, 255),
]);
// 玩家控制
k.onKeyPress("space", () => {
if (player.isGrounded()) {
player.jump(800); // 增加跳跃力
k.play("jump");
}
});
k.onKeyDown("left", () => {
player.move(-200, 0);
});
k.onKeyDown("right", () => {
player.move(200, 0);
});
// 碰撞检测 - 玩家与金币
player.onCollide("coin", (coin) => {
k.destroy(coin);
score += 10;
scoreLabel.text = `分数: ${score}`;
k.play("coin");
// 创建新金币（在更合理的高度）
k.add([
k.sprite("coin"),
k.pos(k.rand(100, k.width() - 100), k.rand(k.height() - 250, k.height() - 120)),
k.area(),
k.scale(1.5),
"coin"
]);
});
// 碰撞检测 - 玩家与敌人
player.onCollide("enemy", () => {
k.go("gameover", score);
});
// 防止玩家掉出屏幕
player.onUpdate(() => {
if (player.pos.y > k.height()) {
k.go("gameover", score);
}
// 限制玩家在屏幕内
if (player.pos.x < 0) {
player.pos.x = 0;
}
if (player.pos.x > k.width() - 32) {
player.pos.x = k.width() - 32;
}
});
// 敌人简单AI
let enemyDirection = 1;
enemy.onUpdate(() => {
// 在地面上左右移动
enemy.move(enemyDirection * 80, 0);
// 到达边界时转向
if (enemy.pos.x <= 200 || enemy.pos.x >= 600) {
enemyDirection *= -1;
}
});
// 游戏说明
k.add([
k.text("空格键跳跃，左右箭头移动，收集金币，避开幽灵！", { size: 16 }),
k.pos(k.width() / 2, k.height() - 30),
k.anchor("center"),
k.color(255, 255, 255),
]);
});
/**
* 游戏结束场景
*/
k.scene("gameover", (score) => {
k.add([
k.text("游戏结束!", { size: 48 }),
k.pos(k.width() / 2, k.height() / 2 - 100),
k.anchor("center"),
k.color(255, 0, 0),
]);
k.add([
k.text(`最终得分: ${score}`, { size: 24 }),
k.pos(k.width() / 2, k.height() / 2 - 50),
k.anchor("center"),
k.color(255, 255, 255),
]);
k.add([
k.text("按空格键重新开始", { size: 18 }),
k.pos(k.width() / 2, k.height() / 2 + 50),
k.anchor("center"),
k.color(200, 200, 200),
]);
k.add([
k.text("按M键返回主菜单", { size: 18 }),
k.pos(k.width() / 2, k.height() / 2 + 80),
k.anchor("center"),
k.color(200, 200, 200),
]);
k.onKeyPress("space", () => {
k.go("game");
});
k.onKeyPress("m", () => {
k.go("menu");
});
});
/**
* 启动游戏
*/
console.log("KaboomJS 游戏正在启动...");
k.go("menu");
\ No newline at end of file
index.html 0 → 100644
View file @ 69928630
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KaboomJS 游戏</title>
<style>
/**
* 游戏页面样式
*/
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.game-container {
text-align: center;
padding: 20px;
}
.game-title {
color: white;
font-size: 2.5rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.game-description {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 20px;
max-width: 600px;
line-height: 1.5;
}
canvas {
border: 3px solid #fff;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
background: #87CEEB;
}
.controls {
margin-top: 20px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.controls span {
display: inline-block;
margin: 0 10px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 768px) {
.game-title {
font-size: 2rem;
}
canvas {
max-width: 100%;
height: auto;
}
.controls {
font-size: 0.8rem;
}
.controls span {
display: block;
margin: 5px 0;
}
}
</style>
</head>
<body>
<div class="game-container">
<h1 class="game-title">🎮 KaboomJS 游戏</h1>
<p class="game-description">
欢迎来到这个使用 KaboomJS 构建的简单平台跳跃游戏！
控制你的角色收集金币，避开敌人，看看你能得到多少分！
</p>
<!-- 游戏画布将在这里渲染 -->
<div id="game-canvas"></div>
<div class="controls">
<span>空格键：跳跃</span>
<span>左右箭头：移动</span>
<span>目标：收集金币，避开敌人</span>
</div>
</div>
<!-- 加载 KaboomJS 本地库 -->
<script src="./lib/kaboom.js"></script>
<!-- 加载游戏代码 -->
<script src="./game.js"></script>
</body>
</html>
lib/kaboom.js 0 → 100644
View file @ 69928630
This source diff could not be displayed because it is too large. You can view the blob instead.
package-lock.json 0 → 100644
View file @ 69928630
This diff is collapsed.
package.json 0 → 100644
View file @ 69928630
{
"name": "kaboomjs-game",
"version": "1.0.0",
"description": "A simple game built with KaboomJS",
"main": "game.js",
"scripts": {
"start": "npx http-server . -p ${APP_PORT_1:-3000} -c-1",
"dev": "npx http-server . -p ${APP_PORT_1:-3000} -c-1 -o",
"build": "echo 'No build step required for KaboomJS'",
"test": "echo 'No tests specified'"
},
"keywords": [
"kaboomjs",
"game",
"javascript",
"html5"
],
"author": "Developer",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"http-server": "^14.1.1"
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment