3 • 阳光明媚 • 2周前 • 129次点击
大家谁知道怎么弄吗?有谁能教教我,我会把代码发到评论区的。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #1a1a1a;
color: #fff;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
touch-action: manipulation; /* 优化触摸体验 */
.drone-container {
width: 100vw;
padding: 20px;
.status {
font-size: 24px;
margin-bottom: 30px;
text-align: center;
.control-hint {
font-size: 18px;
color: #ccc;
position: absolute;
bottom: 30px;
max-width: 90%;
/* 隐藏视觉元素,仅保留功能 */
.visual-drone {
display: none;
手势说明:左右滑动浏览功能 | 双击确定 | 上滑返回/取消 | 下滑起飞/降落 | 长按开启/关闭语音播报
// 核心状态变量
let isVoiceEnabled = true; // 语音播报默认开启
let droneState = "待机"; // 无人机状态:待机/飞行中
let currentFunctionIndex = 0; // 当前选中功能索引
let touchStartX = 0; // 触摸起始X坐标
let touchStartY = 0; // 触摸起始Y坐标
let touchTime = 0; // 触摸开始时间(用于判断长按)
let isLongPress = false; // 是否长按
let isDragging = false; // 是否正在滑动
// 无人机功能列表(左右滑动切换)
const droneFunctions = [
"飞行模式",
"高度调节",
"速度调节",
"摄像头开启",
"返航模式",
"电量查询"
];
// 语音合成对象
const synth = window.speechSynthesis;
// 初始化:语音播报欢迎语
window.onload = () => {
speak("虚拟无人机已启动,支持手势操作。左右滑动浏览功能,双击确定,上滑返回,下滑起飞或降落,长按开启或关闭语音播报");
// 横屏提示
if (window.innerWidth < window.innerHeight) {
speak("建议横屏使用,体验更佳");
};
// 触摸开始事件
function handleTouchStart(e) {
const touch = e.touches[0];
touchStartX = touch.clientX;
touchStartY = touch.clientY;
touchTime = new Date().getTime();
isLongPress = false;
isDragging = false;
// 长按检测(1.5秒)
setTimeout(() => {
if (!isDragging) {
isLongPress = true;
toggleVoice(); // 长按切换语音播报状态
}, 1500);
// 触摸移动事件(判断滑动方向)
function handleTouchMove(e) {
if (isLongPress) return; // 长按状态下忽略滑动
isDragging = true;
const deltaX = touch.clientX - touchStartX;
const deltaY = touch.clientY - touchStartY;
// 左右滑动(优先水平滑动)
if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
if (deltaX > 0) {
// 右滑:下一个功能
currentFunctionIndex = (currentFunctionIndex + 1) % droneFunctions.length;
updateFunctionStatus();
} else {
// 左滑:上一个功能
currentFunctionIndex = (currentFunctionIndex - 1 + droneFunctions.length) % droneFunctions.length;
// 重置起始坐标,避免连续触发
// 触摸结束事件(判断双击/上下滑动)
function handleTouchEnd(e) {
if (isLongPress) return; // 长按已处理,忽略后续
const touch = e.changedTouches[0];
const touchDuration = new Date().getTime() - touchTime;
// 双击判断(300ms内连续点击)
if (touchDuration < 300 && Math.abs(deltaX) < 50 && Math.abs(deltaY) < 50) {
const lastTapTime = window.lastTapTime || 0;
const tapInterval = new Date().getTime() - lastTapTime;
if (tapInterval < 300) {
// 双击:确定当前功能
executeFunction();
window.lastTapTime = 0;
window.lastTapTime = new Date().getTime();
return;
// 上下滑动(垂直滑动)
if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50) {
if (deltaY > 0) {
// 下滑:起飞/降落
toggleDroneState();
// 上滑:返回/取消
speak("已取消当前操作,返回待机状态");
document.getElementById("droneStatus").textContent = "已取消操作,无人机待机";
// 更新当前功能状态(语音+文字)
function updateFunctionStatus() {
const currentFunc = droneFunctions[currentFunctionIndex];
const statusText = `当前功能:${currentFunc},无人机状态:${droneState}`;
document.getElementById("droneStatus").textContent = statusText;
if (isVoiceEnabled) {
speak(currentFunc);
// 执行当前选中的功能
function executeFunction() {
let reply = "";
switch (currentFunc) {
case "飞行模式":
reply = "飞行模式已激活,支持高度和速度调节";
break;
case "高度调节":
reply = "高度调节功能已开启,当前高度10米,可通过上下滑动微调";
case "速度调节":
reply = "速度调节功能已开启,当前速度中等,左右滑动切换快慢";
case "摄像头开启":
reply = "摄像头已启动,正在实时传输画面";
case "返航模式":
reply = "返航模式已激活,无人机正在返回起飞点";
droneState = "返航中";
case "电量查询":
reply = "当前电量85%,剩余飞行时间约30分钟";
document.getElementById("droneStatus").textContent = `已执行:${currentFunc},${reply}`;
speak(reply);
// 切换无人机起飞/降落状态
function toggleDroneState() {
if (droneState === "待机" || droneState === "降落") {
droneState = "飞行中";
const reply = "无人机已起飞,当前高度5米,飞行稳定";
document.getElementById("droneStatus").textContent = reply;
if (isVoiceEnabled) speak(reply);
} else if (droneState === "飞行中" || droneState === "返航中") {
droneState = "降落";
const reply = "无人机正在降落,请远离起降点";
// 切换语音播报开启/关闭
function toggleVoice() {
isVoiceEnabled = !isVoiceEnabled;
const statusText = isVoiceEnabled ? "语音播报已开启" : "语音播报已关闭";
speak(statusText); // 最后一次播报状态
// 文字转语音核心函数
function speak(text) {
if (!isVoiceEnabled) return;
synth.cancel(); // 取消之前的播报,避免叠加
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = "zh-CN"; // 中文语音
utterance.volume = 1; // 音量(0-1)
utterance.rate = 0.9; // 语速(0.1-10,默认1)
utterance.pitch = 1; // 音调(0-2,默认1)
synth.speak(utterance);
// 监听屏幕旋转,提示横屏
window.addEventListener("orientationchange", () => {
if (window.orientation === 0 || window.orientation === 180) {
speak("当前为竖屏,建议切换为横屏以获得更好操作体验");
speak("已切换为横屏,操作更便捷");
});
我应该怎么把代码扔进去啊?
楼主你要点他的名字回复他才看得到,你在评论区发他看不到的
积分:582
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #1a1a1a;
color: #fff;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
touch-action: manipulation; /* 优化触摸体验 */
}
.drone-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.status {
font-size: 24px;
margin-bottom: 30px;
text-align: center;
}
.control-hint {
font-size: 18px;
color: #ccc;
text-align: center;
position: absolute;
bottom: 30px;
max-width: 90%;
}
/* 隐藏视觉元素,仅保留功能 */
.visual-drone {
display: none;
}
手势说明:左右滑动浏览功能 | 双击确定 | 上滑返回/取消 | 下滑起飞/降落 | 长按开启/关闭语音播报
// 核心状态变量
let isVoiceEnabled = true; // 语音播报默认开启
let droneState = "待机"; // 无人机状态:待机/飞行中
let currentFunctionIndex = 0; // 当前选中功能索引
let touchStartX = 0; // 触摸起始X坐标
let touchStartY = 0; // 触摸起始Y坐标
let touchTime = 0; // 触摸开始时间(用于判断长按)
let isLongPress = false; // 是否长按
let isDragging = false; // 是否正在滑动
// 无人机功能列表(左右滑动切换)
const droneFunctions = [
"飞行模式",
"高度调节",
"速度调节",
"摄像头开启",
"返航模式",
"电量查询"
];
// 语音合成对象
const synth = window.speechSynthesis;
// 初始化:语音播报欢迎语
window.onload = () => {
speak("虚拟无人机已启动,支持手势操作。左右滑动浏览功能,双击确定,上滑返回,下滑起飞或降落,长按开启或关闭语音播报");
// 横屏提示
if (window.innerWidth < window.innerHeight) {
speak("建议横屏使用,体验更佳");
}
};
// 触摸开始事件
function handleTouchStart(e) {
const touch = e.touches[0];
touchStartX = touch.clientX;
touchStartY = touch.clientY;
touchTime = new Date().getTime();
isLongPress = false;
isDragging = false;
// 长按检测(1.5秒)
setTimeout(() => {
if (!isDragging) {
isLongPress = true;
toggleVoice(); // 长按切换语音播报状态
}
}, 1500);
}
// 触摸移动事件(判断滑动方向)
function handleTouchMove(e) {
if (isLongPress) return; // 长按状态下忽略滑动
isDragging = true;
const touch = e.touches[0];
const deltaX = touch.clientX - touchStartX;
const deltaY = touch.clientY - touchStartY;
// 左右滑动(优先水平滑动)
if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
if (deltaX > 0) {
// 右滑:下一个功能
currentFunctionIndex = (currentFunctionIndex + 1) % droneFunctions.length;
updateFunctionStatus();
} else {
// 左滑:上一个功能
currentFunctionIndex = (currentFunctionIndex - 1 + droneFunctions.length) % droneFunctions.length;
updateFunctionStatus();
}
// 重置起始坐标,避免连续触发
touchStartX = touch.clientX;
touchStartY = touch.clientY;
}
}
// 触摸结束事件(判断双击/上下滑动)
function handleTouchEnd(e) {
if (isLongPress) return; // 长按已处理,忽略后续
const touch = e.changedTouches[0];
const deltaX = touch.clientX - touchStartX;
const deltaY = touch.clientY - touchStartY;
const touchDuration = new Date().getTime() - touchTime;
// 双击判断(300ms内连续点击)
if (touchDuration < 300 && Math.abs(deltaX) < 50 && Math.abs(deltaY) < 50) {
const lastTapTime = window.lastTapTime || 0;
const tapInterval = new Date().getTime() - lastTapTime;
if (tapInterval < 300) {
// 双击:确定当前功能
executeFunction();
window.lastTapTime = 0;
} else {
window.lastTapTime = new Date().getTime();
}
return;
}
// 上下滑动(垂直滑动)
if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50) {
if (deltaY > 0) {
// 下滑:起飞/降落
toggleDroneState();
} else {
// 上滑:返回/取消
speak("已取消当前操作,返回待机状态");
document.getElementById("droneStatus").textContent = "已取消操作,无人机待机";
}
}
}
// 更新当前功能状态(语音+文字)
function updateFunctionStatus() {
const currentFunc = droneFunctions[currentFunctionIndex];
const statusText = `当前功能:${currentFunc},无人机状态:${droneState}`;
document.getElementById("droneStatus").textContent = statusText;
if (isVoiceEnabled) {
speak(currentFunc);
}
}
// 执行当前选中的功能
function executeFunction() {
const currentFunc = droneFunctions[currentFunctionIndex];
let reply = "";
switch (currentFunc) {
case "飞行模式":
reply = "飞行模式已激活,支持高度和速度调节";
break;
case "高度调节":
reply = "高度调节功能已开启,当前高度10米,可通过上下滑动微调";
break;
case "速度调节":
reply = "速度调节功能已开启,当前速度中等,左右滑动切换快慢";
break;
case "摄像头开启":
reply = "摄像头已启动,正在实时传输画面";
break;
case "返航模式":
reply = "返航模式已激活,无人机正在返回起飞点";
droneState = "返航中";
break;
case "电量查询":
reply = "当前电量85%,剩余飞行时间约30分钟";
break;
}
document.getElementById("droneStatus").textContent = `已执行:${currentFunc},${reply}`;
if (isVoiceEnabled) {
speak(reply);
}
}
// 切换无人机起飞/降落状态
function toggleDroneState() {
if (droneState === "待机" || droneState === "降落") {
droneState = "飞行中";
const reply = "无人机已起飞,当前高度5米,飞行稳定";
document.getElementById("droneStatus").textContent = reply;
if (isVoiceEnabled) speak(reply);
} else if (droneState === "飞行中" || droneState === "返航中") {
droneState = "降落";
const reply = "无人机正在降落,请远离起降点";
document.getElementById("droneStatus").textContent = reply;
if (isVoiceEnabled) speak(reply);
}
}
// 切换语音播报开启/关闭
function toggleVoice() {
isVoiceEnabled = !isVoiceEnabled;
const statusText = isVoiceEnabled ? "语音播报已开启" : "语音播报已关闭";
document.getElementById("droneStatus").textContent = statusText;
speak(statusText); // 最后一次播报状态
}
// 文字转语音核心函数
function speak(text) {
if (!isVoiceEnabled) return;
synth.cancel(); // 取消之前的播报,避免叠加
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = "zh-CN"; // 中文语音
utterance.volume = 1; // 音量(0-1)
utterance.rate = 0.9; // 语速(0.1-10,默认1)
utterance.pitch = 1; // 音调(0-2,默认1)
synth.speak(utterance);
}
// 监听屏幕旋转,提示横屏
window.addEventListener("orientationchange", () => {
if (window.orientation === 0 || window.orientation === 180) {
speak("当前为竖屏,建议切换为横屏以获得更好操作体验");
} else {
speak("已切换为横屏,操作更便捷");
}
});