<script>

//創(chuàng)建坦克

var tanke = document.createElement("div");//創(chuàng)建div

tanke.style.width="300px";//寬300px

tanke.style.height="300px";//高300px

tanke.style.background="red";//顏色紅色

tanke.style.position="relative";

//創(chuàng)建炮筒

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>