```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 40px;
height: 40px;
position: absolute;
background: orange;
transform: rotate(0deg);
z-index: 1;
}
.pd {
width: 5px;
height: 15px;
border-radius: 50%;
position: absolute;
background: #f06;
}
</style>
</head>
<body>
<div id="div1" style="top:350px;left:100px"></div>
</body>
</html>
<script>
//按住键盘的上下左右箭头 控制div的移动
// 按住 空格键 创建子弹 并发射子弹
var tank = document.getElementById("div1");
document.onkeydown = function (eve) {
var e = eve || event;
var code = e.keyCode || e.which || e.charCode;
var l = parseInt(tank.style.left);
var t = parseInt(tank.style.top);
if (code == 37) {
l = l < 0 ? 0 : l;//防止div跑出浏览器左边框
tank.style.left = l - 5 + "px";
}
if (code == 38) {
t = t < 0 ? 0 : t;//防止div跑出浏览器上边框
tank.style.top = t - 5 + "px";
}
if (code == 39) {
l = l > document.documentElement.clientWidth - 45 ? document.documentElement.clientWidth - 45 : l;//防止div跑出浏览器右边框
tank.style.left = l + 5 + "px";
}
if (code == 40) {
t = t > document.documentElement.clientHeight - 45 ? document.documentElement.clientHeight - 45 : t;//防止div跑出浏览器下边框
tank.style.top = t + 5 + "px";
}
if (code == 32) {
var pd = document.createElement('div');
document.documentElement.appendChild(pd);
pd.className = "pd";
pd.style.top = tank.style.top;
pd.style.left = parseInt(tank.style.left) + 17 + "px";
var timer = setInterval(function () {
pd.style.top = parseInt(pd.style.top) - 4 + "px";
if (parseInt(pd.style.top) < 0) {
//子弹跑出浏览器上边框，就删除这个pd元素节点
document.documentElement.removeChild(pd);
clearInterval(timer);
}
}, 10)
}
}
</script>
```
这是运用js实现的简易功能；并没有实现游戏效果。
