八方向运动控制优化完成
This commit is contained in:
Cx330 committed
1 parent
4faa9f6b35
commit
ad69c30df4
6 files changed
+555
-101
No files matched your search
+304
-1
@@ -1,6 +1,14 @@
|
||||
// 获取按钮和状态元素
|
||||
const forwardBtn = document.getElementById('forwardBtn');
|
||||
const backwardBtn = document.getElementById('backwardBtn');
|
||||
const leftBtn = document.getElementById('leftBtn');
|
||||
const rightBtn = document.getElementById('rightBtn');
|
||||
const rotateLeftBtn = document.getElementById('rotateLeftBtn');
|
||||
const rotateRightBtn = document.getElementById('rotateRightBtn');
|
||||
const forwardLeftBtn = document.getElementById('forwardLeftBtn');
|
||||
const forwardRightBtn = document.getElementById('forwardRightBtn');
|
||||
const backwardLeftBtn = document.getElementById('backwardLeftBtn');
|
||||
const backwardRightBtn = document.getElementById('backwardRightBtn');
|
||||
const status = document.getElementById('status');
|
||||
|
||||
// 实际控制函数
|
||||
@@ -9,7 +17,21 @@ function controlMotor(direction) {
|
||||
if (direction === 'stop') {
|
||||
status.innerHTML = `<p>正在停止...</p>`;
|
||||
} else {
|
||||
status.innerHTML = `<p>正在${direction === 'forward' ? '前进' : '后退'}...</p>`;
|
||||
let actionText = '';
|
||||
switch (direction) {
|
||||
case 'forward': actionText = '前进'; break;
|
||||
case 'backward': actionText = '后退'; break;
|
||||
case 'left': actionText = '左移'; break;
|
||||
case 'right': actionText = '右移'; break;
|
||||
case 'rotate_left': actionText = '左旋转'; break;
|
||||
case 'rotate_right': actionText = '右旋转'; break;
|
||||
case 'forward_left': actionText = '左前移动'; break;
|
||||
case 'forward_right': actionText = '右前移动'; break;
|
||||
case 'backward_left': actionText = '左后移动'; break;
|
||||
case 'backward_right': actionText = '右后移动'; break;
|
||||
default: actionText = '移动'; break;
|
||||
}
|
||||
status.innerHTML = `<p>正在${actionText}...</p>`;
|
||||
}
|
||||
|
||||
// 记录操作（如果正在录制）
|
||||
@@ -114,6 +136,287 @@ backwardBtn.addEventListener('touchcancel', (e) => {
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 左移按钮 - 支持鼠标和触摸事件
|
||||
leftBtn.addEventListener('mousedown', () => {
|
||||
// 发送左移请求
|
||||
controlMotor('left');
|
||||
});
|
||||
|
||||
leftBtn.addEventListener('mouseup', () => {
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
leftBtn.addEventListener('mouseleave', () => {
|
||||
// 鼠标离开按钮时也停止
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 左移按钮 - 触摸事件
|
||||
leftBtn.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 发送左移请求
|
||||
controlMotor('left');
|
||||
});
|
||||
|
||||
leftBtn.addEventListener('touchend', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
leftBtn.addEventListener('touchcancel', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 触摸被取消时停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 右移按钮 - 支持鼠标和触摸事件
|
||||
rightBtn.addEventListener('mousedown', () => {
|
||||
// 发送右移请求
|
||||
controlMotor('right');
|
||||
});
|
||||
|
||||
rightBtn.addEventListener('mouseup', () => {
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
rightBtn.addEventListener('mouseleave', () => {
|
||||
// 鼠标离开按钮时也停止
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 右移按钮 - 触摸事件
|
||||
rightBtn.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 发送右移请求
|
||||
controlMotor('right');
|
||||
});
|
||||
|
||||
rightBtn.addEventListener('touchend', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
rightBtn.addEventListener('touchcancel', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 触摸被取消时停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 左旋转按钮 - 支持鼠标和触摸事件
|
||||
rotateLeftBtn.addEventListener('mousedown', () => {
|
||||
// 发送左旋转请求
|
||||
controlMotor('rotate_left');
|
||||
});
|
||||
|
||||
rotateLeftBtn.addEventListener('mouseup', () => {
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
rotateLeftBtn.addEventListener('mouseleave', () => {
|
||||
// 鼠标离开按钮时也停止
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 左旋转按钮 - 触摸事件
|
||||
rotateLeftBtn.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 发送左旋转请求
|
||||
controlMotor('rotate_left');
|
||||
});
|
||||
|
||||
rotateLeftBtn.addEventListener('touchend', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
rotateLeftBtn.addEventListener('touchcancel', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 触摸被取消时停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 右旋转按钮 - 支持鼠标和触摸事件
|
||||
rotateRightBtn.addEventListener('mousedown', () => {
|
||||
// 发送右旋转请求
|
||||
controlMotor('rotate_right');
|
||||
});
|
||||
|
||||
rotateRightBtn.addEventListener('mouseup', () => {
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
rotateRightBtn.addEventListener('mouseleave', () => {
|
||||
// 鼠标离开按钮时也停止
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 右旋转按钮 - 触摸事件
|
||||
rotateRightBtn.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 发送右旋转请求
|
||||
controlMotor('rotate_right');
|
||||
});
|
||||
|
||||
rotateRightBtn.addEventListener('touchend', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 右旋转按钮 - 触摸事件
|
||||
rotateRightBtn.addEventListener('touchcancel', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 触摸被取消时停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 左前按钮 - 支持鼠标和触摸事件
|
||||
forwardLeftBtn.addEventListener('mousedown', () => {
|
||||
// 发送左前移动请求
|
||||
controlMotor('forward_left');
|
||||
});
|
||||
|
||||
forwardLeftBtn.addEventListener('mouseup', () => {
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
forwardLeftBtn.addEventListener('mouseleave', () => {
|
||||
// 鼠标离开按钮时也停止
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 左前按钮 - 触摸事件
|
||||
forwardLeftBtn.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 发送左前移动请求
|
||||
controlMotor('forward_left');
|
||||
});
|
||||
|
||||
forwardLeftBtn.addEventListener('touchend', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
forwardLeftBtn.addEventListener('touchcancel', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 触摸被取消时停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 右前按钮 - 支持鼠标和触摸事件
|
||||
forwardRightBtn.addEventListener('mousedown', () => {
|
||||
// 发送右前移动请求
|
||||
controlMotor('forward_right');
|
||||
});
|
||||
|
||||
forwardRightBtn.addEventListener('mouseup', () => {
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
forwardRightBtn.addEventListener('mouseleave', () => {
|
||||
// 鼠标离开按钮时也停止
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 右前按钮 - 触摸事件
|
||||
forwardRightBtn.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 发送右前移动请求
|
||||
controlMotor('forward_right');
|
||||
});
|
||||
|
||||
forwardRightBtn.addEventListener('touchend', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
forwardRightBtn.addEventListener('touchcancel', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 触摸被取消时停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 左后按钮 - 支持鼠标和触摸事件
|
||||
backwardLeftBtn.addEventListener('mousedown', () => {
|
||||
// 发送左后移动请求
|
||||
controlMotor('backward_left');
|
||||
});
|
||||
|
||||
backwardLeftBtn.addEventListener('mouseup', () => {
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
backwardLeftBtn.addEventListener('mouseleave', () => {
|
||||
// 鼠标离开按钮时也停止
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 左后按钮 - 触摸事件
|
||||
backwardLeftBtn.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 发送左后移动请求
|
||||
controlMotor('backward_left');
|
||||
});
|
||||
|
||||
backwardLeftBtn.addEventListener('touchend', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
backwardLeftBtn.addEventListener('touchcancel', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 触摸被取消时停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 右后按钮 - 支持鼠标和触摸事件
|
||||
backwardRightBtn.addEventListener('mousedown', () => {
|
||||
// 发送右后移动请求
|
||||
controlMotor('backward_right');
|
||||
});
|
||||
|
||||
backwardRightBtn.addEventListener('mouseup', () => {
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
backwardRightBtn.addEventListener('mouseleave', () => {
|
||||
// 鼠标离开按钮时也停止
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 右后按钮 - 触摸事件
|
||||
backwardRightBtn.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 发送右后移动请求
|
||||
controlMotor('backward_right');
|
||||
});
|
||||
|
||||
backwardRightBtn.addEventListener('touchend', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
backwardRightBtn.addEventListener('touchcancel', (e) => {
|
||||
e.preventDefault(); // 防止默认行为
|
||||
// 触摸被取消时停止电机
|
||||
stopMotor();
|
||||
});
|
||||
|
||||
// 停止电机函数
|
||||
function stopMotor() {
|
||||
// 记录操作（如果正在录制）
|
||||
|
||||
Reference in new issue
Block a user