|
先在网页上设置4个方向键，前进键可以自行设置其位置
.arrow-buttons {
display: flex;
justify-content: space-between;
align-items: center;
}
.arrow-buttons button {
font-size: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #ccc;
color: #333;
border: none;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.arrow-buttons button:hover,
.arrow-buttons button:active {
background-color: #999;
color: #fff;
}
.left-button {
margin: 10px;
}
.right-button {
margin: 10px;
}
.up-button {
margin: 10px;
}
.down-button {
margin: 10px;
}
←
↑
↓
→
结束控制
将键盘的检测事件加入，将键盘前后左右按键加入参数并向后端发送实现需要的功能；（按钮点击的事件可以自行添加）
document.addEventListener("keydown", function(event) {
switch (event.key) {
case "ArrowUp":
var signal = 'w';
var q = JSON.stringify({ signal:signal});
var xhr = new XMLHttpRequest();
xhr.open('POST', '/send/info');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(q); // 发送POST请求
// 前进功能代码
break;
case "ArrowDown":
var signal = 's';
var q = JSON.stringify({ signal:signal});
var xhr = new XMLHttpRequest();
xhr.open('POST', '/send/info');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(q); // 发送POST请求
// 后退功能代码
break;
case "ArrowLeft":
var signal = 'a';
var q = JSON.stringify({ signal:signal});
var xhr = new XMLHttpRequest();
xhr.open('POST', '/send/info');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(q); // 发送POST请求
// 左转功能代码
break;
case "ArrowRight":
var signal = 'd';
var q = JSON.stringify({ signal:signal});
var xhr = new XMLHttpRequest();
xhr.open('POST', '/send/info');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(q); // 发送POST请求
// 右转功能代码
break;
}
});
$("#shutdown").click(function () {
var signal = '0';
var q = JSON.stringify({ signal:signal});
var xhr = new XMLHttpRequest();
xhr.open('POST', '/send/info');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(q); // 发送POST请求
});
后端接收代码为；
@RestController
@RequestMapping("send")
public class PythonSocketTests {
@RequestMapping("info")
public String testremoteCall(@RequestBody Map q) throws Exception {
String signal = q.get("signal");
System.out.println("a = " + signal);
return signal;
}
|