<script>
//创建坦克
var tanke = document.createElement("div");//创建div
tanke.style.width="300px";//宽300px
tanke.style.height="300px";//高300px
tanke.style.background="red";//颜色红色
tanke.style.position="relative";
//创建炮筒
var pt = document.createElement("div");
pt.style.width="600px";
pt.style.height="120px";
pt.style.background="blue";
pt.style.position="absolute";
pt.style.left="300px";
pt.style.top="50%";
pt.style.transform="translateY(-50%)";
//把炮筒放入坦克中
tanke.appendChild(pt);
//把坦克放入body中
document.body.appendChild(tanke);
window.onkeydown = function(event){
console.log(event.keyCode);
switch(event.keyCode){
case 37,65:
tanke.style.left=(tanke.offsetLeft-10)+"px";
tanke.style.transform="rotate(180deg)";
break;
case 38,87:
tanke.style.top=(tanke.offsetTop-10)+"px";
tanke.style.transform="rotate(-90deg)";
break;
case 39,68:
tanke.style.left=(tanke.offsetLeft+10)+"px";
tanke.style.transform="rotate(0deg)";
break;
case 40,83:
tanke.style.top=(tanke.offsetTop+10)+"px";
tanke.style.transform="rotate(90deg)";
break;
}
}
</script>
