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 的安装请参考官方文档…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
【单片机期末】单片机系统设计
主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图 一、题目要求 二、绘制系统状态流图 题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。 三、利用定时器产生时…...
leetcodeSQL解题：3564. 季节性销售分析
leetcodeSQL解题：3564. 季节性销售分析 题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
免费数学几何作图web平台
光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
从实验室到产业：IndexTTS 在六大核心场景的落地实践
一、内容创作：重构数字内容生产范式 在短视频创作领域，IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色，生成的 “各位吴彦祖们大家好” 语音相似度达 97%，单条视频播放量突破百万…...