krouzek:auticko_akcelerace

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Auto</title>
 
    <style>
#parkoviste {
 width: 500px;
 height: 500px;
 background-color: gray;
 position: absolute;
}
 
#auticko{
 transform: rotate(152deg);
 width: 100px;
 height: 50px;
 background-color: transparent;
 background-size: cover;
 background-image:url('auto.svg');
 position: relative;
 left: 250px;
 top: 250px;
 
}
</style>
</head>
 
<body>
<div id="parkoviste">
 	<div id="auticko"></div>
</div>
<button onclick="otocSe()">Otoc se</button>
 
 
<script>
/* <![CDATA[ */
/* Sem prijde javascript kod */
var autickoX = 250
var autickoY = 250
var autickoRychlost = 1
var autickoUhel = 140 //ve stupnich
var autickoStisknutoDoleva = false
var autickoStisknutoDoprava = false
var autickoStisknutoNahoru = false
var autickoStisknutoDolu = false
var autickoStisknutoBrzda = false
 
function otocSe(smer){
 if(smer){
   autickoUhel += 1
 } else {
   autickoUhel -= 1
 }
}
 
function stiskKlavesy(udalost){
 if (udalost.code == "KeyA"){
  autickoStisknutoDoleva = true
 } else if (udalost.code == "KeyD"){
  autickoStisknutoDoprava = true
 }else if (udalost.code == "KeyW"){
  autickoStisknutoNahoru = true
 }else if (udalost.code == "KeyS"){
  autickoStisknutoDolu = true
 }else if (udalost.code == "KeyX"){
  autickoStisknutoBrzda = true
 }
}
 
function odtiskKlavesy(udalost){
 if (udalost.code == "KeyA"){
  autickoStisknutoDoleva = false
 } else if (udalost.code == "KeyD"){
  autickoStisknutoDoprava = false
 }else if (udalost.code == "KeyW"){
  autickoStisknutoNahoru = false
 }else if (udalost.code == "KeyS"){
  autickoStisknutoDolu = false
 }else if (udalost.code == "KeyX"){
  autickoStisknutoBrzda = false
 }
}
document.body.addEventListener("keydown", stiskKlavesy);
document.body.addEventListener("keyup", odtiskKlavesy);
 
function pohniSe(){
 
// ovlivnovani klavesami
 if(autickoStisknutoDoleva){
   otocSe(false)
 }
 if(autickoStisknutoDoprava){
   otocSe(true)
 }
 if(autickoStisknutoNahoru){
   autickoRychlost+=0.1
 }
 if(autickoStisknutoDolu){
   autickoRychlost-=0.05
 }
 if(autickoStisknutoBrzda){
   autickoRychlost-=0.2
   if(autickoRychlost < 0){
    autickoRychlost=0
   }
 }
 
 autickoX += Math.sin(((90-autickoUhel)/180)*Math.PI) * autickoRychlost
 autickoY += Math.sin(((autickoUhel)/180)*Math.PI) * autickoRychlost
 //console.log(autickoX + "," + autickoY)
 
 
 document.getElementById('auticko').style.transform = "rotate("+autickoUhel+"deg)"
 document.getElementById('auticko').style.top = autickoY+"px"
 document.getElementById('auticko').style.left = autickoX+"px"
}
 
setInterval(pohniSe, 1000 / 60)
 
 
/* ]]> */
</script>
</body>
</html>