JavaScript利用键盘码控制div移动
更新时间：2020年03月19日 13:59:05 作者：裕博
这篇文章主要为大家详细介绍了JavaScript利用键盘码控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言
在生活中肯定有玩过贪吃蛇的游戏，那么要怎么样用键盘码来实现div的移动呢？下面就分享一个Demo。
利用键盘码来控制div移动源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<!--keyCode 键盘码 在键盘事件发生的时候 记录对应按的哪个键-->
<div id="box"></div>
<!--让键盘控制div的移动-->
<script type="text/javascript">
var oBox = document.getElementById("box")
var x = 0
var y = 0
document.onkeyup = function(ev) {
var ev = ev || event
// 指定方向键 ，w(上-->87),a(左-->83),s(下-->65),d(右-->67)
// 通过keyCode来识别当前按的是哪个键
// x += 10
// oBox.style.left = x +"px"
// 根据键盘码来确定往哪个方向移动
switch(ev.keyCode) {
case 87:
// 往上移动
y -= 20
break
case 83:
// 往下移动
y += 20
break
case 65:
//
x -= 20
break
case 68:
x += 20
break
default:
break
}
oBox.style.left = x + "px"
oBox.style.top = y + "px"
}
</script>
</body>
</html>
上面就是Demo的所有源码，我们可以通过键盘码来控制div来移动，里面具体的参数可以自己修改。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
TypeScript与JavaScript多方面阐述对比相同点和区别
TypeScript和JavaScript在开发交互式网页方面有许多相似之处,在提供TypeScript与 JavaScript的直接比较时,我们可以说JavaScript是一种轻量级的解释型动态语言,用于增强HTML网页,TypeScript是JavaScript的增强版,这意味着TypeScript是JavaScript和其他一些特性的组合2024-07-07
本文主要介绍了原生JS实现简单屏幕截图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
JavaScript中的this/call/apply/bind的使用及区别
这篇文章主要介绍了JavaScript中的this/call/apply/bind的使用及区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家介绍了JavaScript设计模式中的中介者模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了js+canvas实现可自动吸附闭合的鼠标绘制多边形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了微信小程序实现星星评分效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了在JavaScript中判断整型的N种方法,需要的朋友可以参考下2014-06-06
数组如何求最大值,想必很多的朋友都不会吧,下面这篇文章主要给大家介绍了关于js求数组最大值的常用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
使用uni 开发一段时间了,下面这篇文章主要给大家介绍了关于uniapp和uniCloud开发中常出现的问题及解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-12-12
最新评论