// Pakettikytkentä // 20.3.2015 added random send delay to C count = []; solmutX = [30, 30, 30, 160, 310, 425, 425, 425]; solmutY = [50, 135, 230, 135, 135, 50, 230, 135]; jonossa = []; poisJonosta = []; lahettajat = []; nopeus = 2000; clickedA = false; clickedB = false; clickedC = false; stardedA = false; stardedB = false; stardedC = false; $(document).ready(function () { count.push(0); count.push(0); count.push(0); var myVar1; var myVar2; var myVar3; setInterval(function () { // liikutetaan ensin sitä luokkaa jonka paketti on jonon ensimmäisenä ekaLuokka = $('#' + jonossa[0]).attr('class'); liikuta(ekaLuokka); for (var i = 0; i < lahettajat.length; i++) { if (lahettajat[i] != ekaLuokka) { liikuta(lahettajat[i]); } } }, nopeus); $('#start1').click(function () { if (!stardedA) { myVar1 = makePackets('a', 0, nopeus); stardedA = true; } if (!clickedA) { lahettajat.push('a'); clickedA = true; } }); $('#start2').click(function () { if (!stardedB) { myVar2 = makePackets('b', 1, nopeus); } stardedB = true; if (!clickedB) { lahettajat.push('b'); clickedB = true; } }); $('#start3').click(function () { if (!stardedC) { myVar3 = makePackets('c', 2, 5 * (Math.random() + 1) * nopeus); stardedC = true; } if (!clickedC) { lahettajat.push('c'); clickedC = true; } }); $('#stop').click(function () { clearInterval(myVar1); clearInterval(myVar2); clearInterval(myVar3); stardedA = false; stardedB = false; stardedC = false; }); $('#stop1').click(function () { clearInterval(myVar1); stardedA = false; }); $('#stop2').click(function () { clearInterval(myVar2); stardedB = false; }); $('#stop3').click(function () { clearInterval(myVar3); stardedC = false; }); }); function makePackets(luokka, ind, aika) { return setInterval(function () { createDiv(luokka, luokka, ind); }, aika); } function liikuta(luokka) { var vasen = 30; var alas = 0; $('.' + luokka).each(function () { nytnopeus = nopeus; var position = $(this).position(); switch (luokka) { case 'c': if (position.left > solmutX[6] - 30) { $(this).fadeToggle(300, function () { $(this).remove(); }); } else if (position.left >= 145 && position.left < 155 && poisJonosta.indexOf(this.id) == -1) { // jos koordinaatin mukaan jonotuspaikassa if (jonossa.indexOf(this.id) > -1) { if (position.top > 155) { alas = -20; vasen = 0; nytnopeus = nopeus; } else { vasen = 30; alas = 0; poisJonosta.push(this.id); jonossa.shift(); } } else { jonossa.push(this.id); paikka = jonossa.indexOf(this.id); vasen = 0; alas = 20 * paikka; } } else { alas = 0; vasen = 30; } break; default: if (position.left >= solmutX[4] - 30) { vasen = 30; alas = 20; if (luokka == 'a') { alas *= -1; } if (position.left > solmutX[6] - 30) { $(this).fadeToggle(300, function () { $(this).remove(); }); } } else if (position.left < solmutX[3] - 30) { vasen = 30; alas = -20; if (luokka == 'a') { alas *= -1; } } else if (position.left >= 145 && position.left < 155 && poisJonosta.indexOf(this.id) == -1) { if (jonossa.indexOf(this.id) > -1) { if (position.top > 155) { alas = -20; vasen = 0; nytnopeus = nopeus; } else { vasen = 30; alas = 0; poisJonosta.push(this.id); jonossa.shift(); } } else { jonossa.push(this.id); paikka = jonossa.indexOf(this.id); vasen = 0; alas = 20 * paikka; } } else { alas = 0; vasen = 30; } break; } $(this).animate({ left: "+=" + vasen, top: "+=" + alas }, nopeus, 'linear'); }); } function createDiv(text, luokka, ind) { d = document.createElement('div'); count[ind]++; $(d).addClass(luokka) .html(text + count[ind]) .attr('id', text + count[ind]) .appendTo($("body")); }
<button type="button" id="stop">Stop all</button> <button type="button" id="start1">Start a</button> <button type="button" id="start2">Start b</button> <button type="button" id="start3">Start c</button> <button type="button" id="stop1">Stop a</button> <button type="button" id="stop2">Stop b</button> <button type="button" id="stop3">Stop c</button> <canvas id="myCanvasa" width="500" height="500">Your browser does not support the HTML5 canvas tag.</canvas> <canvas id="myCanvasb" width="500" height="500"></canvas> <canvas id="myCanvasc" width="500" height="500"></canvas> <div class="circle" id='aa'>A</div> <div class="circle" id='bb'>C</div> <div class="circle" id='cc'>B</div> <div class="circle" id='dd'>D</div> <div class="circle" id='ee'>E</div> <div class="circle" id='ff'>F</div> <div class="circle" id='gg'>G</div> <div class="circle" id='hh'>H</div>
div { background-color: #9999CC; border: 1px solid black; border-radius: 5px; text-align: center; font-size: 1em; position:absolute; top:70px; left:30px; width: 30px; } .b { top:230px; background-color: #F2FFCC; } .c { top:150px; background-color: #FF6666; } .circle { width: 50px; height: 50px; border-radius: 50%; background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, red); background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); } #aa, #bb, #cc, #ff { left:15px; top:60px; } #bb, #dd, #ee, #gg { top:145px; } #cc, #hh { top:230px; } #dd { left:145px; } #ee { left:295px; } #gg, #ff, #hh { left:410px; } canvas { border:1px solid #d3d3d3; position:absolute; left:0px; top:40px; }