<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>17键盘控制方块运动</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background-color: #6ff;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var oBox = document.querySelector('.box');
//确定方块移动的右边界和下边界
//边界值为文档的可视宽,高减去小方块的实际宽,高
var maxLeft = document.documentElement.clientWidth - oBox.offsetWidth;
var maxTop = document.documentElement.clientHeight - oBox.offsetHeight;
//设置一个小方块移动的速度
var speed = 10;
//分别设置在X,Y方向上的初始移动速度
var speedX = 0;
var speedY = 0;
//设置定时器
setInterval(function () {
//获取方块距离父元素body左侧的,和上侧的距离
var left = oBox.offsetLeft;
var top = oBox.offsetTop;
//随着定时器和键值更新方块的坐标
left += speedX;
top += speedY;
// 边界判断
if (left < 0) {
//转向,向右,X方向速度为正值
speedX = speed;
}
if (left > maxLeft) {
//转向,向左,X方向速度为负值
speedX = -speed;
}
if (top < 0) {
//转向,向下,Y方向速度为正值
speedY = speed;
}
if (top > maxTop) {
//转向,向上,Y方向速度为负值
speedY = -speed;
}
//更新元素坐标
oBox.style.left = `${left}px`;
oBox.style.top = `${top}px`; // 0
}, 10);
//当有按键按下时触发此事件
document.onkeydown = function (e) {
//解决获取键值时浏览器不兼容问题
var ev = event || e;
var keyCode = ev.keyCode || ev.which;
switch (keyCode) {
case 37:
//当向左运动时,使X方向速度为负值,Y方向上速度为0
speedX = -Math.abs(speed);
speedY = 0;
break;
case 39:
//当向右运动时,使X方向速度为正值,Y方向上速度为0
speedX = Math.abs(speed);
speedY = 0;
break;
case 38:
//当向上运动时,使Y方向速度为负值,X方向上速度为0
speedY = -Math.abs(speed);
speedX = 0;
break;
case 40: {
//当向下运动时,使Y方向速度为正值,X方向上速度为0
speedY = Math.abs(speed);
speedX = 0;
};
break;
}
}
</script>
</html>
键盘事件
onkeydown 按键按下
onkeyup 按键抬起
onkeypress 按键按下抬起
获取键盘的键值 keyCode || which
组合键 ctrlKey、altKey、shiftKey
定时器
setInterval(function(){
count();
},1000)
每隔1000ms执行一次count函数
clearInterval() 停止setInterval方法