JS 实现游戏流畅移动与按键立即响应
AWSD 按键移动
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1 {width: 400px;height: 400px;background: yellowgreen;margin: 0 auto;position: relative;}.box2 {width: 50px;height: 50px;background: aqua;position: absolute;}</style></head><body><div class="box1"><div class="box2"> </div></div></body><script>var odiv1 = document.getElementsByClassName("box1")[0];var odiv2 = document.getElementsByClassName("box2")[0];var ax = 0; // 玩家加速方向var ay = 0;var speedx = 0; // 玩家移动速度var speedy = 0;// 四个键盘按键状态，1是按下，0是抬起var keya = 0;var keyw = 0;var keys = 0;var keyd = 0;// 游戏循环var int=self.setInterval("move()",10);function move(){var T = odiv2.offsetTop //盒子距离最顶部的距离var L = odiv2.offsetLeft // 盒子距离最左边的距离if (keya == 1 && keyd == 0) {ax -= 1;} else if (keya == 0 && keyd == 1) {ax += 1;}if (keyw == 1 && keys == 0) {ay -= 1;} else if (keyw == 0 && keys == 1) {ay += 1;}if (ax < -1) {ax = -1} else if (ax > 1) {ax = 1}if (ay < -1) {ay = -1;} else if (ay > 1) {ay = 1;}if (keya == 1 || keyd == 1) {speedx += ax;}if (keyw == 1 || keys == 1) {speedy += ay;}if(keya==0&&keyd==0){speedx=0;ax=0;}if(keyw==0&&keys==0){speedy=0;ay=0;}// 速度防止过快if (speedx > 5) {speedx = 5} else if (speedx < -5) {speedx = -5}if (speedy > 5) {speedy = 5} else if (speedy < -5) {speedy = -5}// console.log(speedx);// 位置防止出界if (T + speedy < 0) {T = 0;} else if (T + speedy > 500) {T = 500;} else {T += speedy;}if (L + speedx < 0) {L = 0;} else if (L + speedx > 500) {L = 500;} else {L += speedx;}odiv2.style.left = L + "px"odiv2.style.top = T + "px"}window.onkeydown = function(e) {// 通过监听按键按下时的操作var e = e || window.event;// 取消打印// alert(e.keyCode)console.log("按键按下：" + e.keyCode)//获取当前元素到body的距离 var T = odiv2.offsetTop //盒子距离最顶部的距离var L = odiv2.offsetLeft // 盒子距离最左边的距离if (e.keyCode == 87) { //判断当前按键是不是w按键// console.log('W')// var T = T - 5// if (T < 0) {// T = 0// }// odiv2.style.top = T + "px"// ay -=1;keyw = 1;}if (e.keyCode == 83) { //判断当前按键是不是S按键// console.log('S')// var T = T + 5// if (T > odiv1.offsetWidth - odiv2.offsetWidth) {// T = odiv1.offsetWidth - odiv2.offsetWidth// }// odiv2.style.top = T + "px"// ay += 1;keys = 1;}if (e.keyCode == 65) { //判断当前按键是不是A按键// console.log('A')// var L = L - 5// if (L < 0) {// L = 0// }// odiv2.style.left = L + "px"// ax -=1;keya = 1;}if (e.keyCode == 68) { //判断当前按键是不是D按键// console.log('D')// var L = L + 5// if (L > odiv1.offsetHeight - odiv2.offsetHeight) {// L = odiv1.offsetHeight - odiv2.offsetHeight// }// odiv2.style.left = L + "px"// ax += 1;keyd = 1;}}window.onkeyup = function(e) {var e = e || window.event;if (e.keyCode == 87) { //判断当前按键是不是w按键// console.log('W')// ay = 0;keyw=0;}if (e.keyCode == 83) { //判断当前按键是不是S按键// console.log('S')// ay = 0;keys=0;}if (e.keyCode == 65) { //判断当前按键是不是A按键// console.log('A')// ax = 0;keya=0;}if (e.keyCode == 68) { //判断当前按键是不是D按键// console.log('D')// ax = 0;keyd=0;}}</script>
</html>相关文章：
JS 实现游戏流畅移动与按键立即响应
AWSD 按键移动 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.box1 {width: 400px;height: 400px;background: yellowgreen;margin: 0 auto;position: relative;}.box2 {width: 50px;height:…...
LabVIEW大数据处理
在物联网、工业4.0和科学实验中，大数据处理需求逐年上升。LabVIEW作为一款图形化编程语言，凭借其强大的数据采集和分析能力，广泛应用于实时数据处理和控制系统中。然而，在面对大数据处理时，LabVIEW也存在一些注意事项。…...
NVR录像机汇聚管理EasyNVR多品牌NVR管理工具视频汇聚技术在智慧安防监控中的应用与优势
随着信息技术的快速发展和数字化时代的到来，安防监控领域也在不断进行技术创新和突破。NVR管理平台EasyNVR作为视频汇聚技术的领先者，凭借其强大的视频处理、汇聚与融合能力，展现出了在安防监控领域巨大的应用潜力和价值。本文将详细介绍Easy…...
海思3403对RTSP进行目标检测
1.概述 主要功能是调过live555 testRTSPClient 简单封装的rtsp客户端库，拉取RTSP流，然后调过3403的VDEC模块进行解码，送个NPU进行目标检测，输出到hdmi，这样保证了开发没有sensor的时候可以识别其它摄像头的视频流&…...
Vue之插槽（slot）
插槽是vue中的一个非常强大且灵活的功能，在写组件时，可以为组件的使用者预留一些可以自定义内容的占位符。通过插槽，可以极大提高组件的客服用和灵活性。 插槽大体可以分为三类：默认插槽，具名插槽和作用域插槽。 下面…...
分布式服务高可用实现：复制
分布式服务高可用实现：复制 1. 为什么需要复制 我们可以考虑如下问题： 当数据量、读取或写入负载已经超过了当前服务器的处理能力，如何实现负载均衡？希望在单台服务器出现故障时仍能继续工作，这该如何实现ÿ…...
基于yolov8、yolov5的车型检测识别系统（含UI界面、训练好的模型、Python代码、数据集）
摘要：车型识别在交通管理、智能监控和车辆管理中起着至关重要的作用，不仅能帮助相关部门快速识别车辆类型，还为自动化交通监控提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的车型识别模型，该模型使用了…...
机器学习—决定下一步做什么
现在已经看到了很多不同的学习算法，包括线性回归、逻辑回归甚至深度学习或神经网络。 关于如何构建机器学习系统的一些建议 假设你已经实现了正则化线性回归来预测房价，所以你有通常的学习算法的成本函数平方误差加上这个正则化项，但是如果…...
Java Optional详解：避免空指针异常的优雅方式
在 Java 编程中，空指针异常（NullPointerException）一直是困扰开发者的常见问题之一。为了更安全、优雅地处理可能为空的值，Java 8 引入了 Optional 类。Optional 提供了一种函数式的方式来表示一个值可能存在或不存在，…...
SpringBoot开发——整合EasyExcel实现百万级数据导入导出功能
文章目录 一、EasyExcel 框架及特性介绍二、实现步骤1、项目创建及依赖配置（pom.xml）2、项目文件结构3、配置文件（application.yml）4、启动类 Application.java5、配置类 EasyExcelConfig.java6、服务接口定义及实现 ExcelService.java7、控制器类 ExcelController.java8、…...
AcWing 1097 池塘计数 flood fill bfs搜索
代码 #include <bits/stdc.h> using namespace std;const int N 1010, M N * N;typedef pair<int, int> PII;int n, m;char g[N][N]; bool st[N][N]; PII q[M];void bfs (int xx, int yy) {int hh 0, tt -1;q[ tt] {xx, yy};st[xx][yy] true;while (hh <…...
R门 - rust第一课陈天 -内存知识学习笔记
内存 #mermaid-svg-1NFTUW33mcI2cBGB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1NFTUW33mcI2cBGB .error-icon{fill:#552222;}#mermaid-svg-1NFTUW33mcI2cBGB .error-text{fill:#552222;stroke:#552222;}#merm…...
java itext后端生成pdf导出
public CustomApiResult<String> exportPdf(HttpServletRequest request, HttpServletResponse response) throws IOException {// 防止日志记录获取session异常request.getSession();// 设置编码格式response.setContentType("application/pdf;charsetUTF-8")…...
信号-3-信号处理
main 信号捕捉的操作 sigaction struct sigaction OS不允许信号处理方法进行嵌套：某一个信号正在被处理时，OS会自动block改信号，之后会自动恢复 同理，sigaction.sa_mask 为捕捉指定信号后临时屏蔽的表 pending什么时候清零&…...
38配置管理工具（如Ansible、Puppet、Chef）
每天五分钟学Linux | 第三十八课：配置管理工具（如Ansible、Puppet、Chef） 大家好！欢迎再次来到我们的“每天五分钟学Linux”系列教程。在前面的课程中，我们学习了如何安装和配置邮件服务器。今天，我们将探…...
网络技术-定义配置ACL规则的语法和命令
定义ACL（访问控制列表）规则时，具体命令会根据所使用的设备和操作系统而有所不同。以下是一些常见的设备和操作系统中定义ACL规则的命令示例： 一：思科（Cisco）路由器/交换机 在思科设备中&#…...
动态规划一＞子数组系列
题目： 2.解析： 代码： public int maxSubArray(int[] nums) {int n nums.length;int[] dp new int[n 1];int ret Integer.MIN_VALUE;for(int i 1; i < n; i){dp[i] Math.max(nums[i - 1], dp[i - 1] nums[i - 1]);ret Math.max(…...
一觉睡醒，全世界计算机水平下降100倍，而我却精通C语言——scanf函数
大家好啊，我是小象٩(๑ω๑)۶ 我的博客：Xiao Fei Xiangζั͡ޓއއ 很高兴见到大家，希望能够和大家一起交流学习，共同进步。* 这一节我们主要来学习scanf的基本用法，了解scanf返回值，懂得scanf占位符和…...
Altium Designer使用技巧（五）
一、敷铜(快捷键T-G-A) 1、工具栏点“设计”—>“规则”。 可以修改覆铜连线的宽度，也可以选择“直接连接”使得铜和网络节点完全相连。 这里方式有三种，可根据需要各个人习惯去设置。 2、敷铜与线全链接 （1）少量的话可右键“…...
Docker 的安装与使用
Docker 的安装 Docker 是一个开源的商业产品，有两个版本：社区版（Community Edition，缩写为 CE）和企业版（Enterprise Edition，缩写为 EE）。 Docker CE 的安装请参考官方文档…...
OpenClaw+GLM-4.7-Flash：个人网络安全监控助手
OpenClawGLM-4.7-Flash：个人网络安全监控助手 1. 为什么需要个人网络安全监控 去年我的开发机遭遇了一次恶意脚本攻击，导致本地Git仓库被篡改。事后排查发现，攻击者通过一个陈旧的SSH密钥漏洞入侵，而系统日志里其实早有异常登录…...
MAX30102传感器总是不准？Arduino避坑指南：从焊接绝缘到手指摆放的5个关键细节
MAX30102传感器精度优化全攻略：从硬件调试到算法校准的完整解决方案 MAX30102作为一款高集成度生物传感器，在心率、血氧监测领域应用广泛，但许多开发者在Arduino平台上使用时常遇到数据不稳定、测量偏差大的问题。本文将系统性地剖析影响测量…...
小白也能搞定！用Docker和Halo 2.10搭建个人博客，再也不用担心公网访问问题
零基础玩转DockerHalo 2.10：打造高颜值个人博客全攻略 在数字内容创作爆发的时代，拥有一个专属博客空间已成为个人品牌建设的标配。但传统建站方案往往面临技术门槛高、维护成本大等痛点。本文将带你用Docker容器技术和Halo 2.10开源系统，30…...
2025+数据集成新范式：webSpoon企业级部署实战指南
2025数据集成新范式：webSpoon企业级部署实战指南 【免费下载链接】pentaho-kettle webSpoon is a web-based graphical designer for Pentaho Data Integration with the same look & feel as Spoon 项目地址: https://gitcode.com/gh_mirrors/pen/pentaho-ke…...
目前专业的LED数码管屏厂商哪家好
在现代显示技术领域，LED数码管屏因其高亮度、低功耗和长寿命等特点，广泛应用于各种电子设备中。选择一家专业的LED数码管屏厂商至关重要。本文将为您推荐几家市场上表现突出的厂商，并进行详细对比。1. 杭州斡能电子有限公司公司简介ÿ…...
B站视频下载工具终极指南：3分钟快速上手，轻松保存你喜欢的每一帧画面
B站视频下载工具终极指南：3分钟快速上手，轻松保存你喜欢的每一帧画面 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱，支持视频、音乐、番剧、课程下载……持续更新 项目地址: https://gitcode.com/G…...
Python环境变量冲突避坑指南：解决Fatal Python error: init_sys_streams错误（conda+Pycharm版）
Python环境变量冲突避坑指南：解决Fatal Python error: init_sys_streams错误（condaPycharm版） 当你在PyCharm中运行一个conda虚拟环境下的Python项目时，突然弹出一条令人窒息的错误信息：Fatal Python error: init_sys_…...
Connect to Oracle Database with JDBC Driver
1. Overview The Oracle Database is one of the most popular relational databases. In this tutorial, we’ll learn how to connect to an Oracle Database using a JDBC Driver. 2. The Database To get us started, we need a database. If we don’t have access to …...
破解企业AI应用开发困境：Dify工作流架构的颠覆性价值
破解企业AI应用开发困境：Dify工作流架构的颠覆性价值 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程，自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awesome-Dify-W…...
告别DDA！用Python手撸Bresenham画线算法，从原理到实现（附完整源码）
告别DDA！用Python手撸Bresenham画线算法，从原理到实现（附完整源码） 在计算机图形学领域，直线绘制是最基础却至关重要的操作。当你需要开发一个2D图形引擎、像素画工具或是任何需要精确控制像素显示的应用程序时&#x…...