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

使用Python和p5.js创建的迷你游戏示例，该游戏包含多个屏幕和动画，满足在画布上显示图像、使用键盘命令移动图像

article 2025/3/11 10:29:14

下面是一个使用Python和p5.js创建的迷你游戏示例，该游戏包含多个屏幕和动画，满足在画布上显示图像、使用键盘命令移动图像、添加文本并更改其样式、利用p5.millis()函数使文本闪烁，以及根据时间操控图像和文本运动的要求。代码中还添加了一个简单的额外动画元素（背景颜色渐变）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Mini - Game</title>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css">
</head>

<py-env>
    - p5
</py-env>

<body>
    <py-script>
        from p5 import *
        import random

        # 全局变量
        image_x = width / 2
        image_y = height / 2
        image_speed = 5
        text_x = width / 2
        text_y = height / 4
        text_size_val = 32
        text_color = Color(255, 255, 255)
        text_visible = True
        last_blink_time = 0
        blink_interval = 1000  # 文本闪烁间隔时间（毫秒）
        background_color = Color(0, 0, 0)
        color_direction = 1  # 背景颜色渐变方向

        def setup():
            size(800, 600)
            global my_image
            my_image = load_image('your_image.jpg')  # 替换为你的图像文件名

        def draw():
            global image_x, image_y, text_x, text_y, text_size_val, text_color, text_visible, last_blink_time, \
                background_color, color_direction

            # 背景颜色渐变动画
            if background_color.r < 255 and color_direction == 1:
                background_color.r += 1
            elif background_color.r >= 255:
                color_direction = -1
            elif background_color.r > 0 and color_direction == -1:
                background_color.r -= 1
            background(background_color)

            # 绘制图像
            image(my_image, image_x, image_y)

            # 处理文本闪烁
            current_time = millis()
            if current_time - last_blink_time > blink_interval:
                text_visible = not text_visible
                last_blink_time = current_time

            # 绘制文本
            if text_visible:
                fill(text_color)
                text_size(text_size_val)
                text('Move the Image!', text_x, text_y)

            # 根据时间操控文本运动
            text_y = (text_y + 1) % height

        def key_pressed():
            global image_x, image_y
            if key == 'w':
                image_y -= image_speed
            elif key =='s':
                image_y += image_speed
            elif key == 'a':
                image_x -= image_speed
            elif key == 'd':
                image_x += image_speed

            # 限制图像在画布内
            image_x = constrain(image_x, 0, width - my_image.width)
            image_y = constrain(image_y, 0, height - my_image.height)


        run()
    </py-script>
</body>

</html>

代码说明：

HTML部分：
- 引入pyscript.js和pyscript.css，设置页面的基本结构。
- 使用<py-env>标签声明项目依赖的Python库，这里是p5库。
Python部分：
- 全局变量：定义了图像的位置、速度，文本的位置、大小、颜色、可见性，以及时间相关的变量，还有背景颜色渐变相关的变量。
- setup函数：初始化画布大小，并加载图像。注意要将'your_image.jpg'替换为你实际的图像文件名。
- draw函数：
  - 实现背景颜色渐变动画，通过改变background_color的红色分量来实现。
  - 绘制图像和文本，根据时间控制文本的闪烁和运动。
- key_pressed函数：根据键盘输入移动图像，并确保图像不会超出画布范围。