java移动元素_如何通过箭头键连续/平滑地移动元素?
这是许多依赖键盘中断来控制游戏角色的编码语言的标准问题,并不是特定于JavaScript . 解决这个问题的方法是将键与角色的移动分开捕获,而不是依赖键盘事件来重绘/更新游戏 . 相反,使用一个连续的游戏循环,可以并且经常不做任何事情(很多次一秒) - 直到游戏中的某些内容发生变化 . 这似乎是一件奇怪的事情,但它是许多游戏的设计和构建方式 - 即使在JavaScript中也是如此;)
/// store key codes and currently pressed ones
var keys = {};
keys.LEFT = 37;
keys.RIGHT = 39;
/// store reference to character's position and element
var character = {
x: 100,
y: 100,
element: document.getElementById("character")
};
/// key detection (better to use addEventListener, but this will do)
document.body.onkeyup =
document.body.onkeydown = function(e){
var kc = e.keyCode || e.which;
keys[kc] = e.type == 'keydown';
};
/// character movement update
var moveCharacter = function(dx, dy){
character.x += dx||0;
character.y += dy||0;
character.element.style.left = character.x + 'px';
character.element.style.top = character.y + 'px';
};
/// character control
var detectCharacterMovement = function(){
if ( keys[keys.LEFT] ) {
moveCharacter(-1);
}
if ( keys[keys.RIGHT] ) {
moveCharacter(1);
}
};
/// game loop
setInterval(function(){
detectCharacterMovement();
}, 1000/24);
一个实例(也有上下移动):
/// store key codes and currently pressed ones
var keys = {};
keys.UP = 38;
keys.LEFT = 37;
keys.RIGHT = 39;
keys.DOWN = 40;
/// store reference to character's position and element
var character = {
x: 100,
y: 100,
speedMultiplier: 2,
element: document.getElementById("character")
};
/// key detection (better to use addEventListener, but this will do)
document.body.onkeyup =
document.body.onkeydown = function(e){
/// prevent default browser handling of keypresses
if (e.preventDefault) {
e.preventDefault();
}
else {
e.returnValue = false;
}
var kc = e.keyCode || e.which;
keys[kc] = e.type == 'keydown';
};
/// character movement update
var moveCharacter = function(dx, dy){
character.x += (dx||0) * character.speedMultiplier;
character.y += (dy||0) * character.speedMultiplier;
character.element.style.left = character.x + 'px';
character.element.style.top = character.y + 'px';
};
/// character control
var detectCharacterMovement = function(){
if ( keys[keys.LEFT] ) {
moveCharacter(-1, 0);
}
if ( keys[keys.RIGHT] ) {
moveCharacter(1, 0);
}
if ( keys[keys.UP] ) {
moveCharacter(0, -1);
}
if ( keys[keys.DOWN] ) {
moveCharacter(0, 1);
}
};
/// update current position on screen
moveCharacter();
/// game loop
setInterval(function(){
detectCharacterMovement();
}, 1000/24);
#character {
position: absolute;
width: 42px;
height: 42px;
background: red;
border-radius: 50%;
}
以上只是基础知识,您可以进行一些优化 . 上面也不是控制游戏角色的全部内容,遗憾的是,浏览器中的键盘事件是不可预测的(与JavaScript没有任何关系),如果有任何问题,你会发现你开始尝试制作更复杂的控制系统,即某些键不能同时按下而不会出现问题(尤其是控制字符,如CMD或CTRL) .
有一天,如果JavaScript有一个Keyboard对象,那就像上面的 keys 对象一样 . 这意味着您可以随时测试当前按下的任何键的状态,而无需依赖事件模型 . 它可能发生在一些尚未知的未来点,但我们必须拭目以待 .
如果确实发生了,我想建议一个功能:
Keyboard.isPressed(Keyboard.ANY)
这将有助于无数的游戏介绍/菜单屏幕(为什么我必须在看到菜单之前按任意键?我们是否梦想街机?) . 更不用说上述内容将有助于所有那些仍在等待他们认为缺少密钥的人的存在 .
java移动元素_如何通过箭头键连续/平滑地移动元素?相关推荐
- java线性表删除第i个元素_第08话:线性表删除某个元素
根据之前定义的线性表ADT,现在还剩下一个操作,就是删除了.今天把这个操作弄完. 了解线性表的插入,就很容易理解线性表的删除了.删除就是插入的逆过程. 删除算法的思路: 如果删除位置不合理,抛出异常: ...
- python矩阵中找满足条件的元素_从numpy数组中取出满足条件的元素示例
例如问题:从 arr 数组中提取所有奇数元素. input:arr = np.array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) output: #> array([1, ...
- js remove 当前元素_详解js删除数组中的指定元素
本篇文章将会给大家介绍两种删除数组中的指定元素的方式,分别为: 1.单独定义一个的函数,通过函数来删除指定数组元素. 2.为Array对象定义了一个removeByValue的方法,在调用方法来删除指 ...
- java输出set中的元素_老师,为什么遍历Set集合里的元素,一直都是有序的输出呢?...
源自:4-11 学生选课---通过 Set 集合管理课程 老师,为什么遍历Set集合里的元素,一直都是有序的输出呢? package com.imooc.collection; import java ...
- java map合并_详解Java8合并两个Map中元素的正确姿势
1. 介绍 本入门教程将介绍Java8中如何合并两个map. 更具体说来,我们将研究不同的合并方案,包括Map含有重复元素的情况. 2. 初始化 我们定义两个map实例 private static ...
- Java查询对象中匹配元素_用LinkedList如何实现搜索指定对象的元素
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 import static java.lang.System.out; import java.util.*; public class TestLink ...
- java list去除最后一个元素_如何快速删除list中的最后一个元素?
(前言: 在项目中,在统计在线用户量及其行为方式的时候,想在项目如"/bob/recode/online",结果发现:把写日志的东西放到了ebin文件下,即:/bob/ebin/r ...
- python三个箭头怎么打出来_如何用箭头键在Python 3中移动海龟
我有解决办法给你.代码并不理想,但它可以工作,您可以对其进行处理.你必须意识到,乌龟的位置不好,你必须调整它.这就是为什么我在设置方法我的乌龟抬头. 现在,您必须记住,right(deg)和left( ...
- js删除两个集合中共同元素_多个集合中的共同和独特元素
js删除两个集合中共同元素 本周,我们将暂时中断较高级别的问题和技术文章,以解决我们中许多人可能面临的一些代码问题. 没什么花哨的或太辛苦的,但是有一天它可能会节省您15分钟的时间,偶尔回到基础上也很 ...
最新文章
- 实时的激光雷达点云压缩
- wireshark从入门到精通(协议排错安全篇)7
- 二分查找算法实例注释
- python打包exe报错_python 程序打包为 windows 可执行程序 exe
- 11)PHP,单选框和复选框的post提交方式处理
- 基于Bresenham和DDA算法画线段
- mybatis insert插入成功返回0_mybatis添加客户
- Java基础入门笔记-对象与引用
- php向后兼容,PHP: 不向后兼容的变更 - Manual
- Intel CMT CAT CDP 技术应用
- Excel将数据内容导出为数据库DBF文件的操作
- linux 流场分析软件,scSTREAM | 通用流体分析软件
- 绿云酒店管理系统 服务器要求,绿云宾馆管理软件系统基础-20210728170313.docx-原创力文档...
- 大一期末计算机应用基础考什么,计算机应用基础期末考试试题
- sql中取字符串长度的函数
- 3.4 SQL--多表查询分组排序
- 编程-----相反数求解算法
- python爬虫学习-scrapy爬取链家房源信息并存储
- edvac是商用计算机吗,计算机基础知识78228
- JAVA中pin什么意思_pin是什么意思用法