Python打发无聊时光：10.用flask创造按键控制的网页小游戏

游戏介绍:

《秦蓝大冒险》是一款简单而紧张的追逐游戏。在这个游戏中，玩家将控制一名名叫“吕千”的角色，试图在一个封闭的空间内逃避一个名为“秦蓝”的追逐者。随着时间的推移，“秦蓝”会不断追踪玩家的位置，努力捕捉到他。

游戏特色：

简单控制：通过键盘的箭头键来控制“吕千”的移动，轻松上手。
难度选择：玩家可以选择三种难度模式——“简单”，“困难”，和“期末”，每种模式下“秦蓝”的移动速度都不一样，适合不同水平的玩家。
紧张刺激：随着“秦蓝”追逐的速度越来越快，玩家需要灵活地避开追逐，体验紧张而刺激的游戏乐趣。
即时反馈：一旦“吕千”被“秦蓝”捕捉，游戏立即结束，并弹出提示“游戏结束！秦蓝抓到了吕千！”，同时游戏会自动重置，玩家可以迅速重新开始游戏。

第一步：装flask库

在终端输入:

pip install flask

第二步：完整代码

为了方便大家移植，我将HTML、CSS和JavaScript直接嵌到一个py文件中。

from flask import Flask, render_template_string

app = Flask(__name__)


@app.route('/')
def game():
    return render_template_string("""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秦蓝大冒险</title>
    <style>
        body {
            text-align: center;
            background-color: #000;
            color: #fff;
            font-family: "Courier New", Courier, monospace;
        }
        #gameContainer {
            width: 800px;
            height: 600px;
            background-color: #555; /* 纯色背景 */
            overflow: hidden;
            position: relative;
            margin: 20px auto;
        }
        .player, .chaser {
            position: absolute;
            width: 50px; /* 方块大小 */
            height: 50px; /* 方块大小 */
            text-align: center;
            line-height: 50px; /* 字体行高 */
            font-size: 14px; /* 字体大小 */
            font-weight: bold;
            color: white; /* 字体颜色 */
        }
        .player {
            background-color: #4CAF50;
        }
        .chaser {
            background-color: #F44336;
        }
        button {
            margin: 0 5px;
            padding: 5px 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>

<h1>请逃脱秦蓝的追杀</h1>
<div id="gameContainer">
    <div id="player" class="player">吕千</div>
    <div id="chaser" class="chaser">秦蓝</div>
</div>
<div>
    <button onclick="setDifficulty('easy')">简单</button>
    <button onclick="setDifficulty('hard')">困难</button>
    <button onclick="setDifficulty('hell')">期末</button>
    <button onclick="restartGame()">批假</button>
</div>

<script>
    const player = document.getElementById('player');
    const chaser = document.getElementById('chaser');
    let playerPos = { x: 375, y: 275 };
    let chaserPos = { x: 50, y: 50 };
    let chaserSpeed = 1;
    let chaseInterval;

    function move(element, position) {
        element.style.left = position.x + 'px';
        element.style.top = position.y + 'px';
    }

    function chasePlayer() {
        if (playerPos.x !== chaserPos.x) {
            chaserPos.x += playerPos.x > chaserPos.x ? chaserSpeed : -chaserSpeed;
        }
        if (playerPos.y !== chaserPos.y) {
            chaserPos.y += playerPos.y > chaserPos.y ? chaserSpeed : -chaserSpeed;
        }
        move(chaser, chaserPos);
        checkCollision(); // 检查是否碰撞
    }

    function setDifficulty(difficulty) {
        switch (difficulty) {
            case 'easy':
                chaserSpeed = 1;
                break;
            case 'hard':
                chaserSpeed = 3;
                break;
            case 'hell':
                chaserSpeed = 5;
                break;
        }
    }

    function restartGame() {
        playerPos = { x: 375, y: 275 };
        chaserPos = { x: 50, y: 50 };
        move(player, playerPos);
        move(chaser, chaserPos);
    }

    window.addEventListener('keydown', function(e) {
        const maxRight = gameContainer.clientWidth - player.clientWidth;
        const maxBottom = gameContainer.clientHeight - player.clientHeight;

        switch (e.key) {
            case 'ArrowUp': playerPos.y = Math.max(playerPos.y - 10, 0); break;
            case 'ArrowDown': playerPos.y = Math.min(playerPos.y + 10, maxBottom); break;
            case 'ArrowLeft': playerPos.x = Math.max(playerPos.x - 10, 0); break;
            case 'ArrowRight': playerPos.x = Math.min(playerPos.x + 10, maxRight); break;
        }

        move(player, playerPos);
        chasePlayer(); // 移动后立即追逐
    });

    function checkCollision() {
        if (playerPos.x < chaserPos.x + chaser.clientWidth &&
            playerPos.x + player.clientWidth > chaserPos.x &&
            playerPos.y < chaserPos.y + chaser.clientHeight &&
            playerPos.y + player.clientHeight > chaserPos.y) {
            alert('游戏结束！秦蓝挂了吕千！');
            restartGame();
        }
    }

    chaseInterval = setInterval(chasePlayer, 50);

</script>

</body>
</html>
""")


if __name__ == '__main__':
    app.run(debug=True)