当前位置：首页 > news >正文

Python自动化从入门到实战(23)：Python打地鼠游戏开发

news 2025/10/17 6:21:21

Python自动化从入门到实战(23)：Python打地鼠游戏开发

引言

你是否曾经想过自己动手开发一款简单有趣的网页游戏？今天，我们就来学习如何使用Python的Flask框架来开发一个适合幼儿园小朋友玩的打地鼠游戏！这款游戏不仅操作简单，还能帮助小朋友们锻炼反应能力。最重要的是，即使你是编程小白，按照这个教程也能轻松上手哦！

预览效果图

在这里插入图片描述

游戏功能介绍

我们要开发的打地鼠游戏具有以下功能：

一个可爱的游戏界面，包含地鼠和开始按钮
地鼠初始时隐藏在按钮下方
点击开始按钮后，游戏开始，地鼠会在游戏区域内随机移动
玩家点击地鼠可以得分
游戏有30秒的时间限制
游戏结束时显示玩家的得分和历史最高分
支持记录和展示最高分数

技术准备

在开始编写代码之前，我们需要准备以下技术工具：

Python：我们将使用Python作为后端语言
Flask：一个轻量级的Python Web框架，用于处理后端逻辑
HTML/CSS/JavaScript：用于构建游戏的前端界面和交互逻辑

如果你还没有安装Python和Flask，可以先安装Python，然后使用pip安装Flask：

pip install flask

项目结构

首先，让我们来了解一下项目的文件结构。一个良好的项目结构可以让我们的代码更加清晰和易于维护。

WhackAMole/
├── app.py                 # Flask后端应用
├── data/                  # 数据文件夹
│   └── high_score.json    # 存储最高分的JSON文件
├── static/                # 静态文件文件夹
│   ├── css/               # CSS样式文件夹
│   │   └── style.css      # 游戏样式文件
│   └── js/                # JavaScript文件夹
│       └── game.js        # 游戏逻辑文件
└── templates/             # HTML模板文件夹└── index.html         # 游戏主页面

这个结构遵循了Flask框架的最佳实践，将不同功能的代码分开存放：

app.py：包含所有后端逻辑，如路由处理、最高分管理等
data/：存放游戏数据，如最高分记录
static/：存放静态资源，如CSS样式和JavaScript脚本
templates/：存放HTML模板文件

后端开发（app.py）

让我们从后端代码开始。app.py是我们游戏的核心，它负责处理用户请求、管理最高分等功能。

from flask import Flask, render_template, jsonify, request
import json
import osapp = Flask(__name__)# 确保data目录存在
data_dir = 'data'
os.makedirs(data_dir, exist_ok=True)
high_score_file = os.path.join(data_dir, 'high_score.json')# 初始化或加载最高分
def load_high_score():if os.path.exists(high_score_file):try:with open(high_score_file, 'r') as f:data = json.load(f)return data.get('high_score', 0)except:return 0return 0def save_high_score(score):data = {'high_score': score}with open(high_score_file, 'w') as f:json.dump(data, f)@app.route('/')
def index():high_score = load_high_score()return render_template('index.html', high_score=high_score)@app.route('/update_score', methods=['POST'])
def update_score():try:data = request.get_json()score = data.get('score', 0)high_score = load_high_score()if score > high_score:save_high_score(score)return jsonify({'success': True, 'new_high_score': True, 'high_score': score})else:return jsonify({'success': True, 'new_high_score': False, 'high_score': high_score})except Exception as e:return jsonify({'success': False, 'error': str(e)})@app.route('/get_high_score')
def get_high_score():high_score = load_high_score()return jsonify({'high_score': high_score})if __name__ == '__main__':app.run(debug=True, host='0.0.0.0', port=5000)

代码解析

导入必要的库：我们使用Flask来创建Web应用，json用于处理JSON数据，os用于文件操作。
创建Flask应用实例：app = Flask(__name__) 创建了一个Flask应用。
确保数据目录存在：os.makedirs(data_dir, exist_ok=True) 确保data目录存在，如果不存在则创建。
加载和保存最高分函数：
- load_high_score()：从JSON文件中读取最高分
- save_high_score(score)：将最高分保存到JSON文件中
路由处理：
- /：主页面路由，渲染游戏主页面并传递最高分
- /update_score：更新分数的路由，检查是否有新的最高分
- /get_high_score：获取当前最高分的路由
启动服务器：app.run() 启动Flask服务器，设置为调试模式，监听所有网络接口的5000端口

前端开发

HTML页面（index.html）

现在，让我们来创建游戏的前端页面。index.html定义了游戏的基本结构。

