人物移动
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
#wrap {
position: absolute;
top: 400px;
left: 400px;
width: 50px;
height: 62px;
}
#wrap.up {
background-image: url('img/up.png')
}
#wrap.down {
background-image: url('img/down.png')
}
#wrap.left {
background-image: url('img/left.png')
}
#wrap.right {
background-image: url('img/right.png')
}
</style>
</head>
<body>
<div id="wrap" class="down"></div>
<script>
let oWrap = document.getElementById('wrap')// 获取元素
document.onkeydown = function (ev) { //给document绑定键盘事件，不管在什么位置都能触发这个事件
ev = ev || window.event;//做兼容。ev为事件对象
let which = ev.which //拿到键码值
// console.log(ev.keyCode)//事件对象中keycode也代表键码值
//初始的值要跟页面保持一致
let _top = oWrap.offsetTop;//初始值从页面获取,也可固定 _top = 400;
let left = oWrap.offsetLeft;
// switch (which) {
// case 37:
// oWrap.className = 'left'
// left = left - 5;
// oWrap.style.left = left + 'px'
// break;
// case 38:
// oWrap.className = 'up';
// _top = _top - 5;
// oWrap.style.top = _top + 'px'
// break;
// case 39:
// oWrap.className = 'right';
// left = left + 5;
// oWrap.style.left = left + 'px';
// break;
// case 40:
// oWrap.className = 'down'
// _top = _top + 5;
// oWrap.style.top = _top + 'px';
// break;
// }
//优化
let data = ['left', 'up', 'right', 'down']
let num = 0;
switch (which) {
case 37:
num = 0;
left -= 5;
break;
case 38:
num = 1;
_top -= 5;
break;
case 39:
num = 2;
left += 5;
break;
case 40:
num = 3;
_top += 5;
break;
}
oWrap.className = data[num];
oWrap.style.left = left + 'px'
oWrap.style.top = _top + 'px';
}
</script>
</body>
</html>
网友评论