API tools faq
paste
Advertisement
DarioCas

Strassenverkehr Ampeln

DarioCas
Jun 22nd, 2019
120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.14 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <body>
  3.     <input id="fg" type="button" value="Fussgaenger" align="top" onclick="fussgaenger();" >
  4.     <input id="ns" type="button" value="Nebenstrasse" align="top" onclick="nebenstrasse();" >
  5.     <input id="au" type="button" value="Automation" align="top" onclick="startautomation();" >
  6.  
  7. <canvas id="canvas" width="600" height="400" style="border:1px solid #d3d3d3;">
  8. <script>
  9.  
  10.     // ---------Landschaft Gestaltung---------
  11. var canv=document.getElementById("canvas");
  12. var ctx = canv.getContext("2d");
  13. var active = false;
  14. var automationactive = false;
  15.  
  16.     ctx.fillStyle="green";
  17.     ctx.fillRect(0,0,canv.width,canv.height);
  18.     // Strasse
  19.     ctx.beginPath();
  20.     ctx.rect(0, 80, 600, 100);
  21.     ctx.fillStyle = "gray";
  22.     ctx.fill();
  23.  
  24.     ctx.beginPath();
  25.     ctx.rect(300, 80, 100, 520);
  26.     ctx.fillStyle = "gray";
  27.     ctx.fill();
  28.     //Strassenlinien
  29.     ctx.beginPath();
  30.     ctx.rect(400, 130, 200, 5);
  31.     ctx.fillStyle = "white";
  32.     ctx.fill();
  33.  
  34.     ctx.beginPath();
  35.     ctx.rect(400, 85, 5, 45);
  36.     ctx.fillStyle = "white";
  37.     ctx.fill();
  38.  
  39.     ctx.beginPath();
  40.     ctx.rect(295, 130, 5, 45);
  41.     ctx.fillStyle = "white";
  42.     ctx.fill();
  43.  
  44.     ctx.beginPath();
  45.     ctx.rect(195, 130, 100, 5);
  46.     ctx.fillStyle = "white";
  47.     ctx.fill();
  48.  
  49.     ctx.beginPath();
  50.     ctx.rect(0, 130, 135, 5);
  51.     ctx.fillStyle = "white";
  52.     ctx.fill();
  53.  
  54.     ctx.beginPath();
  55.     ctx.rect(350, 180, 5, 420);
  56.     ctx.fillStyle = "white";
  57.     ctx.fill();
  58.  
  59.     ctx.beginPath();
  60.     ctx.rect(350, 180, 45, 5);
  61.     ctx.fillStyle = "white";
  62.     ctx.fill();
  63.  
  64.     // Fussgängerstreifen
  65.     ctx.beginPath();
  66.     ctx.rect(140, 85, 50, 10);
  67.     ctx.fillStyle = "yellow";
  68.     ctx.fill();
  69.  
  70.     ctx.beginPath();
  71.     ctx.rect(140, 105, 50, 10);
  72.     ctx.fillStyle = "yellow";
  73.     ctx.fill();
  74.  
  75.     ctx.beginPath();
  76.     ctx.rect(140, 125, 50, 10);
  77.     ctx.fillStyle = "yellow";
  78.     ctx.fill();
  79.  
  80.     ctx.beginPath();
  81.     ctx.rect(140, 145, 50, 10);
  82.     ctx.fillStyle = "yellow";
  83.     ctx.fill();
  84.  
  85.     ctx.beginPath();
  86.     ctx.rect(140, 165, 50, 10);
  87.     ctx.fillStyle = "yellow";
  88.     ctx.fill();
  89.  
  90.     //Ampeln
  91.         //fussgänger unten
  92.     ctx.beginPath();
  93.     ctx.rect(155, 185, 20, 20);
  94.     ctx.fillStyle = "red";
  95.     ctx.fill();
  96.         //fussgänger oben
  97.     ctx.beginPath();
  98.     ctx.rect(155, 55, 20, 20);
  99.     ctx.fillStyle = "red";
  100.     ctx.fill();
  101.         //hauptstrasse unten
  102.     ctx.beginPath();
  103.     ctx.rect(260, 185, 20, 20);
  104.     ctx.fillStyle = "lawngreen";
  105.     ctx.fill();
  106.         //hauptstrasse oben
  107.     ctx.beginPath();
  108.     ctx.rect(410, 55, 20, 20);
  109.     ctx.fillStyle = "lawngreen";
  110.     ctx.fill();
  111.         //nebenstrasse
  112.     ctx.beginPath();
  113.     ctx.rect(410, 195, 20, 20);
  114.     ctx.fillStyle = "red";
  115.     ctx.fill();
  116.  
  117. function fussgaenger() {
  118.     if(active==false) {
  119.         active==true;
  120.         setTimeout(function(){
  121.             ctx.beginPath();
  122.             ctx.rect(260, 185, 20, 20);
  123.             ctx.fillStyle = "chocolate";
  124.             ctx.fill();
  125.  
  126.             ctx.beginPath();
  127.             ctx.rect(410, 55, 20, 20);
  128.             ctx.fillStyle = "chocolate";
  129.             ctx.fill();
  130.         }, 2000);
  131.  
  132.  
  133.         setTimeout(function(){
  134.             ctx.beginPath();
  135.             ctx.rect(260, 185, 20, 20);
  136.             ctx.fillStyle = "red";
  137.             ctx.fill();
  138.             ctx.beginPath();
  139.             ctx.rect(410, 55, 20, 20);
  140.             ctx.fillStyle = "red";
  141.             ctx.fill();
  142.         }, 5000);
  143.  
  144.         setTimeout(function(){
  145.             ctx.beginPath();
  146.             ctx.rect(155, 185, 20, 20);
  147.             ctx.fillStyle = "lawngreen";
  148.             ctx.fill();
  149.             ctx.beginPath();
  150.             ctx.rect(155, 55, 20, 20);
  151.             ctx.fillStyle = "lawngreen";
  152.             ctx.fill();
  153.         }, 7000);
  154.         setTimeout(function(){
  155.             ctx.beginPath();
  156.             ctx.rect(155, 185, 20, 20);
  157.             ctx.fillStyle = "red";
  158.             ctx.fill();
  159.             ctx.beginPath();
  160.             ctx.rect(155, 55, 20, 20);
  161.             ctx.fillStyle = "red";
  162.             ctx.fill();
  163.         }, 15000);
  164.         setTimeout(function(){
  165.             ctx.beginPath();
  166.             ctx.rect(260, 185, 20, 20);
  167.             ctx.fillStyle = "chocolate";
  168.             ctx.fill();
  169.  
  170.             ctx.beginPath();
  171.             ctx.rect(410, 55, 20, 20);
  172.             ctx.fillStyle = "chocolate";
  173.             ctx.fill();
  174.  
  175.         }, 18000);
  176.         setTimeout(function(){
  177.             ctx.beginPath();
  178.             ctx.rect(260, 185, 20, 20);
  179.             ctx.fillStyle = "lawngreen";
  180.             ctx.fill();
  181.  
  182.             ctx.beginPath();
  183.             ctx.rect(410, 55, 20, 20);
  184.             ctx.fillStyle = "lawngreen";
  185.             ctx.fill();
  186.             active=false;
  187.         }, 20000);
  188.     }
  189.  
  190.  
  191. }
  192. function nebenstrasse() {
  193.     if(active==false) {
  194.         active==true;
  195.         setTimeout(function(){
  196.             ctx.beginPath();
  197.             ctx.rect(260, 185, 20, 20);
  198.             ctx.fillStyle = "chocolate";
  199.             ctx.fill();
  200.  
  201.             ctx.beginPath();
  202.             ctx.rect(410, 55, 20, 20);
  203.             ctx.fillStyle = "chocolate";
  204.             ctx.fill();
  205.  
  206.         }, 2000);
  207.  
  208.  
  209.         setTimeout(function(){
  210.             ctx.beginPath();
  211.             ctx.rect(260, 185, 20, 20);
  212.             ctx.fillStyle = "red";
  213.             ctx.fill();
  214.             ctx.beginPath();
  215.             ctx.rect(410, 55, 20, 20);
  216.             ctx.fillStyle = "red";
  217.             ctx.fill();
  218.         }, 5000);
  219.         setTimeout(function(){
  220.             ctx.beginPath();
  221.             ctx.rect(410, 195, 20, 20);
  222.             ctx.fillStyle = "chocolate";
  223.             ctx.fill();
  224.         }, 7000);
  225.         setTimeout(function(){
  226.             ctx.beginPath();
  227.             ctx.rect(410, 195, 20, 20);
  228.             ctx.fillStyle = "lawngreen";
  229.             ctx.fill();
  230.         }, 9000);
  231.         setTimeout(function(){
  232.             ctx.beginPath();
  233.             ctx.rect(410, 195, 20, 20);
  234.             ctx.fillStyle = "chocolate";
  235.             ctx.fill();
  236.         }, 17000);
  237.         setTimeout(function(){
  238.             ctx.beginPath();
  239.             ctx.rect(410, 195, 20, 20);
  240.             ctx.fillStyle = "red";
  241.             ctx.fill();
  242.         }, 19000);
  243.         setTimeout(function(){
  244.             ctx.beginPath();
  245.             ctx.rect(260, 185, 20, 20);
  246.             ctx.fillStyle = "chocolate";
  247.             ctx.fill();
  248.  
  249.             ctx.beginPath();
  250.             ctx.rect(410, 55, 20, 20);
  251.             ctx.fillStyle = "chocolate";
  252.             ctx.fill();
  253.  
  254.         }, 22000);
  255.         setTimeout(function(){
  256.             ctx.beginPath();
  257.             ctx.rect(260, 185, 20, 20);
  258.             ctx.fillStyle = "lawngreen";
  259.             ctx.fill();
  260.  
  261.             ctx.beginPath();
  262.             ctx.rect(410, 55, 20, 20);
  263.             ctx.fillStyle = "lawngreen";
  264.             ctx.fill();
  265.             active=false;
  266.         }, 24000);
  267.     }
  268. }
  269. function automation() {
  270.     fussgaenger();
  271.     setTimeout(function(){
  272.         nebenstrasse();
  273.     }, 35000);
  274. }
  275. function startautomation() {
  276.     automation()
  277.     setInterval(automation, 67000);
  278. }
  279. </script>
  280.  
  281.  
  282. </body>
  283. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!