FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Jan Lorenc
Člen
Avatar
Jan Lorenc:18.4.2018 20:33

Zdravím vespolek, mám problém v logice, který nejsem schopen vyřešit, proto se na vás obracím.
Vytvářím hru, ve které se budou generovat šípy, které následně budou zachytávat štíty. Dole v kódu je pouze ta část, která má každou vteřinu, vytvářet nový šíp, který pak letí dolů. Co potřebuji? Každý šíp jako samostatnou jednotku, která má svůj interval a kterou mohu smazat, jestliže ji štít zachytí. Co tedy potřebuji? Každý šíp jako objekt s potřebnými funkcemi. Toho se mi však nedaří dosáhnout, zkoušel jsem spoustu věcí, žádná mně nefungovala, holt moje OOP ještě není nic extra. V kódu mám nefungující řešení, vím i proč ten kód nefunguje (posouvám dolů třídu css arrows, tedy všechny nově vytvořené, a ne jen každý zvlášť), pouze nemůžu vymyslet nic lepšího. Co mně to dělá? Vytvoří se šíp, jede dolů a po vteřině, kdy se má vytvořit druhý, se ten první pouze zrychlí. Co chci, aby to dělalo? Vytvořil se šíp, jel dolů, po vteřině se vytvořil další, ten jel taky dolů a tak furt dokola. Zároveň abych měl ke každému šípu stále přístup na jeho podmíněné smazání.
Předem děkuji za všechna navrhnutá řešení ;)

window.onload = function()
{
        setInterval(createArrow, 1000);
}

function createArrow()
{
  var arrow = document.createElement("div");
  arrow.setAttribute("class", "arrow");
  document.getElementById("playground").appendChild(arrow);

  setInterval(posun, 15);

  function posun()
    {
    var top = parseInt($(".arrow").css("top"));
    $(".arrow").css("top", top+2);
    }
}
 
Odpovědět
18.4.2018 20:33
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20.4.2018 12:40

Resil bych to tak, ze na zacatku kodu si vytvorim maximum objektu. Ktere odsunu mimo obrazovku, overflow, position. A pak bych mel kod, ktery mi s temi objekty manipuluje.
Ano, da se to vytvaret prubezne, da se vykreslovat 500 pixelu, ale v pripade obrazku uz by to mohlo jit jako snek.

<style>
#screen {width:500px; height:500px; overflow:hidden; border:1px solid #888; position:relative;}
#screen .arrow {width:5px; height:5px; background-color:#f00; position:absolute;}
</style>

Counter <span id="counter"></span>
Arrows <span id="arrows"></span>
<p>
<input type=button onclick="app.func.start()" value=start>
<input type=button onclick="app.func.stop()" value=stop>
</p>

<div id="screen"></div>

<script>
function $(id)
{
return document.getElementById(id);
}

function classArrow(el)
{
this.visible = false;
this.el = el;
this.x;
this.y;
this.vx;
this.vy;
}

function classApp()
{
var root = this;
this.screen = [0,0,500,500];
this.max = 50;
this.timer = null;
this.timer_speed = 100;
this.timer_counter = 0;
this.arrows = [];
this.arrow_start = 5;
this.func   = {};

this.func.arrowMove = function (n)
        {
        var arr, x, y;
        arr = root.arrows[n];
        x = arr.x + arr.vx;
        y = arr.y + arr.vy;
        if (x>root.screen[2])
                {
                arr.visible = false;
                x = -10;
                }
        arr.x = x;
        arr.y = y;
        root.arrows[n] = arr;
        root.func.arrowMoveCss(n);
        }

this.func.arrowMoveCss = function (n)
        {
        var arr;
        arr = root.arrows[n];
        arr.el.style.left = arr.x + 'px';
        arr.el.style.top  = arr.y + 'px';
        }

this.func.arrowReset = function (n,x,y)
        {
        var arr;
        arr = root.arrows[n];
        arr.x = 0;
        arr.y = root.screen[3]>>1;      // 50% screen-y
        arr.vx = 7 + Math.round(Math.random()*3);
        arr.vy = 3 - Math.round(Math.random()*6);
//alert([arr.vx, arr.vy])
        arr.visible = true;
        root.arrows[n] = arr;
        }

this.func.arrowGroupCreate = function ()
        {
        var i, i_end, arr_el;
        i_end = root.max;
        for(i=0;i<i_end;i++)
                {
                arr_el = document.createElement('div');
                arr_el.className = 'arrow';
                arr_el.id = 'a'+i;
                arr_el.style.left = '-10px';
                $('screen').appendChild(arr_el);
                root.arrows[i] = new classArrow($('a'+i));
                }
        }

this.func.arrowGroupMove = function ()
        {
//alert('arrowsMove');
        var i, i_end, new_bool, j;
        root.timer_counter++;
        $('counter').innerHTML = root.timer_counter;
        new_bool = root.timer_counter==root.arrow_start;
        i_end = root.max;
        j = 0;
        for(i=0;i<i_end;i++)
                {
                if (root.arrows[i].visible==true)
                        {
                        root.func.arrowMove(i);
                        j++;
                        continue;
                        }
                if (new_bool==false)
                        {
                        continue;
                        }
                root.func.arrowReset(i);
                root.timer_counter = 0;
                new_bool = false;
                j++;
                }
        $('arrows').innerHTML = j;
        }

this.func.start = function()
        {
//alert('start');
        root.func.stop()
        root.timer_counter = 0;
        root.timer = setInterval(root.func.arrowGroupMove, root.timer_speed);
        }

this.func.stop = function()
        {
//alert('stop');
        if (root.timer!=null)
                {
                clearInterval(root.timer);
                }
        root.timer = null;
        }

this.func.init = function()
        {
        root.func.arrowGroupCreate();
        root.func.start()
        }
}

var app = new classApp();
app.func.init();
</script>
 
Nahoru Odpovědět
20.4.2018 12:40
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20.4.2018 13:52

Mimochodem, proc to neresis pres Canvas?

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
20.4.2018 13:52
Avatar
Jan Lorenc
Člen
Avatar
Odpovídá na Peter Mlich
Jan Lorenc:21.4.2018 13:00

Ani tam bych se přece této problematice nevyhnul, ať už vytvářím divy nebo kreslím na platně, stále se jedná o samostatné jednotky, které musí umět výše zmíněné věci. (třeba se pletu a jde to v canvasu obejít jednodušeji, ale zatím se učím, takže to vidím takhle)

 
Nahoru Odpovědět
21.4.2018 13:00
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23.4.2018 10:34

Canvas by mel zvladnout vykreslit objekty rychleji.
Kdysi jsem si hral s JS hrami, Falcon je tomu podobny. http://mujweb.cz/…/hry/hry.htm

 
Nahoru Odpovědět
23.4.2018 10:34
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.