GyroBox - 陀螺仪互动方块- Makelog(造物记)

材料清单

硬件

行空板（内置陀螺仪）

电脑（运行Flask服务器）

同一局域网下的WiFi环境

软件
Mind+

Python 3.x

Flask、flask-cors、requests库

网页浏览器（Chrome/Firefox）

材料清单

行空板M10 Python编程教学/学习主控板 X1 链接
行空板M10扩展板组合（含电机IO扩展板、金手指扩展板、800mAh电池扩展板） X1 链接

步骤1

在电脑上创建文件夹（如GyroBox），放入以下文件：

fangkuai.py（服务器代码）

附件

fangkuai.zip

index.html（网页代码）

代码

<!DOCTYPE html>
<html>
<head>
    <title>GyroBox</title>
    <style>
        body { background: #222; margin: 0; height: 100vh; overflow: hidden; }
        #box {
            width: 100px; height: 100px;
            background: linear-gradient(45deg, #ff0000, #00ff00);
            border-radius: 10px;
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.1s ease;
            box-shadow: 0 0 20px #0ff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        const box = document.getElementById('box');
        let posX = 50, posY = 50, rotation = 0;
        setInterval(async () => {
            const response = await fetch('http://<电脑IP>:5000/get_data');
            const data = await response.json();
            posX += data.y * 0.5;  // 灵敏度调整
            posY += data.x * 0.5;
            rotation += data.z * 1.2;
            box.style.left = `${Math.max(5, Math.min(posX, 95))}%`;
            box.style.top = `${Math.max(5, Math.min(posY, 95))}%`;
            box.style.transform = `translate(-50%, -50%) rotate(${rotation}deg)`;
        }, 50);
    </script>
</body>
</html>

打开命令符：安装依赖库：
pip install flask flask-cors

启动服务器：

bash

python fangkuai.py

步骤2 配置行空板

给行空板连上WiFi（与电脑在同一局域网下）行空板代码：

上传代码到行空板并运行。

代码

from pinpong.board import Board
from pinpong.extension.unihiker import *
import requests
import time

Board().begin()
SERVER_URL = "http://<电脑IP>:5000/update"  # 替换为电脑IP

while True:
    try:
        x, y, z = gyroscope.get_x(), gyroscope.get_y(), gyroscope.get_z()
        requests.post(SERVER_URL, json={"x": x, "y": y, "z": z})
        print(f"Sent: X={x:.2f}, Y={y:.2f}, Z={z:.2f}")
    except Exception as e:
        print("Error:", e)
    time.sleep(0.1)

步骤3 访问网页

1.在浏览器输入：

http://<电脑IP>:50001

2.把上边压缩包中的HTML文件浏览器中打开倾斜行空板，观察方块移动和旋转！

扩展玩法建议

多人对战

扩展Flask服务器，支持多个行空板控制不同颜色的方块，碰撞计分。

体感游戏

将方块变成飞机/赛车，用陀螺仪控制躲避障碍物。

AR增强现实

结合JavaScript库（如Three.js），将方块变成3D模型。

数据可视化

用Canvas绘制陀螺仪数据的实时波形图。

物联网联动

通过MQTT协议，用陀螺仪控制智能家居设备（如灯光角度）。

y欢迎一起玩！！！！

总结

核心逻辑：行空板采集数据 → Flask转发 → 网页控制方块。

关键点：确保IP正确、防火墙放行、代码缩进无误。

创意扩展：从简单交互到复杂游戏，全凭想象力！

GyroBox - 陀螺仪互动方块 简单

材料清单

扩展玩法建议

总结

GyroBox - 陀螺仪互动方块简单