<!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="{{ url_for('static', filename='css/style.css') }}">
</head>
<body><div class="game-container"><h1>🐹 打地鼠游戏 🐹</h1><div class="info-panel"><div class="score-display"><span>得分: </span><span id="score" class="score-number">0</span></div><div class="timer-display"><span>时间: </span><span id="timer" class="timer-number">30</span>秒</div><div class="high-score-display"><span>最高分: </span><span id="high-score" class="high-score-number">{{ high_score }}</span></div></div><div class="game-area"><button id="start-button" class="start-button">开始游戏</button><div id="mole" class="mole">🐭</div></div><div id="game-over" class="game-over hidden"><h2>游戏结束！</h2><p>你的得分: <span id="final-score">0</span></p><p>最高分: <span id="display-high-score">{{ high_score }}</span></p><button id="play-again" class="play-again-button">再玩一次</button></div></div><script src="{{ url_for('static', filename='js/game.js') }}"></script>
</body>
</html>

代码解析

基本HTML结构：标准的HTML5文档结构，包含头部和主体部分。
标题和元信息：设置页面标题为"小朋友打地鼠游戏"，并配置字符编码和视口设置。
引入CSS和JavaScript：使用Flask的url_for函数引入静态文件。
游戏容器：所有游戏元素都包裹在一个game-container div中。
游戏信息面板：显示得分、剩余时间和最高分。
游戏区域：包含开始按钮和地鼠元素。地鼠使用emoji表情🐭来表示。
游戏结束面板：游戏结束时显示，包含最终得分和再玩一次按钮，初始状态为隐藏。

CSS样式（style.css）

为了让游戏界面更加美观和适合小朋友，我们需要添加一些CSS样式。

/* 全局样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Arial', 'Microsoft YaHei', sans-serif;background-color: #f0f9ff;background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");display: flex;justify-content: center;align-items: center;min-height: 100vh;
}/* 游戏容器 */
.game-container {background-color: #ffffff;border-radius: 20px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 30px;text-align: center;max-width: 600px;width: 90%;
}/* 标题样式 */
h1 {color: #ff6b6b;font-size: 2.5rem;margin-bottom: 20px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}/* 更多样式... */

这个CSS文件定义了游戏的整体外观，包括背景颜色、字体、游戏容器样式、按钮样式、地鼠样式等。我们使用了明亮、活泼的颜色和圆润的边角，让游戏界面看起来更加友好和有趣。

JavaScript游戏逻辑（game.js）

现在，让我们来实现游戏的交互逻辑。game.js文件处理游戏的核心功能，如开始游戏、移动地鼠、计分等。

// 游戏变量
let score = 0;
let timeLeft = 30;
let gameInterval;
let moleInterval;
let isGameRunning = false;// DOM元素
const startButton = document.getElementById('start-button');
const mole = document.getElementById('mole');
const scoreDisplay = document.getElementById('score');
const timerDisplay = document.getElementById('timer');
const highScoreDisplay = document.getElementById('high-score');
const gameOverPanel = document.getElementById('game-over');
const finalScoreDisplay = document.getElementById('final-score');
const displayHighScore = document.getElementById('display-high-score');
const playAgainButton = document.getElementById('play-again');
const gameArea = document.querySelector('.game-area');// 初始状态：地鼠隐藏，按钮显示
mole.style.display = 'none';// 开始游戏按钮点击事件
startButton.addEventListener('click', startGame);// 地鼠点击事件
mole.addEventListener('click', whackMole);// 再玩一次按钮点击事件
playAgainButton.addEventListener('click', restartGame);// 更多游戏逻辑函数...

游戏核心函数解析

开始游戏函数（startGame）：
- 重置游戏状态（分数、时间）
- 隐藏开始按钮，显示地鼠
- 启动游戏计时器和地鼠移动计时器
移动地鼠函数（moveMole）：
- 计算游戏区域内的随机位置
- 更新地鼠的位置
打地鼠函数（whackMole）：
- 增加分数
- 更新分数显示
- 添加地鼠被击中的动画效果
- 立即将地鼠移动到新位置
更新倒计时函数（updateTimer）：
- 减少剩余时间
- 更新时间显示
- 时间结束时调用结束游戏函数
游戏结束函数（endGame）：
- 停止游戏计时器和地鼠移动计时器
- 隐藏地鼠
- 更新最终得分显示
- 发送得分到后端更新最高分
- 显示游戏结束面板
更新最高分函数（updateHighScore）：
- 使用fetch API向后端发送当前得分
- 接收并更新显示的最高分
重新开始游戏函数（restartGame）：
- 重置游戏界面
- 获取最新的最高分