教你用JavaScript实现键盘控制小方块移动
案例介绍
欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个键盘控制小方块移动的案例。该案例主要实现通过按下键盘的上下左右按钮来控制小方块在页面中的移动。通过实战我们会学习到position定位，键盘监听事件以及动态给dom节点添加样式等知识。
案例演示
从案例DEMO中我们通过键盘上的方向按钮可以控制小方块的移动方向。
案例设计
我们来看此案例的思维导图设计，包括案例描述，页面设计和源码学习。
其中架构设计包含了CSS，JavaScript 共三部分代码。
源码学习
进入核心代码学习，我们先来看HTML中的核心代码。页面部分主要由两个盒子组成，box为小方块移动的范围盒子，square为小方块。
<div class="container"><h1>有个小院-键盘控制小方块移动h1><div class="box"><div id="square">div>div>
div>
接着让我们来看一下style里面的代码，我们通过flex布局来完成基本页面布局，通过position定位来让小方块只能在box盒子里移动。
然后我们来编写核心的JavaScript代码，通过给document对象（Document 对象是HTML文档的根节点）添加键盘监听事件，监听用户的键盘输入，判断用户是否点击的是上下左右四个按钮，如果是指定键盘输入则会对小方块的样式（left，top值）进行改变，通过改变小方块的样式来实现对小方块位置的移动。上下左右的键盘码分别对应为38 40 37 39
<script>//设置小方块每次移动的距离
let distance = 40
//获取小方块suqare元素
const square = document.getElementById('square')
//给document对象添加键盘事件监听以及触发回调函数
document.addEventListener('keydown', movesquare)
//编写处理小方块移动的方法
function movesquare(e) {//判断键盘输入是否为 ← 键 //offsetLeft属性代表元素相对父元素的左偏移量//offsetTop属性代表元素相对父元素的上偏移量if (e.keyCode === 37) {//设置要往左边移动的偏移量let left = square.offsetLeft - distance//小方块碰壁检测 如果此时已经到边界则设置style.left为0if (left <= 0) {square.style.left = 0 + 'px'return}//设置小方块的left值为left + 'px'square.style.left = left + 'px'} //判断键盘输入是否为 ↑ 键 else if (e.keyCode === 38) {//设置要往上边移动的偏移量let top = square.offsetTop - distanceif (top <= 0) {//小方块碰壁检测 如果此时已经到边界则设置style.top为0square.style.top = 0 + 'px'return}//设置小方块的top值为top + 'px'square.style.top = top + 'px'} //判断键盘输入是否为 → 键 else if (e.keyCode === 39) {//设置要往左边移动的偏移量let left = square.offsetLeft + distanceif (left >= 420) {//小方块碰壁检测 如果此时已经到边界则设置style.left为420//420由外层盒子宽度减去小方块宽度得出square.style.left = 420 + 'px'return}//设置小方块的left值为top + 'px'square.style.left = left + 'px'} //判断键盘输入是否为 ↓ 键 else if (e.keyCode === 40) {//设置要往上边移动的偏移量let top = square.offsetTop + distanceif (top >= 420) {//小方块碰壁检测 如果此时已经到边界则设置style.top为420//420由外层盒子高度减去小方块高度得出square.style.top = 420 + 'px'return}//设置小方块的left值为top + 'px'square.style.top = top + 'px'}}</script>总结思考
学习点
position定位：用于指定一个元素在文档中的定位方式。定位方式有relative(相对定位)，absolute(绝对定位)，fixed(固定定位)，sticky (黏性定位,吸顶效果)等。其中left、top、right、bottom决定了其元素的位置。
如下：
addEventListener：可以实现添加事件功能。
如下：
getElementById：getElementById()可以根据元素的 id 属性获取一个元素节点对象
问答
1、你还知道哪些键盘的keyCode？
2、addEventListener()方法还能监听哪些事件？
3、html中的布局方式还有哪些？
关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单…
全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！