<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>Game</title>
</head>
<body onkeydown="fire(event)">
<div id="startbut" onclick="start()">
<center>старт</center>
</div>
<div id="endbut">
закончить
</div>
<div class="spacer"><!-- --></div>
<div id="area">
<img src="area.png" id="bg">
<img src="tankl.png" id="tankl" style="margin-top:322px; margin-left:134px;">
<img src="tankr.png" id="tankr" style="margin-top:391px; margin-left:792px;">
<img src="weapl.png" id="weapl" style="margin-left: 210px; margin-top: 270px;">
<img src="weapr.png" id="weapr" style="margin-left: 795px; margin-top: 335px;">
<img src="bullet.png" id="bullet" style="margin-left:210px; margin-top:270px; top:270px; left:210px;">
</div>
<script>
var weapl = document.getElementById("weapl");
var Degree = 45;
function rotate(e){
if (e.keyCode == 40){
Degree++;
weapl.style.MozTransform = "rotate("+Degree+"deg)";
}
if (e.keyCode == 39){
Degree--;
weapl.style.MozTransform = "rotate("+Degree+"deg)";
}
}
var x = 4; y = 4;
function fire(e){
var bullY = parseInt(document.getElementById("bullet").style.top);
var bullX = parseInt(document.getElementById("bullet").style.left);
if (e.keyCode == 13){
x = Math.sqrt(y) * Math.cos(Degree);
y = (Math.pow(x,2) * Math.sin(Degree));
bullY = bullY + y;
bullX = bullX + x;
if(document.getElementById("bullet").style.top > 100){
document.getElementById("bullet").style.top = bullY + "px";
document.getElementById("bullet").style.left = bullX + "px";
setTimeout(fire,50);
}
}
}
</script>
</body>
</html>