利用键盘控制小方块的移动

原理

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>
相关推荐
<p> <span style="font-size:14px;color:#E53333;">限时福利1:</span><span style="font-size:14px;">购课进答疑群专享柳峰(刘运强)老师答疑服务</span> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:14px;"></span> </p> <p> <span style="font-size:14px;color:#337FE5;"><strong>为什么需要掌握高性能MySQL实战?</strong></span> </p> <p> <span><span style="font-size:14px;"><br /> </span></span> <span style="font-size:14px;">由于互联网产品用户量大、高并发请求场景多,因此对MySQL性能、可用性、扩展性都提出了很高要求。使用MySQL解决大量数据以及高并发请求已经是程序员必备技能,也是衡量一个程序员能力和薪资标准之一。</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">为了让大家快速系统了解高性能MySQL核心知识全貌,我为你总结了</span><span style="font-size:14px;">「高性能 MySQL 知识框架图」</span><span style="font-size:14px;">,帮你梳理学习重点,建议收藏!</span> </p> <p> <br /> </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202006031401338860.png" /> </p> <p> <br /> </p> <p> <span style="font-size:14px;color:#337FE5;"><strong>【课程设计】</strong></span> </p> <p> <span style="font-size:14px;"><br /> </span> </p> <p> <span style="font-size:14px;">课程分为四大篇章,将为你建立完整 MySQL 知识体系,同时将重点讲解 MySQL 底层运行原理、数据库性能调优、高并发、海量业务处理、面试解析等。</span> </p> <p> <span style="font-size:14px;"><br /> </span> </p> <p> <span style="font-size:14px;"></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>一、性能优化篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">主要包括经典 MySQL 问题剖析、索引底层原理和事务与锁机制。通过深入理解 MySQL 索引结构 B+Tree ,学员能够从根本上弄懂为什么有些 SQL 走索引、有些不走索引,从而彻底掌握索引使用和优化技巧,能够避开很多实战中遇到“坑”。</span> </p> <p style="text-align:justify;"> <br /> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>二、MySQL 8.0新特性篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">主要包括窗口函数和通用表表达式。企业中许多报表统计需求,如果不采用窗口函数,用普通 SQL 语句是很难实现。</span> </p> <p style="text-align:justify;"> <br /> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>三、高性能架构篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">主要包括主从复制和读写分离。在企业生产环境中,很少采用单台MySQL节点情况,因为一旦单个节点发生故障,整个系统都不可用,后果往往不堪设想,因此掌握高可用架构实现是非常有必要。</span> </p> <p style="text-align:justify;"> <br /> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>四、面试篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">程序员获得工作第一步,就是高效准备面试,面试篇主要从知识点回顾总结角度出发,结合程序员面试高频MySQL问题精讲精练,帮助程序员吊打面试官,获得心仪工作机会。</span> </p>
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页