先在网页上设置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;
}
<div class="arrow-buttons">
<button id="leftbutton" class="left-button">←</button>
<button id="upbutton" class="up-button" style="position: absolute;top: 1px;left: 001px;">↑</button>
<button id="downbutton" class="down-button">↓</button>
<button id="rightbutton" class="right-button">→</button>
</div>
<div><button id="shutdown" class="pear-btn pear-btn-danger" >结束控制</button></div>
将键盘的检测事件加入,将键盘前后左右按键加入参数并向后端发送实现需要的功能;(按钮点击的事件可以自行添加)
<script>
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请求
});
</script>
后端接收代码为;
@RestController
@RequestMapping("send")
public class PythonSocketTests {
@RequestMapping("info")
public String testremoteCall(@RequestBody Map<String, String> q) throws Exception {
String signal = q.get("signal");
System.out.println("a = " + signal);
return signal;
}