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 的安装请参考官方文档…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
优选算法第十二讲：队列 + 宽搜 优先级队列
优选算法第十二讲：队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
腾讯云V3签名
想要接入腾讯云的Api，必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口，但总是卡在签名这一步，最后放弃选择SDK，这次终于自己代码实现。 可能腾讯云翻新了接口文档，现在阅读起来，清晰了很多&…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时，性能会显著下降。以下是优化思路和简易实现方法： 一、核心优化思路 减少 JOIN 数量 数据冗余：添加必要的冗余字段（如订单表直接存储用户名）合并表：将频繁关联的小表合并成…...
MyBatis中关于缓存的理解
MyBatis缓存 MyBatis系统当中默认定义两级缓存：一级缓存、二级缓存 默认情况下，只有一级缓存开启（sqlSession级别的缓存）二级缓存需要手动开启配置，需要局域namespace级别的缓存 一级缓存（本地缓存&#…...