网页方向键，并使用键盘的前后左右键进行控制

最新推荐文章于 2024-05-23 20:09:14 发布

彩虹海的约定·

最新推荐文章于 2024-05-23 20:09:14 发布

阅读量325

点赞数

文章标签： html java

本文链接：https://blog.csdn.net/qq_69413049/article/details/130624415

版权

先在网页上设置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">&#x2190;</button>
            <button id="upbutton" class="up-button" style="position: absolute;top: 1px;left: 001px;">&#x2191;</button>
            <button id="downbutton" class="down-button">&#x2193;</button>
            <button id="rightbutton" class="right-button">&#x2192;</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;
    }