javascript利用键盘控制小方块的移动
本文实例为大家分享了利用键盘控制小方块的移动，供大家参考，具体内容如下
原理
1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动
2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40；
window.onload = function(){
var box = document.getElementById("box");
document.onkeydown = function(event){
event = event || window.event;
console.log(event.keyCode);
}
};
3.方块的移动实际上就是坐标的改变，因此需要offsetLeft 和offsetTop 来获得当前方块的坐标，然后将坐标进行一定的更改，就可以实现移动的效果了，下面给出代码
window.onload = function() {
document.onkeydown = function(event) {
event = event || window.event;
//设置移动速度
var speed = 10;
//当ctrl和方向按键同时按下时，提升移动速度
if(event.ctrlKey) {
speed = 50;
}
//获取div
var box01 = document.getElementById("box01");
switch(event.keyCode) {
/*keyCode返回按下按键的编码
* 37 向左
* 38向上
* 39向右
* 40向下
*/
case 37:
box01.style.left = box01.offsetLeft - speed + "px";
break;
case 39:
box01.style.left = box01.offsetLeft + speed + "px";
break;
case 38:
box01.style.top = box01.offsetTop - speed + "px";
break;
case 40:
box01.style.top = box01.offsetTop + speed + "px";
break;
}
};
};
这样就可以简单实现方块的移动，但是此时我们会发现一个问题，当我们进行移动的时候，按住按键不松手，理论上方块应该直接平滑的进行移动，但实际上并非如此，第一下它会有一个小的停顿，这实际上是浏览器防止误触所设置的，因此我们需要对此进行优化
解决方案
- 这里我采用了定时器的做法来解决这个问题，因为控制移动的因素有两个，一个是控制方向，一个是控制速度，控制方向没有问题，因此我们需要改变速度
- setInterval（function(){},time）;这是一个定时器，我们只需要在time时间内调用一次函数，就可以解决停顿的问题了
下面附上修改后的完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box01 {
width: 100px;
height: 100px;
background-color: #008000;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取div
var box01 = document.getElementById("box01");
//设置移动速度
var speed = 10;
//设置移动的方向
var dir = 0;
setInterval(function() {
switch(dir) {
/*keyCode返回按下按键的编码
* 37 向左
* 38向上
* 39向右
* 40向下
*/
case 37:
box01.style.left = box01.offsetLeft - speed + "px";
break;
case 39:
box01.style.left = box01.offsetLeft + speed + "px";
break;
case 38:
box01.style.top = box01.offsetTop - speed + "px";
break;
case 40:
box01.style.top = box01.offsetTop + speed + "px";
break;
}
}, 50)
document.onkeydown = function(event) {
event = event || window.event;
//当ctrl和方向按键同时按下时，提升移动速度
if(event.ctrlKey) {
speed = 50;
} else {
speed = 10;
}
//使dir等于keycode的值
dir = event.keyCode;
//当鼠标松开时，停止移动 ---如果不写这一个会造成无法停止移动的效果
document.onkeyup = function() {
dir = 0;
};
};
};
</script>
</head>
<body>
<div id="box01"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现键盘操作实现div的移动或改变的原理及代码
昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,而且之前曾经在写贪吃蛇时也用到过.结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,另一方面也对自己的提醒,刚刚实现过的功能转头又是陌生人了,总的来说,算是温故而知新吧. 这样我们先来分析,要实现键盘操作实现div的移动大概的原理吧: *---要实现div的移动,首先最关键的一点:获取div对象 *---postion:absolute将div完全从文档流中拖出啊,这个地方漏掉了,回去看了贪吃蛇
-
键盘上下键移动选择table表格行的js代码
//这是要操作的表格: 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'show'; var selectedColor = "#FF0000" function document.onkeydown() { //事件的标识代码 if (event.keyCode == 38) { for(var k=0;k [Ctrl+A 全选 注:如需引入外部Js需刷新才能执
-
js实现上下左右键盘控制div移动
本文实例为大家分享了js上下左右键盘控制div移动的具体代码,供大家参考,具体内容如下 描述: div通过键盘事件上下左右实现div块的移动 效果: 实现: js: var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(); img.arr=arr; img.list=[]; img.num=0; // 如果DOM对象下的事件侦听没有被删
-
JavaScript利用键盘码控制div移动
前言 在生活中肯定有玩过贪吃蛇的游戏,那么要怎么样用键盘码来实现div的移动呢?下面就分享一个Demo. 利用键盘码来控制div移动源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 100px; width: 10
-
js实现键盘控制DIV移动的方法
本文实例讲述了js实现键盘控制DIV移动的方法.分享给大家供大家参考.具体分析如下: css样式部分: 复制代码 代码如下: <style type="text/css"> html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier
-
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,
-
javascript下用键盘控制层的移动的代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>键盘控制层的移动</title> <style type="text/css"> <!-- #Div { position:absolute; width:238px; height:13
-
angularjs利用directive实现移动端自定义软键盘的示例
最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如
-
原生js实现键盘控制div移动且解决停顿问题
首先说明下为什么会停顿? 效果 :用键盘控制一个div移动 当按下一个方向键不放,div会先停顿一下,然后才开始持续移动. 原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间 注:了解原因才能解决问题 效果展示 1.简单控制,但是有停顿 2.简单控制,解决停顿 解决方法 方法 :先开一个定时器,让div一直处于(往4个方向)准备移动的状态 初始4个方向的值都是false,div就保持在原地不动. 按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动. 松开方
-
javascript利用键盘控制小方块的移动
本文实例为大家分享了利用键盘控制小方块的移动,供大家参考,具体内容如下 原理 1. 利用键盘控制移动,则需要了解onkeydown函数,表示某个按键被按下,可以以此绑定一个事件响应函数,当键盘被按下时候,触发此事件,进行移动 2. keyCode 对于keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码.对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码.虚拟键盘码可能和使用的键盘的布局相关. 因此我们可以根据keycode返回的字符码来判断用户所
-
键盘元素的控制小方块的移动效果
键盘元素的控制 ns4 = (document.layers)?true:false; ie4 = (document.all)?true:false; function init(){ if(ns4){block = document.blockDiv;} if(ie4){block = blockDiv.style;} block.xpos = parseInt(block.left); block.active = false; document.onkeydown = keyDown;
-
javascript的键盘控制事件说明
控制回车焦点问题: 复制代码 代码如下: <script type="text/javascript"> function submitForm() { if(window.event.keyCode==13) { document.getElementById('btnSearch').focus(); } } document.onkeydown=submitForm; </script> 首先需要了解的是如何初始化该事件,基本语句如下: document.
-
javascript 随意拖动的小方块特效
function divBlock_event_mousedown(e){ var e, obj, temp; obj=document.getElementById("divBlock"); e=window.event?window.event:e; obj.startX=e.clientX-obj.offsetLeft; obj.startY=e.clientY-obj.offsetTop; document.onmousemove=document_event_mousemov
-
JavaScript实现的使用键盘控制人物走动实例
其实这个示例用到了js的两个核心时间,键盘事件onkeydown,周期执行事件setInterval. 实现效果 当按下键盘某个键时网页中的人物实现相应的动作,达到利用键盘控制走动效果 实现步骤 一.预订键值作用: w:向上 s:向下 a:向左 d:向右 空格:停止 二.预订键值后,要能捕获按键事件以及判断用户按的是哪个键? 捕获键盘事件可以用onkeydown 获取键值码可以用event.keyCode 三.用setInterval周期执行事件替换图片 替换图片是为了实现任务走动效果 但要
-
微信小程序利用button控制条件标签的变量问题
问题描述 在小程序中如何利用button按钮来实现控制条件标签的变量呢?这也许是许多小伙伴们的问题,今天就来简单的给大家演示一遍. 解决方案 第一步: 首先打开微信公众平台,将一个 primary 的 button 按钮代码复制到开发平台上,再为其绑定一个名为 " bindfirst " 的事件.(当然这个 bindfirst 的事件需要在 js 中去定义,下面的步骤将会去定义) 代码如下: <view> <button type="primary"
-
C语言键盘控制走迷宫小游戏
本文实例为大家分享了C语言键盘控制走迷宫小游戏的具体代码,供大家参考,具体内容如下 在看了<啊哈C语言>之后想写一个游戏demo 游戏的截图 首先是启动界面 然后是初始化 接下来是键盘操控 地图的复杂度也很容易修改. 也支持退出.按s键选择退出游戏这个选项即可. 下面是源代码 #include <stdio.h> #include <stdlib.h> void startUp(); void gameInstructions(); void menu(char c);
-
JavaScript如何利用Promise控制并发请求个数
一.场景 假设现在有这么一种场景:现有 30 个异步请求需要发送,但由于某些原因,我们必须将同一时刻并发请求数量控制在 5 个以内,同时还要尽可能快速的拿到响应结果. 如图所示: 上图这样的排队和并发请求的场景基本类似,窗口只有三个,人超过三个之后,后面的人只能排队了. 二.串行和并行 串行:一个异步请求完了之后在进行下一个请求 并行:多个异步请求同时进行 串行举例: var p = function () { return new Promise(function (resolve, reje