krouzek:auticko_objekty

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Následující verze		 Předchozí verze
krouzek:auticko_objekty [2021/04/14 15:28] – vytvořeno adminkrouzek:auticko_objekty [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
Řádek 1: Řádek 1:
 +=== Ú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ě [[https://cs.wikipedia.org/wiki/Odraz_vln%C4%9Bn%C3%AD|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 ===
 <code html> <code html>
  
Řádek 137: Řádek 147:
 </html> </html>
  
 +</code>
 +
 +=== Verze s kuželkami ===
 +<code html>
 +<!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>
 </code> </code>
  • krouzek/auticko_objekty.1618414128.txt.gz
  • Poslední úprava: 2023/11/15 20:54
  • (upraveno mimo DokuWiki)