krouzek:auticko_objekty [Kroužek Javascriptu]

Úkoly

Omezte auto parkovištěm: vyberte si z možností:
- Náraz do stěny zastaví auto, zastavené auto lze pak otočit a rozjet zpět, případně vycouvat
- Stěnu parkoviště lze překročit, auto které vyjede doprava se pak ovšem vrátí zleva
- Po nárazu do stěny auto nějakým způsobem odskočí, případně i změní směr.

Další téma

Vytvoříme si více objektů na parkovišti - například kuželky. Použijeme objekty (třídy - class) a můžeme si jich tak vytvořit kolik budeme chtít.

Verze na začátku

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Auto</title>
 
    <style>
#parkoviste {
 width: 500px;
 height: 500px;
 background-color: gray;
 background-size: cover;
 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.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)
 
 
 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>

Verze s kuželkami

<!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: relative;
 left: 250px;
 top: 250px;
}
 
.kuzelka{
 width: 10px;
 height: 10px;
 border-radius:50%;
 background-color: orange;
 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 = 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"
 }
 
}
 
setInterval(pohniSe, 1000 / 60)
 
// pole objektu kuzelek
var kuzelky = []
for(var i=0;i<50;i++){
	var kuzelkaData = {
		x:(1200*Math.random()),
		y:(800*Math.random())
		}
	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>