Black Friday Black Friday
Black Friday výprodej! Až 80 % extra bodů zdarma! Více informací zde
Avatar
Jan Lorenc
Člen
Avatar
Jan Lorenc:18. dubna 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. dubna 20:33
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20. dubna 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. dubna 12:40
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20. dubna 13:52

Mimochodem, proc to neresis pres Canvas?

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 20. dubna 13:52
Avatar
Jan Lorenc
Člen
Avatar
Odpovídá na Peter Mlich
Jan Lorenc:21. dubna 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. dubna 13:00
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23. dubna 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. dubna 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.