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

引言

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

预览效果图

游戏功能介绍

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

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

技术准备

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

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

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

bash 复制代码

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是我们游戏的核心，它负责处理用户请求、管理最高分等功能。

python 复制代码

from flask import Flask, render_template, jsonify, request
import json
import os

app = 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 0
    return 0

def 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定义了游戏的基本结构。

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样式。

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文件处理游戏的核心功能，如开始游戏、移动地鼠、计分等。

javascript 复制代码

// 游戏变量
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）：
- 重置游戏界面
- 获取最新的最高分

数据存储（high_score.json）

游戏使用一个简单的JSON文件来存储最高分：

json 复制代码

{"high_score": 14}

这个文件会在游戏运行时自动创建和更新。当玩家获得新的最高分后，后端会将新的分数写入这个文件。

运行游戏

要运行游戏，只需要执行以下命令：

bash 复制代码

python app.py

然后打开浏览器，访问http://127.0.0.1:5000，就可以开始玩游戏了！

游戏玩法

点击"开始游戏"按钮
游戏开始后，地鼠会在游戏区域内随机移动
尽可能多地点击地鼠来得分
游戏时间为30秒
游戏结束时，会显示你的得分和历史最高分
点击"再玩一次"可以重新开始游戏

扩展与改进

如果你想进一步改进这个游戏，可以考虑以下几个方向：

添加更多的地鼠
实现不同难度级别（调整地鼠移动速度）
添加背景音乐和音效
添加更多的视觉效果和动画
实现玩家登录系统，保存多个玩家的得分记录

总结

通过本教程，我们学习了如何使用Python的Flask框架开发一个简单有趣的打地鼠游戏。我们不仅学习了后端逻辑的实现，还学习了如何创建美观的前端界面和实现游戏的交互逻辑。

这个项目虽然简单，但是涵盖了Web开发的基本概念，如路由处理、前端布局、JavaScript交互、数据存储等。希望这个教程能够帮助你入门Web开发，激发你对编程的兴趣！

如果你有任何问题或建议，欢迎在评论区留言讨论哦！

祝大家编程愉快！🎮✨