科学教育
标题:
第6课 课后作业
[打印本页]
作者:
俞绍杰
时间:
2025-11-6 11:59
标题:
第6课 课后作业
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-blue-50 to-green-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- 头部导航 -->
<header class="text-center mb-8">
<h1 class="text-4xl font-bold text-green-600 mb-2">贪吃蛇游戏</h1>
<p class="text-gray-600">使用键盘方向键控制蛇的移动</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- 游戏信息区域 -->
<div class="bg-white rounded-2xl shadow-lg p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">游戏信息</h2>
<div class="space-y-4">
<div class="flex justify-between items-center">
<span class="text-gray-600">当前分数:</span>
<span id="score" class="text-2xl font-bold text-green-600">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">最高分:</span>
<span id="highScore" class="text-xl font-semibold text-blue-600">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">蛇身长度:</span>
<span id="length" class="text-xl font-semibold text-orange-600">4</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">游戏状态:</span>
<span id="status" class="px-3 py-1 rounded-full bg-green-100 text-green-800">准备开始</span>
</div>
</div>
<!-- 游戏控制 -->
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 mb-3">游戏控制</h3>
<div class="grid grid-cols-2 gap-3">
<button id="startBtn" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg transition-colors">
<i class="fas fa-play mr-2"></i>开始游戏
</button>
<button id="pauseBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg transition-colors">
<i class="fas fa-pause mr-2"></i>暂停游戏
</button>
<button id="resetBtn" class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg transition-colors">
<i class="fas fa-redo mr-2"></i>重新开始
</button>
<button id="settingsBtn" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition-colors">
<i class="fas fa-cog mr-2"></i>游戏设置
</button>
</div>
</div>
<!-- 游戏规则 -->
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 mb-3">游戏规则</h3>
<ul class="text-gray-600 space-y-2">
</ul>
</div>
</div>
<!-- 游戏画布区域 -->
<div class="lg:col-span-2">
<div class="bg-white rounded-2xl shadow-lg p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-semibold text-gray-800">游戏区域</h2>
<div class="flex items-center space-x-2">
<span class="text-sm text-gray-500">难度:</span>
<select id="difficulty" class="border rounded px-2 py-1">
<option value="200">简单</option>
<option value="150" selected>普通</option>
<option value="100">困难</option>
<option value="70">极难</option>
</select>
</div>
</div>
<div class="flex justify-center">
<canvas id="gameCanvas" width="400" height="400" class="border-2 border-gray-200 rounded-lg"></canvas>
</div>
<div class="mt-4 text-center text-gray-500 text-sm">
使用键盘方向键 ↑ ↓ ← → 控制蛇的移动
</div>
</div>
</div>
</div>
<!-- 游戏统计 -->
<div class="mt-8 bg-white rounded-2xl shadow-lg p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">游戏统计</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="text-center p-4 bg-blue-50 rounded-lg">
<div class="text-2xl font-bold text-blue-600" id="gamesPlayed">0</div>
<div class="text-gray-600">游戏次数</div>
</div>
<div class="text-center p-4 bg-green-50 rounded-lg">
<div class="text-2xl font-bold text-green-600" id="totalScore">0</div>
</div>
<div class="text-center p-4 bg-orange-50 rounded-lg">
<div class="text-2xl font-bold text-orange-600" id="maxLength">4</div>
<div class="text-gray-600">最长蛇身</div>
</div>
<div class="text-center p-4 bg-purple-50 rounded-lg">
<div class="text-2xl font-bold text-purple-600" id="foodEaten">0</div>
<div class="text-gray-600">吃掉食物</div>
</div>
</div>
</div>
</div>
<!-- 设置模态框 -->
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">
<div class="bg-white rounded-2xl p-6 max-w-md w-full mx-4">
<h3 class="text-2xl font-semibold text-gray-800 mb-4">游戏设置</h3>
<div class="space-y-4">
<div>
<label class="block text-gray-700 mb-2">网格颜色:</label>
<input type="color" id="gridColor" value="#e5e7eb" class="w-full p-1 border rounded">
</div>
<div>
<label class="block text-gray-700 mb-2">蛇头颜色:</label>
<input type="color" id="headColor" value="#059669" class="w-full p-1 border rounded">
</div>
<div>
<label class="block text-gray-700 mb-2">蛇身颜色:</label>
<input type="color" id="bodyColor" value="#10b981" class="w-full p-1 border rounded">
</div>
<div>
<label class="block text-gray-700 mb-2">食物颜色:</label>
<input type="color" id="foodColor" value="#f59e0b" class="w-full p-1 border rounded">
</div>
</div>
<div class="flex justify-end space-x-3 mt-6">
<button id="closeSettings" class="px-4 py-2 text-gray-600 hover:text-gray-800">取消</button>
<button id="saveSettings" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">保存设置</button>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
欢迎光临 科学教育 (http://sci-edu.net/)
Powered by Discuz! X3.2