<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>键盘事件和组合键</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{width:40px;
height:40px;
position:absolute;
background:url(tank.png);
background-size:100%;
/* background:orange; */
transform:rotate(0deg);
}
.pd{
width:5px;
height:15px;
border-radius:50%;
position:absolute;
background:#f06;
}
</style>
</head>
<body>
<div id="div1" style="top:350px;left:100px;position: relative;"></div>
</body>
</html>
<script>
//要求 ： 按住键盘的上下左右箭头 控制div的移动
// 按住 空格键 创建子弹 并发射子弹
//37 39 32
var div1 = document.getElementById("div1");
document.onkeydown = function(eve){ //创建一个键盘事件
var left = parseInt(div1.style.left);//获取div1距离页面左边的距离
var top = parseInt(div1.style.top);//获取div1距离页面顶部的距离
var e = eve||event;
if(e.keyCode==39){//点击方向右键向右移动，keyCode判断键盘按了哪个键
div1.style.left=left+10+"px";
}else if(e.keyCode==37){//左键向左移动
div1.style.left=left-10+"px";
}else if(e.keyCode==38){//向上移动
div1.style.top=top-10+"px";
}
else if(e.keyCode==40){//向下移动
div1.style.top=top+10+"px";
}
else if(e.keyCode == 32){
var span =document.createElement("span");//创建一个span标签作为子弹
document.body.insertBefore(span,div1);//将span标签插入body中的div前面
var j = parseInt(div1.style.left);//获取div1距离页面左边的距离
var k = parseInt(div1.style.top)-12;//获取div1距离页面顶部的距离
span.style.cssText="background:green;display:block;width:6px;height:10px;border-radius:50%;position:absolute;top:kpx;left:j+18px;z-index:1;";
span.style.left = j+18+"px";//让span在div的中间位置出现
span.style.top = k+"px";
var i = k;
setInterval(function(){ //设置定时器每隔25ms，子弹做一次移动，每次移动10px
// var a = parseInt(span.style.top);
i = i-10;
span.style.top = i+"px";
// span.style.top = i+"px";
if(i<0){
span.remove();//当子弹超出屏幕，删除这个span节点
}
},25)
}
}
</script>
