<!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8" /> <title>Auto</title> <style> html, body {padding: 0; margin:0} #parkoviste { width: 1200px; height: 800px; background-color: gray; background-size: cover; position: absolute; overflow: hidden; } #auticko{ transform: rotate(152deg); width: 100px; height: 50px; background-color: transparent; background-size: cover; background-image:url('auto.svg'); position: absolute; left: 250px; top: 250px; } .kuzelka{ width: 10px; height: 10px; border-radius:50%; background-color: orange; position: absolute; 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 autickoWidth = 100 var autickoHeight = 50 var autickoRychlost = 1 var autickoUhel = 0 //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.5 } if(autickoStisknutoDolu){ autickoRychlost-=0.05 } if(autickoStisknutoBrzda){ if(autickoRychlost > 0){ autickoRychlost-=0.5 if(autickoRychlost < 0){ autickoRychlost=0 } }else{ autickoRychlost += 0.5 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) if (autickoX > 1100){ autickoUhel = 180 - autickoUhel } if (autickoX < 0){ autickoUhel = 180 - autickoUhel } if (autickoY > 750){ autickoUhel = -autickoUhel autickoY = 750 } if (autickoY < 0){ autickoUhel = -autickoUhel autickoY = 0 } document.getElementById('auticko').style.transform = "rotate("+autickoUhel+"deg)" document.getElementById('auticko').style.top = autickoY+"px" document.getElementById('auticko').style.left = autickoX+"px" // aktualizuj kuzelky for (var i=0;i<kuzelky.length;i++){ /* kuzelky[i].x += Math.random()*10 - 5 kuzelky[i].y += Math.random()*10 - 5 kuzelky[i].element.style.left = kuzelky[i].x + "px" kuzelky[i].element.style.top = kuzelky[i].y +"px" */ if (autickoX < kuzelky[i].x && autickoX + autickoWidth > kuzelky[i].x && autickoY < kuzelky[i].y && autickoY + autickoHeight > kuzelky[i].y ){ kuzelky[i].element.style.display = 'none' //kuzelky[i].element.parentNode.remove(kuzelky[i].element) } } } setInterval(pohniSe, 1000 / 60) // pole objektu kuzelek var kuzelky = [] for(var i=0;i<50;i++){ var kuzelkaData = { x:200, y:i*20 } var kuzelka = document.createElement("div") kuzelka.className = "kuzelka" kuzelka.style.left = kuzelkaData.x + "px" kuzelka.style.top = kuzelkaData.y +"px" document.getElementById("parkoviste").appendChild(kuzelka) kuzelkaData['element'] = kuzelka kuzelky.push(kuzelkaData) } /* ]]> */ </script> </body> </html>