V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
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>Mimochodem, proc to neresis pres Canvas?
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)
Canvas by mel zvladnout vykreslit objekty rychleji.
Kdysi jsem si hral s JS hrami, Falcon je tomu podobny. http://mujweb.cz/…/hry/hry.htm
Zobrazeno 5 zpráv z 5.