请求协助：通过JavaScript实现键盘箭头键Web控制机器人移动

Got it! I’ve put together a complete, drop-in solution that lets you control your robot using arrow keys exactly as you described—hold the key to move, release to stop. Since you’re not familiar with JavaScript, I’ve kept the code simple and added comments to explain what’s happening.

Here’s the full HTML file you can use:

<!DOCTYPE html>
<html>
<head>
    <title>Robot Keyboard Control</title>
    <style>
        /* Optional: Basic styling to make the page clear */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .instructions {
            font-size: 1.2em;
            margin-bottom: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="instructions">
        Use Arrow Keys to Control the Robot:<br>
        ↑ = Forward | ↓ = Backward | ← = Left | → = Right<br>
        Release any key to stop
    </div>

    <script>
        // Track which key is currently pressed to avoid duplicate requests
        let activeKey = null;

        // Send a command to the robot's control URL
        function sendCommand(url) {
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        console.error('Failed to send command:', response.statusText);
                    }
                })
                .catch(error => {
                    console.error('Network error:', error);
                });
        }

        // Handle key presses
        document.addEventListener('keydown', (event) => {
            // Don't send duplicate commands if a key is already active
            if (activeKey !== null) return;

            switch(event.key) {
                case 'ArrowUp':
                    activeKey = 'up';
                    sendCommand('https://172.0.0.1/forward');
                    break;
                case 'ArrowDown':
                    activeKey = 'down';
                    sendCommand('https://172.0.0.1/backward');
                    break;
                case 'ArrowLeft':
                    activeKey = 'left';
                    sendCommand('https://172.0.0.1/left');
                    break;
                case 'ArrowRight':
                    activeKey = 'right';
                    sendCommand('https://172.0.0.1/right');
                    break;
            }
        });

        // Handle key releases
        document.addEventListener('keyup', (event) => {
            // Send stop command only if the released key was the active one
            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key) && activeKey !== null) {
                activeKey = null;
                sendCommand('https://172.0.0.1/stop');
            }
        });
    </script>
</body>
</html>

How This Works: #

• Key Tracking: The activeKey variable ensures we don’t spam duplicate move commands while holding a key—each press triggers just one move request.
• Press & Move: When you press an arrow key, it sends the corresponding control command to your robot’s server.
• Release & Stop: The moment you let go of any arrow key, it sends the stop command to halt the robot immediately.
• Debugging: If there’s a connection issue, errors will show up in your browser’s developer console (press F12 to open it if you need to troubleshoot).

Quick Notes: #

1. Double-check that your robot’s server is running at https://172.0.0.1—if the IP or port differs, update the URLs in the code to match.
2. If you run into CORS errors (your browser blocks the request), you’ll need to enable CORS on your robot’s server. Most web frameworks have simple settings for this (like adding an Access-Control-Allow-Origin header).
3. Save this code as an HTML file, open it in your browser, and you’re ready to control the robot with arrow keys!

内容的提问来源于stack exchange，提问作者Shahriar Shafin