js-键盘事件案例-小人快跑
js-键盘事件案例-小人快跑
案例思路：
利用键盘的keycode判断按了上下左右什么键，然后利用键盘事件onkeydown对小人的定位进行改变即可
css部分：
由于操纵的是小人的位置，所以我们要先给小人添加一个定位
<style>
#imgs {
position: absolute;
left: 500px;
top: 200px;
}
</style>
html部分：
<body>
<img src="../images/down-0.png" alt="" id="imgs">
<script src="script.js"></script>
</body>
这个案例最关键的地方就是js部分，有很多细节：
1.先赋予小人能上下左右移动的功能：
var imgs = document.querySelector('#imgs')
document.onkeydown = function(e) {
var e = window.event || e;
switch (e.keyCode) {
case 37:
imgs.style.left = imgs.offsetLeft - 10 + 'px';
break;
case 38:
imgs.style.top = imgs.offsetTop - 10 + 'px';
break;
case 39:
imgs.style.left = imgs.offsetLeft + 10 + 'px';
break;
case 40:
imgs.style.top = imgs.offsetTop + 10 + 'px';
break;
}
}
2.在移动的过程中根据图片的名称编号对img的src进行改变，从而使小人打到跑步的效果
从资源中可以看出 down-0.png为初始状态 down-1.2.3.4分别为向下移动的四个状态，在向下移动的时候循环这四个状态即可（利用新变量index）：
case 40:
imgs.style.top = imgs.offsetLeft + 10 + 'px';
index++;
if (index > 4) {
index = 0;
}
imgs.src = "../images/down-" + index + ".png"
break;
因为上下左右都需要这段代码，我们可以进行封装，以便更好地进行引用，节约资源。
var imgs = document.querySelector('#imgs');
var index = -1;
function yidong(value) {
index++;
if (index > 4) {
index = 0;
}
imgs.src = "../images/" + value + "-" + index + ".png"
}
document.onkeydown = function(e) {
var e = window.event || e;
switch (e.keyCode) {
case 37:
imgs.style.left = imgs.offsetLeft - 10 + 'px';
yidong('left');
break;
case 38:
imgs.style.top = imgs.offsetTop - 10 + 'px';
yidong('up');
break;
case 39:
imgs.style.left = imgs.offsetLeft + 10 + 'px';
yidong('right');
break;
case 40:
imgs.style.top = imgs.offsetTop + 10 + 'px';
yidong('down');
break;
}
}
练习的时候发现或出现的问题：
1.定义onkeydown事件需要绑定在document上不能绑定在img上：
因为img在一直移动，无法准确获取其节点
2.document.onkeydown = function(e) {
var e = window.event || e;
这部分的var e = window.event || e；是什么意思呢？
其实是为了解决浏览器的兼容性问题
其实，如果把他写全的话，就更好理解了。
function(event){
var e=event?event||window.event;
}
3.imgs.style.left = imgs.offsetLeft + 10 + ‘px’
刚开始这部分代码我写成了imgs.style.left = imgs.offsetLeft +’10‘ + ‘px’
导致出错，一定要注意传的是10这个数值 而不是一个字符串
4.跟上一点有关在yidong(‘down’)进行传参时，down一定要加引号，因为传值与图片名称有关是一个字符串，所以必须有引号
5.利用switch循环时：
在每个case：后面一定要在break；
否则会引起混乱。
--------------------------------------------------------------------------------------------------
这个案例就总结到这啦