<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CocosCreator 原生平台游戏控制演示</title>
<script src="https://cdn.bootcdn.net/ajax/libs/cocos2d-js/3.17.0/cocos2d-js.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Microsoft YaHei', sans-serif;
}
#gameCanvas {
border: 2px solid #4a5568;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.control-panel {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.btn-control {
transition: all 0.3s ease;
transform: translateY(0);
}
.btn-control:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.status-indicator {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- 标题区域 -->
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-white mb-4 drop-shadow-lg">
CocosCreator 原生平台游戏控制演示
</h1>
<p class="text-xl text-white/90 drop-shadow">
演示 cc.director.end()、cc.director.pause()、cc.director.resume() 的使用
</p>
</div>
<!-- 主要内容区域 -->
<div class="grid lg:grid-cols-3 gap-8">
<!-- 游戏画布区域 -->
<div class="lg:col-span-2">
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6">
<h2 class="text-2xl font-semibold text-white mb-4">游戏场景</h2>
<div class="flex justify-center">
<canvas id="gameCanvas" width="600" height="400"></canvas>
</div>
</div>
</div>
<!-- 控制面板 -->
<div class="space-y-6">
<!-- 游戏状态 -->
<div class="control-panel p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-info-circle mr-2 text-blue-500"></i>
游戏状态
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-gray-600">运行状态:</span>
<span id="gameStatus" class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">
运行中
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">暂停状态:</span>
<span id="pauseStatus" class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">
未暂停
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">帧率:</span>
<span id="fpsCounter" class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
0 FPS
</span>
</div>
</div>
</div>
<!-- 控制按钮 -->
<div class="control-panel p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-gamepad mr-2 text-purple-500"></i>
游戏控制
</h3>
<div class="space-y-3">
<button id="pauseBtn" class="btn btn-warning btn-block btn-control">
<i class="fas fa-pause mr-2"></i>暂停游戏
</button>
<button id="resumeBtn" class="btn btn-success btn-block btn-control">
<i class="fas fa-play mr-2"></i>继续游戏
</button>
<button id="endBtn" class="btn btn-error btn-block btn-control">
<i class="fas fa-stop mr-2"></i>退出游戏
</button>
<button id="restartBtn" class="btn btn-info btn-block btn-control">
<i class="fas fa-redo mr-2"></i>重新开始
</button>
</div>
</div>
<!-- API说明 -->
<div class="control-panel p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-code mr-2 text-green-500"></i>
API 说明
</h3>
<div class="space-y-4 text-sm">
<div class="bg-gray-50 p-3 rounded-lg">
<code class="text-blue-600 font-mono">cc.director.end()</code>
<p class="text-gray-600 mt-1">结束导演生命周期,退出游戏</p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<code class="text-blue-600 font-mono">cc.director.pause()</code>
<p class="text-gray-600 mt-1">暂停游戏逻辑,渲染和UI继续</p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<code class="text-blue-600 font-mono">cc.director.resume()</code>
<p class="text-gray-600 mt-1">恢复暂停的游戏逻辑</p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<code class="text-blue-600 font-mono">cc.director.isPaused()</code>
<p class="text-gray-600 mt-1">返回布尔值,判断游戏是否暂停</p>
</div>
</div>
</div>
</div>
</div>
<!-- 底部说明 -->
<div class="mt-12 text-center">
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6">
<p class="text-white/90 text-lg">
本演示基于 CocosCreator 官方 API 实现,展示了原生平台下的游戏控制功能
</p>
<p class="text-white/70 mt-2">
参考博客: <a href="https://blog.csdn.net/weixin_41316824/article/details/85157248" target="_blank" class="underline hover:text-white">CocosCreator原生平台退出游戏,暂停和继续</a>
</p>
</div>
</div>
</div>
<script>
// 游戏主逻辑
class GameDemo {
constructor() {
this.canvas = document.getElementById('gameCanvas');
this.ctx = this.canvas.getContext('2d');
this.isRunning = true;
this.isPaused = false;
this.frameCount = 0;
this.lastTime = 0;
this.fps