játékfejlesztés.hu
FórumGarázsprojectekCikkekSegédletekJf.hu versenyekKapcsolatokEgyebek
Legaktívabb fórumozók:
Asylum:    5508
FZoli:    4894
Kuz:    4455
gaborlabor:    4449
kicsy:    4304
TPG:    3402
monostoria:    3284
DMG:    3172
HomeGnome:    2919
Matzi:    2529

Pretender:    2498
szeki:    2440
Seeting:    2306
Geri:    2198
Orphy:    1893
Joga:    1791
Bacce:    1783
MaNiAc:    1735
ddbwo:    1654
syam:    1491
itamas - Tag | 136 hsz       Online status #212503   2019.06.16 16:00 GMT+1 óra  
Elkészült végre első JS-ben íródott böngészős játékom, amit ezúton szeretnék nektek bemutatni. A címe: Super Alien Force, és az egykori Alien Force című játék bővített, átdolgozott változata.
Itt játszhattok vele: http://www.programozzunk.ucoz.hu/jsjatekok/saf/saf.html
Remélem, sokaknak fog tetszeni...

U.I.: ha valaki tudna mondani ingyenes audió motort JS-hez, amely segít a zenék lejátszásában, azt külön is megköszönöm.
   
itamas - Tag | 136 hsz       Online status #212379   2019.03.18 15:17 GMT+1 óra  
S végül még tudnátok segítséget adni nekem a hang és zenefájlok betöltéséhez? Ugyanis beleütköztem abba a problémába, hogy a címképernyőn a címzene sehogy sem akar lejátszódni. Ez a kódom hozzá, de csak a játék közbeni zenét játssza le valamiért, a címképernyőn semmi hang nem hallható:
Kód:
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function(){
this.sound.play();
};
this.stop = function(){
this.sound.pause();
};
}
var cimzene;
cimzene = new sound("zene/cimzene.mp3");
cimzene.preload = "auto";

var hatterzene;
hatterzene = new sound("zene/hatterzene.mp3");
hatterzene.preload = "auto";
var jatekallapot = 0; //címképernyő mutatása
cimzene.play();
   
kumbwol - Tag | 10 hsz       Online status #212365   2019.02.27 15:56 GMT+1 óra  
Rövid válasz: igen. De mint ahogy a példa is mutatja, az onload csak meghív egy függvényt, mondjuk: startGame() nevűt, te meg szépen csinálsz egy

function startGame()
{
//ide jön a kód
}

És kész az egész.

   
itamas - Tag | 136 hsz       Online status #212364   2019.02.27 15:51 GMT+1 óra  
Ezeket értem, de egy pici játéknál, ahol csak pár képből, esetleg még néhány hangból áll az egész program, az egész kód onload-ba foglalása észszerű és működő dolog lehet?
   
kumbwol - Tag | 10 hsz       Online status #212363   2019.02.27 15:28 GMT+1 óra  
Instalok az imént fejtette ki, de lássunk 2 konkrét példát is:

Netes újságoknál: Nem kell hogy betöltsön az utolsó kép is a honlapon. A felhasználó már el tudja olvasni a főbb cikkek címét is, és eltudja dönteni kíván-e a honlapon maradni.

Játékoknál: képzeld az hogy van a játékodnak egy intró vidója. Mennyire jó már, hogy betölti az intróvideót, legyen mondjuk 10 mega, és miközben a játékos nézi az intróvideót, letölti a játékhoz szükséges maradék 20 megát a neted, így kiküszöbölve sok sok töltési időt.

   
itamas - Tag | 136 hsz       Online status #212362   2019.02.27 14:57 GMT+1 óra  
De akkor adódik a kérdés, hogy miért nem teszi mindenki az egész kódját egy onload-ba, hogy azzal ripsz-ropsz azonnal betöltessen minden szükséges dolgot?
   
kumbwol - Tag | 10 hsz       Online status #212361   2019.02.27 14:39 GMT+1 óra  
itamas - Tag | 136 hsz       Online status #212359   2019.02.27 13:49 GMT+1 óra  
És a folyamatok sorrendiségét lehet valahogy vezérelni JS-ben vagy hasonló HTML környezetben? Úgy értem, hogy pl. lefuttatni az összes erőforrásbetöltést oly módon, hogy addig más semmi ne történjen, aztán megjeleníteni valamit, mondjuk egy címképernyőt... szóval hogy minden logikus sorrendben fusson le egymás után, és ne lehessen összekavarodása a dolgoknak.
   
Instalok - Tag | 619 hsz       Online status #212358   2019.02.26 14:22 GMT+1 óra  
Ez nem JS specifikus. Ha csinálsz egy egyszerű mezei html oldalt, pl.:
Kód:
<html>
<head>
    <title>test paralell loading</title>
</head>
<body>
    <img src="https://media.wired.com/photos/598e35fb99d76447c4eb1f28/master/pass/phonepicutres-TA.jpg">
    <img src="https://ichef.bbci.co.uk/news/976/cpsprodpb/27C9/production/_103158101_tha.jpg">
    <img src="https://bloximages.chicago2.vip.townnews.com/tribdem.com/content/tncms/assets/v3/editorial/3/83/38384be2-3ba5-11e8-adec-bf48bc62810f/5acadc92f3c7d.image.jpg?resize=1200%2C1070">
    <img src="https://jooinn.com/images/picture-3.jpg">
</body>
</html>

... és mondjuk chrome-ban F12 > Network fül > F5, akkor ott láthatod, hogy több kép letöltése is folyik párhuzamosan. A mai internetsebességekkel ezek mindössze néhány ms alatt lefutnak, de mondjuk egy mobilnet, vagy gyengébb net esetén már lehet különbség.

Úgy képzeld el, mintha elindulna egy háttérfolyamat, ami tud jelezni, hogy befejezte a dolgát. Tehát ha neked van 20 különböző képed, aminek kiadod a parancsot, hogy töltsön be valamit (img.src = "valami", akkor kb. csak berakod egy queue-ba, hogy "én ezt be akarom majd tölteni"... ebből egyszercsak letöltési fázisba kerül, ami egyszercsak befejeződik. Erről szól neked az onload esemény, amire fel tudsz iratkozni.

   
itamas - Tag | 136 hsz       Online status #212357   2019.02.26 10:20 GMT+1 óra  
Egyébként azt nem értem, hogy akkor ez a kép és egyéb erőforrás betöltés tkp. hogyan zajlik JS-ben? Ha pl. van 20 darab betöltendő kép a kód legelején, elkezdi betölteni és akkor idő hiányában mondjuk a 12.-nél abbahagyja, hogy más műveletet hajtson végre? Mikor folytatja a betöltést; amikor nincs egyéb végrehajtandó feladat?
   
Instalok - Tag | 619 hsz       Online status #212356   2019.02.25 09:55 GMT+1 óra  
Mert az súlyosan növelné az oldalak betöltésének az idejét. A legtöbb assetet párhuzamosan tudja letölteni -- ezért is nem jó pl. egyetlen nagy css file-ba rakni mindent.

JS-el normál esetben annyit csinálsz, hogy hozzáadsz / módosítasz html elemeket, és nem igazán lenne jó móka, ha ez megakasztaná az oldalt (pl. egy kép betöltésekor). Ha viszont erre van szükség, akkor legalább van rá lehetőséged, hogy ezt megtedd.

Még valami: ha a <script> tag nem a body alján lenne, akkor még arra is figyelned kellene, hogy a DOM fel legyen építve. Ha például a <head>-ben hivatkozod be a scriptedet egy külső file-ból, akkor az egész dolgot bele kellene raknod egy document.onready-be.

Miért? Pongyolán és kicsit túlzóan fogalmazva azért, mert az interpretálás sorról-sorra halad, betölti a scriptet, és elkezdi futtatni. Csak ezután halad tovább, és kezdi el betölteni az oldalt, és felépíteni belőle egy DOM (Document Object Model) névre hallgató fa-szerkezetet. Ezt tudod használni JS-ben arra, hogy lekérj elemeket (document.getElementById például). Ez azonban némi időbe telik, így JS oldalon meg kell várni, hogy ez a fa-szerkezet megépüljön rendesen.

Pure JS esetén ez kicsit trükkös:
https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t

Már korábban is ajánlottam a jQuery-t, ami leegyszerűsít néhány dolgot. Meg kell szokni a szintaxisát, de nem olyan vészes.

   
itamas - Tag | 136 hsz       Online status #212355   2019.02.24 18:15 GMT+1 óra  
Köszi, átnézem a megadott címeket.
Talán az lesz a legjobb, ha egy betöltőfüggvényt készítek a játék elejére, ami beépíti az erőforrásokat, és a program csak azután kezdődhet.
Kezdem kapisgálni, miért JavaScript a nyelv neve: alprogramocskákból, azok hívogatásából áll össze az egész.
Csak még az nem világos, hogy magától miért nem várja meg a dolgok betöltését a kód elején, mikor tölti be azokat, amikkel nem végzett még, mikor a játék már elindult.
   
Instalok - Tag | 619 hsz       Online status #212354   2019.02.24 15:01 GMT+1 óra  
Szerintem a sorrendiséget nem lehet garantálni.
Csinálj egy tömböt, amiben felsorolod a képeket, és meg tudod vizsgálni, hogy mind betöltött-e. Vagy csinálhatod azt, hogy megvárod, hogy az összes kép betöltsön, pl.: https://stackoverflow.com/questions/11071314/javascript-execute-after-all-images-have-loaded
vagy: https://stackoverflow.com/questions/48987395/check-if-all-the-images-in-the-page-are-loaded

   
itamas - Tag | 136 hsz       Online status #212353   2019.02.24 14:30 GMT+1 óra  
Igen, a gördítősáv megjelenik, de az nem baj.
Kipróbáltam konkrét számok beírásával, és úgy végre működött, tehát akkor az volt a baj, hogy a képek nem töltődtek még be, amiket használok a feltételben, így az onload()-ot használva oldottam meg.
Viszont három kép (dinamit, felderito, kockaures) alapján is történik a kiértékelés, így most azt nem tudom, hogy melyik mikor töltődik be. Az onload()-ot a sorban utolsóként betöltődő képhez adtam, szóval csak remélem, hogy ez minden esetben, minden felhasználónál valóban utolsóként töltődik be, és nem jön többé elő ez a probléma.
Tehát ha a JS kód elején fel vannak sorolva a használt képek (jó sok van egyébként), akkor azok betöltődése valóban a sorrendiségüktől függ?
   
Instalok - Tag | 619 hsz       Online status #212352   2019.02.24 10:57 GMT+1 óra  
Nekem működik az átméretezés, itt a teszt kód:
Kód:
<html>
<head>
    <title>Test canvas size</title>
</head>
<body>
    <canvas id="canv" style="border: 1px solid black;"></canvas>
    <script>
        var canv = document.getElementById('canv');
       
        var minWidth = 2000;
        var minHeight = 1500;
       
        canv.width = Math.max(minWidth, window.innerWidth);
        canv.height = Math.max(minHeight, window.innerHeight);
    </script>
</body>
</html>

Arra figyelj, hogy ezzel scrollbar jelenik meg, ha a képernyő kicsi.

   
itamas - Tag | 136 hsz       Online status #212351   2019.02.24 10:17 GMT+1 óra  
Igen, ott tényleg elírtam...
Szóval, a program, amit csinálok, olyan, hogy kisebb felbontásnál kilógnak a játékelemek a vászonról, mert az kisebb, mint azok magasságának összege.
Tehát már a progi indításakor szeretném a vásznat akkorára állítani, mint azon bizonyos játékelemek szélessége-magassága (hacsak nem nagyobb már a felbontás ezeknél).
De valamiért nem működik, pedig pl. a window.innerHeight az 757, míg a felderitolapkep.height+dinamitkep.height*4 az 2076, és a feltétel úgy szól, hogy ha a felbontásmagasság (ami most ugye 757) kisebb, mint a játékelem magasság (ami most 2076), akkor legyen a vászon magassága is 2076 képpontnyi. De valamiért nem annyi lesz, hanem marad 757.
Lehet, hogy az én szemem nem elég éles, hogy észrevegyek valamit a saját, esetelgesen elírt kódomban, vagy a vásznat nem is lehet így átméretezni?
   
Instalok - Tag | 619 hsz       Online status #212350   2019.02.24 10:00 GMT+1 óra  
És egyébként miért lenne az jó neked, ha nagyobb lenne a vászon, mint a képernyő? Eleve nem is tudom, hogy lehetséges-e. Jelenleg azt kéred tőle, hogy, ha nagyobb a kívánt méret, mint a képernyő mérete, akkor állítsa nagyobbra.

Másrészt, szerintem van egy elírás a width-nél:
if (window.innerWidth < dinamitkep.width*6+kockaureskep*6

   
itamas - Tag | 136 hsz       Online status #212349   2019.02.24 09:25 GMT+1 óra  
Sziasztok!
Olyan gondom van most JS-ben, hogy valamiért képtelen vagyok átméretezni a rajzvásznat, pl. a játékban szereplő tárgyak méretének alapján.
Ezt a kódot használom most:
Kód:
<canvas id="rajzvaszon"></canvas>
<script>
var vaszon = document.getElementById('rajzvaszon');
var rv = vaszon.getContext('2d');
(...)
if (window.innerWidth < dinamitkep.width*6+kockaureskep*6) {
vaszon.width = dinamitkep.width*6+kockaureskep*6;
}
else {
vaszon.width = window.innerWidth;
};
if (window.innerHeight < felderitolapkep.height+dinamitkep.height*4) {
vaszon.height = felderitolapkep.height+dinamitkep.height*4;
}
else {
vaszon.height = window.innerHeight;
};

És a kód lefutása után a vászon mérete mindig megegyezik a felbontáséval, holott általában akkorának kellene lennie, mint pl. a felderitolapkep.height+dinamitkep.height*4.
Mi lehet a gond?
   
itamas - Tag | 136 hsz       Online status #212308   2019.01.12 10:40 GMT+1 óra  
Megnéztem a példát, de nem értettem teljesen a kódot, viszont ötletet adtál vele, és mivel a JS drawImage függvénye is támogatja a képrészlet kirajzolását, ezért megoldottam azzal úgy, hogy az egész kép egyben van egy csíkban és a részleteit rajzolom ki időközönként. Nem értem azt sem, hogy az eredeti elképzelésemmel mi volt a baj; talán nem töltődött be időben az összes alkép(?). Sajnos még nem értem a JS működését egészen; azt hittem, ami az elején meg van adva benne a kezdő sorokban, az le is fut, be is épül azonnal a programba.

Ezt a hozzászólást itamas módosította (2019.01.16 09:10 GMT+1 óra, 273 nap)
   
Instalok - Tag | 619 hsz       Online status #212305   2019.01.10 17:09 GMT+1 óra  
Nem tudom mennyire jó ötlet folyton cserélgetni a képet, többre mennél egy ehhez hasonló megoldással:
http://jsfiddle.net/twTab/

Itt találtam:
https://stackoverflow.com/questions/9486961/animated-image-with-javascript

A kép maga:
http://jumpingfishes.com/dancingpurpleunicorns/charging.png

Itt igazából csak fogod, és a kép megfelelő részét mutatod, de egyetlen kép az egész, egyszer betöltve.

A másik megoldás, amit a stackoverflow-n írtak az elfogadott válasznál az az, hogy betöltötte az összes képet, és azoknak a láthatóságát állította (display: block/none).

   
itamas - Tag | 136 hsz       Online status #212304   2019.01.10 16:48 GMT+1 óra  
Oké, most már ez jó lett; a konzollal megtaláltam a hibát. Viszont van még egy olyan gondom, ami nem tudom, hogy JS kód hiba-e vagy a PNG képé-e, de egy ilyen kép legtöbb alképét egyszerűen nem akarja kirajzolni a program, csak az első néhány alképet, kb. a 4.-ig.
14 alképből áll a lángolás képe, amit így hozok létre:
Kód:
cdlangjakepei = [];
var cdlangjakepe = new Image();
for (var i = 1; i <= 14; i++ ) {
cdlangjakepei.push('kepek/langolas/lang'+i+'.png');
};
cdlangjakepe.src = cdlangjakepei[0];

Ez a lövedékek konstruktora:
Kód:
elllovedekek = [];
function Elllovedeke(xh,yh,kep) {
this.xhely = xh;
this.yhely = yh;
switch (kep) {
case cdlangjakepe:
this.aktalkep = 1;
this.alkepdb = 14;
this.alkepvaltoido = 0;
this.kepe = kep;
break;
};
};

Lövéskor így példányosítom:
Kód:
elllovedekek.push(new Elllovedeke(ellensegtomb[i].xhely+ellensegtomb[i].kepe.width/2,ellensegtomb[i].yhely+ellensegtomb[i].kepe.height/2,cdlangjakepe));

Végül így rajzolom ki:
Kód:
for (var i=0; i<elllovedekek.length; i++) {
switch (elllovedekek[i].kepe) {
case cdlangjakepe:
if (elllovedekek[i].alkepvaltoido >= 3) {
if ( elllovedekek[i].aktalkep < elllovedekek[i].alkepdb ) {
elllovedekek[i].aktalkep += 1;
}
else {
elllovedekek[i].aktalkep = 1;
};
elllovedekek[i].alkepvaltoido = 0;
}
else {
elllovedekek[i].alkepvaltoido += 1;
};
cdlangjakepe.src = cdlangjakepei[elllovedekek[i].aktalkep-1];
elllovedekek[i].kepe = cdlangjakepe;
elllovedekek[i].yhely += 6;
if (elllovedekek[i].yhely >= vaszon.height) {
elllovedekek.splice(i,1);
};
break;
};
rv.drawImage(elllovedekek[i].kepe,elllovedekek[i].xhely,elllovedekek[i].yhely);

A konzol nem mutat semmi hibát. Kiíratom, hogy hanyadik alképnél tart, azt rendesen kiírja, de magát az alképet csak 0-4 között mutatja, pedig afölött sem üres az alkép. Lehet, hogy a képpel van a hiba, vagy mi van ezzel?
   
Instalok - Tag | 619 hsz       Online status #212291   2018.12.30 11:16 GMT+1 óra  
Nem ástam most bele magam a problémába, főleg mert nem otthon vagyok. Viszont javaslom a konzol/console használatát. Chrome-ban F12-vel hozod elő. Alapvetően egész sok információt meg lehet onnan tudni, főleg, ha valamilyen hiba van.

   
itamas - Tag | 136 hsz       Online status #212290   2018.12.30 10:24 GMT+1 óra  
És még egy tömbökkel kapcsolatos kérdésem is volna (és ezután már nem szándékozom telíteni a fórumot a problémáimmal ):
mi okozza azt a hibát, hogy ha ezt adom meg kódnak:
Kód:
for (var i=0; i<7; i++){
felszerelese.push(new JatFelszerelese(Math.floor(Math.random()*28)));
};

akkor el sem indul a program (fehér képernyő lesz indításkor), míg ha konkrétan megadom, hogy:
Kód:
felszerelese = [new JatFelszerelese(Math.floor(Math.random()*28))]

akkor jó lesz (csak éppen így elég hosszú lesz a sor, ha több elemű a tömb, tehát a for ciklusos mindenképpen praktikusabb megoldás)?
A másik ezzel kapcsolatos kérdésem, hogy egy objektumnak lehet-e és hogyan megadni saját tömböt, amit csak ő használhat? Például ez miért nem jó:
Kód:
function Jatekos(xh,yh,kep) {
this.xhely = xh;
this.yhely = yh;
[b]this.felszerelese = [];[/b]
};

Mert kiolvasásnál nem történik semmi, ha azt adom meg pl. hogy:
aktualisjatekos.felszerelese[0] ...
   
itamas - Tag | 136 hsz       Online status #212287   2018.12.27 13:35 GMT+1 óra  
Legutóbb beleütköztem abba a problémába, hogy nem tudom, hogyan kell egy, a vásznon kirajzolt képre kiírni egy szöveget vagy egy változó értékét.
Próbáltam úgy, hogy a vaszon.filltext-et használom, és koordinátáknak a kép bal felső sarkát, de nem jelenít meg semmit a JS.
Vagy esetleg megoldható úgy, hogy egy képnek vagy objektumnak külön vásznat hozunk létre és arra történik a rajzolás, vagy hogyan működik ez?
   
itamas - Tag | 136 hsz       Online status #212284   2018.12.17 10:16 GMT+1 óra  
Ja, értem már! Köszönöm ezt az információt is; most már megjegyeztem és hasznosítom.
   
Instalok - Tag | 619 hsz       Online status #212283   2018.12.16 20:07 GMT+1 óra  
Ha megnézed a lenti példakódot, amit írtam, ott van használatban
Kód:
img = new Image();
img.src = 'valami.jpg';
img.onload = function() {
    // ide jön a kód, ami akkor fusson, amikor betöltött a kép
}

   
itamas - Tag | 136 hsz       Online status #212282   2018.12.16 17:14 GMT+1 óra  
Köszönöm szépen a segítséget ehhez is, Instalok!
Tényleg úgy lett, ahogy írtad, vagyis hogy még nem töltődött be a kép, mert átraktam az átméretezés sorát egy későbbi gombnyomás eseményéhez, és így már rendesen átméretezi.
Az onload esemény használatát nem értem, bár utánanéztem a neten, de amit találtam róla, úgy csak egy fehér képernyőt eredményezett: a képbetöltést beraktam egy külön függvénybe, és a javascript kódok lefutása előtt a BODY tagot a következőképpen módosítottam:
Kód:
<body onload="kepbetoltes()">

A JS-en belül nem lehet az onload-ot egyszerűbben alkalmazni?
   
Instalok - Tag | 619 hsz       Online status #212281   2018.12.16 16:49 GMT+1 óra  
Ha elég nagy a kép, akkor nem tölt be azonnal, használd az onload eseményt.
Tehát amikor lekéred a szélességet, akkor lehet, h még nincs meg, mert nem töltött be a kép.

   
itamas - Tag | 136 hsz       Online status #212280   2018.12.16 12:41 GMT+1 óra  
Érdekes, hogy erre a műveletre:
Kód:
xmeret = (window.innerWidth/2)/window.innerWidth;
var kep = new Image();
kep.src = 'kepek/kep.png';
var xertek = kep.width*xmeret;

rendre 0-t ad eredményül az xertek változóba, pedig a kep.width értéke 525, az xmeret pedig 0.5, úgyhogy az eredménynek valahol 262 körül kellene lennie. Kerekíteni is próbáltam, de akkor is 0 jön ki neki.
   
itamas - Tag | 136 hsz       Online status #212279   2018.12.16 12:17 GMT+1 óra  
Igen, úgy jó lenne, ha a kirajzolási függvényben méretezném át, de annak egy csomó vonzata van más helyen is (pl. rákattintásnál még az eredeti képméret fog így is szerepelni).
Viszont rájöttem arra, hogy ha a következőképpen csinálom, úgy rendesen átméretezi; a lényeg, hogy a kirajzolófüggvénybe is be kell írni, hogy kep.width meg kep.height:
Kód:
var kep = new Image();
kep.src = 'kepek/kep.png';
kep.width = 250;
(...)
rv.drawImage(kep,a_kep.xhely,a_kep.yhely,kep.width,kep.height);

Egy bajom van, mégpedig az, hogy úgy látszik, konkrét számértéket kell beírni neki (most: 250), mert anélkül mindig 0 méretet adott a képnek, pl. így is:
Kód:
xmeret = (window.innerWidth/2)/window.innerWidth;
ymeret = (window.innerHeight/2)/window.innerHeight;
(...)
var kep = new Image();
kep.src = 'kepek/kep.png';
kep.width = kep.width*xmeret;

Ezt nem tudom, hogy miért van...
   
Instalok - Tag | 619 hsz       Online status #212278   2018.12.16 10:58 GMT+1 óra  
Ez továbbra is megoldható úgy, hogy a méretet a kirajzolásnál adod meg, lásd a lenti példakódot. A kép eredetileg ki tudja mekkora, kirajzoláskor viszont a (10,10) pozícióba rajzolom 200x200-as méretben.

Egyébként design szempontjából nem tudom mennyire jó ötlet felbontás alapján méretezni a képet, ki kell próbálni.

   
itamas - Tag | 136 hsz       Online status #212277   2018.12.15 14:22 GMT+1 óra  
Azért kellene a képeket átméreteznem, mert azt szeretném, hogy a játékos képernyőfelbontásától függetlenül ugyanakkora legyen minden számítógépen.
Tehát az xmeret és ymeret változókba kerül a méretezési arány, ami a képernyőfelbontás valahanyad része. A képek mostani állapotukban túl rosszul néznek ki elhelyezkedésileg a böngésző ablakában, mert elég nagyok. Ezeket a képeket kellene ugyanakkora arányban kicsinyíteni, mint ahogyan aránylik a teljes képernyőhöz mondjuk a harmada a képernyőnek.
Legalábbis ez volna az elgondolásom.
   
Instalok - Tag | 619 hsz       Online status #212276   2018.12.15 10:10 GMT+1 óra  
1. Miért akarod átméretezni a képet? Miért nem jó, ha csak simán kisebb méretben rajzolod ki? Ha jól tudom a width/height beállítása csak akkor érvényes, ha az egy valid html elementre mutat. Ha a contexttel rajzolod ki a képet, akkor rajzoláskor kell megadnod a méretét.
Kód:
<canvas id="myCanvas" width=800 height=600 style="border: 1px solid black;" />
<script>
window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var img = new Image();
    img.src = "image.jpg";

    img.onload = function() {
        ctx.drawImage(img, 10, 10, 200, 200);
    };
};
</script>


2. Megoldhatod úgy, hogy egy teljes képernyős fekete téglalapot kirajzolsz, aminek mondjuk 50%-os átlátszósága van (alpha/opacity = 0.5)

   
itamas - Tag | 136 hsz       Online status #212275   2018.12.15 09:55 GMT+1 óra  
Felbukkant még két kérdés:
1. hogyan lehet JS-ben a képeket betöltés után átméretezni? Mert ezt a kódot használom rá:
Kód:
xmeret = (window.innerWidth/2)/window.innerWidth;
ymeret = (window.innerHeight/2)/window.innerHeight;
var kep = new Image();
kep.src = 'kepek/kep.png';
kep.width *= xmeret;
kep.height *=ymeret;

és a képet ugyanakkora méretben jeleníti meg, bár ha kiíratom a méretét, az 0. Ugyanez van, ha megadok egy konkrét számot szélességnek és magasságnak.
2. lehetséges-e és ha igen, hogyan JS-ben játék közben bizonyos mértékben elsötétíteni a háttérben lévő képeket, mikor az előtérben más képeket mutatok? Mint amikor pl. felbukkan egy új ablak, és mögötte a nem aktív dolgok elsötétülnek.
   
itamas - Tag | 136 hsz       Online status #212248   2018.11.20 08:45 GMT+1 óra  

Ezt a hozzászólást itamas módosította (2018.11.21 12:51 GMT+1 óra, 329 nap)
   
itamas - Tag | 136 hsz       Online status #212234   2018.11.11 16:27 GMT+1 óra  
Küldtem neked az imént privát üzenetet a kérdéses fájllal. Ha időd s kedved van hozzá, belenézhetsz, hogy mi lehet az egérkezeléssel a hiba.
A Phaser-t ismerem régebbről, csak azt hittem, egyszerűbb és átláthatóbb így kódolni: elkezdtem sima Jegyzettömbbel, aztán jött a Notepad++. Gondoltam, ezekkel jobban "belelátok" abba, amit csinálok...
   
zeller - Törzstag | 489 hsz       Online status #212233   2018.11.11 09:54 GMT+1 óra  
Ne a window-ra hivd meg az addeventlistenert, hanem arra a peldanyra amire regisztralod. Nem tudom miert nem mukodik. Kulon file? Esetleg rossz sorrend.

A this kulcsszoval mindig az aktualis peldanyra hivatkozol, szoval ez igy helyes, de nem tudom JS-ben mi lehet switchben vizsgalva (van olyan nyelv ahol csak int vagy string) es azt se, hogy mive castolja a vizsgalathoz.

Egyebkent en azt javaslom, hogy ne kinozd magad ES5 szintaxisu javascripttel, es sajat engine-nel.
Ha a celod jatekkeszites akkor inkabb kezdj el egy engine-t vagy SDK-t hasznalni, pl ezt:
https://phaser.io/
Sokkal hamarabb celba ersz.

   
itamas - Tag | 136 hsz       Online status #212232   2018.11.11 09:02 GMT+1 óra  
Beírtam a javaslatod a billentyűkezeléshez hasonlóan (egyébként Notepad++-szal fejlesztek), de még valami nem stimmel.
Ha így használom:
Kód:
window.addEventListener("click", kattirnyilon, false);

akkor nem jelez hibát, de nem is csinál semmit kattintásra.
Ha viszont az addEventListener elé a window helyett a nyilak konstruktorát, vagyis Irnyil-t írok vagy éppen egy példányát a nyilaknak (felnyil, lenyil, balnyil vagy jobbnyil), akkor pl. "felnyil is not defined" hibaüzenet van a Chrome-ban (holott a felnyil-at és a másik 3 példányt globális változóként hozom létre, tehát nem a var kulcsszóval, úgyhogy elvileg mindenütt látszódnia kell).
Ezen kívül még azt nem értem, arra a kérdésre szeretnék választ, hogy van ugye a nyilaknak egy konstruktora, az Irnyil. Ebben vannak a képek, pl. ha az iránya 0, akkor:
Kód:
this.kepe = jobbranyilkep;

Namost ha rákattintok ennek egy példányára, pl. a jobbnyil objektumra, akkor ezen a
Kód:
switch (this.kepe)

szerkezettel helyesen és megfelelően le tudom-e kérdezni valamely tulajdonságát (most: a képét)? Vagy ez is hibás valamiért? Tehát a this.kepe-vel mindig az aktuális példányra hivatkozok?
   
zeller - Törzstag | 489 hsz       Online status #212231   2018.11.10 15:47 GMT+1 óra  
Az onclick egy eventhandler. Nem fogod meghivni, hanem az event loop hivja meg. Nem tudom milyen frameworkben fejlesztesz, de az alap DOM-os API-ban asszem igy lehet: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

szoval pl gomb.addEventListener("click", callbackFn)

   
itamas - Tag | 136 hsz       Online status #212229   2018.11.09 15:55 GMT+1 óra  
Még azt el tudná valaki magyarázni nekem, hogy az egérkezelés hogy működik a JavaScript-ben?
Azt szeretném elérni, hogy van négy darab négyirányba mutató nyilam, amikhez képek vannak hozzárendelve. S ha egy nyílra kattintunk, jöjjön létre az irányától függően tőle jobbra, balra, fenn vagy lenn egy másik kép. Azt tudom, hogy az onclick() függvény kezeli a gombnyomást egy objektumon, de ezt hol, micsodán és mikor kell hívni?
Tehát, adott egy tereptárgy objektum:
Kód:
function Tereptargy(xh,yh,kep) {
this.xhely = xh;
this.yhely = yh;
switch (kep) {
case 1: this.kepe = erdokep;
break;
case 2: this.kepe = folyokep;
break;
case 3: this.kepe = hegysegkep;
break;
case 4: this.kepe = mezokep;
break;
};
};

egy Irnyil objektum 4 példánnyal:
Kód:
function Irnyil(xh,yh,ir) {
this.xhely = xh;
this.yhely = yh;
this.irany = ir;
switch (ir) {
case 0: this.kepe = jobbranyilkep;
break;
case 90: this.kepe = felnyilkep;
break;
case 180: this.kepe = balranyilkep;
break;
case 270: this.kepe = lenyilkep;
break;
};
};

így csináltam neki 4 példányt:
Kód:
felnyil = new Irnyil(a_bunker.xhely+(bunkerkep.width/2)-(felnyilkep.width/2),a_bunker.yhely-felnyilkep.height,90);
lenyil = new Irnyil(a_bunker.xhely+(bunkerkep.width/2)-(felnyilkep.width/2),a_bunker.yhely+bunkerkep.height,270);
balnyil = new Irnyil(a_bunker.xhely-balranyilkep.width,a_bunker.yhely+(bunkerkep.height/2)-(balranyilkep.height/2),180);
jobbnyil = new Irnyil(a_bunker.xhely+bunkerkep.width,a_bunker.yhely+(bunkerkep.height/2)-(jobbranyilkep.height/2),0);

és a nyilakon való kattintás eseménye:
Kód:
function kattirnyilon() {
switch (this.kepe) {
case balranyilkep: tereptargyak.push(new Tereptargy(balranyilkep.xhely-erdokep.width,balranyilkep.yhely-(erdokep.height/2),1));
break;
case jobbranyilkep: tereptargyak.push(new Tereptargy(jobbranyilkep.width,jobbranyilkep.yhely-(folyokep.height/2),2));
break;
case felnyilkep: tereptargyak.push(new Tereptargy(felnyilkep.xhely-(hegysegkep.width/2),felnyilkep.yhely-(hegysegkep.height/2),3));
break;
case lenyilkep: tereptargyak.push(new Tereptargy(lenyilkep.xhely-(mezokep.width/2),lenyilkep.yhely+lenyilkep.height,4));
break;
};
};

De mindezek alapján hol kell használni az onclick()-et, hogy hívja és végrehajtsa a kattirnyilon() függvényt? Mert betettem a játékciklusba pl. hogy:
felnyil.onclick = kattirnyilon;
meg hogy:
Irnyil.onclick = kattirnyilon;
de egyikre sem csinál semmit. És eddigi hosszas böngészések után sem találtam sehol a neten valami megoldást... :-(
   
itamas - Tag | 136 hsz       Online status #212215   2018.10.29 13:51 GMT+1 óra  
Szia Instalok!
Elküldtem privát üzenetben a programom forráskódját, hogy ne szemeteljem itt tele a fórumot. Tegnap este már írni akartam, hogy ma küldeni fogom, de telefonon írtam, és hibát írt ki a fórum küldéskor (még kilépni sem tudtam).
Előre is köszönöm, ha időt szakítasz az átnézésére és a segítségre!
   
Instalok - Tag | 619 hsz       Online status #212214   2018.10.28 20:01 GMT+1 óra  
Kicsit nehezen olvasható így a kód, ráadásul nem is látszik, hogy hogy van meghívva. Egy pastebin teljes (vagy legalábbis releváns) kód talán jobb lenne, még jobb a "futtatható", hogy ki tudjuk próbálni.

   
itamas - Tag | 136 hsz       Online status #212212   2018.10.27 17:48 GMT+1 óra  
Na, ezt viszont nem értem, miért baj: a játékomban jobbról és balról jönnének be az ellenségek, és ha ütköznek egymással valahol a képernyő közepén, akkor megállás és váltsanak képet, kezdjenek harcolni, stb. stb.
De ha az utkelllel() függvény nincs kikommentelve, akkor az ellensegcselekszik() függvényben nem fut le a kirajzolás, pontosabban ezt a hibát kapom:
Uncaught TypeError: Cannot read property 'kepe' of undefined
Ha beadok egy konkrét képet, akkor ugyanez a hiba az xhely változóval, stb.
Így néz ki az ellensegcselekszik():
Kód:
function ellensegcselekszik() {
for (i = 0; i < ellensegtomb.length; i++) {
switch (ellensegtomb[i].mitcsinal) {
case "bejon":
if (ellensegtomb[i].iranya == 0) {
ellensegtomb[i].xhely += 4;
var utkeredmeny;
utkeredmeny = utkelllel(i,ellensegtomb[i].xhely+((ellensegtomb[i].kepe.width)*2),ellensegtomb[i].yhely);
if ( utkeredmeny == 1 ) {
ellensegtomb[i].mitcsinal = "harcol";
ellensegtomb[i].kepe = cdkepe;
};
}
else
{
ellensegtomb[i].xhely -= 4;
var utkeredmeny;
utkeredmeny = utkelllel(i,ellensegtomb[i].xhely-((ellensegtomb[i].kepe.width)*2),ellensegtomb[i].yhely);
if ( utkeredmeny == 1 ) {
ellensegtomb[i].mitcsinal = "harcol";
ellensegtomb[i].kepe = cdkepe;
};
};
break;
};
rv.drawImage(ellensegtomb[i].kepe,ellensegtomb[i].xhely,ellensegtomb[i].yhely);
};
};

Így pedig az utkelllel():
Kód:
function utkelllel(ez,ittx,itty) {
/*for (i = 0; i < ellensegtomb.length; i++) {
if (ittx >= ellensegtomb[i].xhely && ittx <= ellensegtomb[i].xhely+(ellensegtomb[i].kepe).width && itty >= ellensegtomb[i].yhely && itty <= ellensegtomb[i].yhely+(ellensegtomb[i].kepe).height) {
return 1;
}
};*/
for (i = 0; i < ellensegtomb.length; i++) {
if (ittx < ellensegtomb[i].xhely + (ellensegtomb[i].kepe).width &&
ittx + (ellensegtomb[ez].kepe).width > ellensegtomb[i].xhely &&
itty < ellensegtomb[i].yhely + (ellensegtomb[i].kepe).height &&
(ellensegtomb[ez].kepe).height + itty > ellensegtomb[i].yhely) {
return 1
};
};
return 0;
};

Ha nincs ez az utóbbi ütközésellenőrzés, akkor minden oké - leszámítva, hogy megállás nélkül menetelnek tovább a figurák, márpedig nem az kéne.
   
itamas - Tag | 136 hsz       Online status #212207   2018.10.23 09:31 GMT+1 óra  
Hű, nagyon szépen köszönöm a segítségedet, Instalok! A kis programom most már működik; leírásod alapján a következő módosítást csináltam az adott kódrészleten:
Kód:
setInterval(frissites, 40);
function frissites() {
ctx.clearRect(0,0,canvas.width,canvas.height);
for (i = 0; i < kistvtomb.length; i++) {
ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50); //kicsi képek a saját koordinátájukra
};
ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);  //kirajzoljuk a nagy képet a képernyő közepére
};

valamint előtte pár sorral, hogy a nagy kép ne jelenjen meg a vásznon kívül:
Kód:
var tvkepe = new Image();
tvkepe.src = 'kepek/viditv.jpg';

Kicsit még furcsa mindez nekem, de remélem jó alap lesz az elinduláshoz, hogy egyszerűbb böngészős játékokat készítsek.
   
Instalok - Tag | 619 hsz       Online status #212206   2018.10.22 18:21 GMT+1 óra  
Az eredeti kódodban a nagy kép nem a canvason jelent meg, hanem a html kódban lévő <img> tag miatt. Ezért is adtam hozzá a vászonhoz egy keretet, így láthatod, hogy hol helyezkedik el. Ha a <head>-ben lévő <style> taget hozzáadod az eredeti kódodhoz, akkor láthatod majd, hogy megjelenik az üres canvas, és mellette a kép.

A kirajzolás koordinátái a kép bal felső sarkát adják meg. Ha a kép közepét akarod elhelyezni egy (x,y) helyre, akkor (x-képszélesség/2, y-képmagasság/2) koordinátákba kell kirajzolnod a képet.

Az onload esemény csak egyszer hívódik meg, így utána hiába írod felül a koordinátákat, az a kép már ki van rajzolva az adott pozícióba, adott mérettel. Tehát nagyjából annyi történik, hogy:
- betöltődik az ablak => meghívja az onload eseményt
- létrehozod az objektumokat, beállítod az értékeit, stb.
- kiadod az utasítást a kép betöltésére
- betöltődik a kép => meghívódik a képhez rendelt onload esemény
- ekkor kirajzolod a képet
- ezek után, ha felülírod az értékeket, semmi sem rajzolja újra a képet.

Két lehetőséged van, mindkettőhöz érdemes magát a kirajzolást egy saját függvényben elhelyezni.
- vagy minden eseményre újrarajzolod a képeket
- vagy beállítod, hogy a "render" függvényed bizonyos időközönként automatikusan meghívódjon, pl. window.setInterval() segítségével: https://www.w3schools.com/jsref/met_win_setinterval.asp

Annyit érdemes ehhez hozzátenni, hogy attól, hogy újrarajzolod a képeket, a régiek még nem tűnnek el, szóval valahogy érdemes "kitakarítani" a canvast. Ezt a fantáziádra bízom.

   
itamas - Tag | 136 hsz       Online status #212204   2018.10.22 14:23 GMT+1 óra  
Aha. Szóval az onload használatát mindenképpen megköveteli a kirajzolás. Most már nekem is jó; köszönöm szépen a segítségedet.
Még két kérdéssel szeretnélek egy picit feltartani:
1. érdekes módon ha az onload-ot nem használom - ahogy te is láthatod a kódban - a nagy kép kirajzolásánál, attól az még kirajzolódik, bár nem teljesen a vászon közepére. Ez miért lehet? (Persze jó nekem, hogy ez kirajzolódik, csak megkavar, hogy akkor az az onload nélkül miért van?)
2. beszúrtam ezt a kódot a két for ciklus közé, hogy lehessen mozgatni a 0. elemű példányt a tömbben, de valamiért le se bagóz engem, nem mozog. A kód maga jó lehet, mert kipróbáltam a case ágakat egy szövegkiírással is, de maguk a kistvtomb[0].xhely és kistvtomb[0].yhely koordináták (látszólag?) nem változnak. Ezek szerint nem jól hivatkozok rájuk értékadásnál, vagy mi lehet a gond, amiért nem mozdulnak el gombnyomásra?
Kód:
window.addEventListener("keydown", gombnyomas, false);
function gombnyomas (gomb) {
switch ( gomb.keyCode ) {
case 38: kistvtomb[0].yhely -= 4; break;
case 37: kistvtomb[0].xhely -= 4; break;
case 39: kistvtomb[0].xhely += 4; break;
case 40: kistvtomb[0].yhely += 4; break;
};
};

És még egy pótkérdésem ehhez, hogy gombnyomáskezeléshez létezik egyszerűbb módszer JavaScriptben, ami nem használja az addEventListener() függvényt? Mert úgy olvasom, ezt a régebbi böngészők nem támogatják.
   
Instalok - Tag | 619 hsz       Online status #212203   2018.10.22 10:52 GMT+1 óra  
Kód:
<html>
    <head>
        <title>Képek</title>
        <style>
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id="rajzvaszon" width="500" height="500"></canvas>
        <img id="tv_kepe" src='https://brain-images-ssl.cdn.dixons.com/4/9/10161494/l_10161494_002.jpg'>
        <script>
        window.onload = function() {
            var canvas = document.getElementById('rajzvaszon');
            var ctx = canvas.getContext('2d');
            var tvkepe = document.getElementById("tv_kepe");
           
            function Kistv() {
                this.xhely=Math.round(Math.random()*400);
                this.yhely=Math.round(Math.random()*400);
            };
           
            var kistvtomb = [];
            for (i = 0; i < 5; i++) {
                kistvtomb.push(new Kistv());
            };
           
            for (i = 0; i < kistvtomb.length; i++) {
                ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50);
            }

            ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);
        }
        </script>
    </body>
</html>

avagy...
Kód:
<html>
    <head>
        <title>Képek</title>
        <style>
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id="rajzvaszon" width="500" height="500"></canvas>
        <script>
        window.onload = function() {
            var canvas = document.getElementById('rajzvaszon');
            var ctx = canvas.getContext('2d');

            // létrehozunk egy új képet, aminek beállítjuk, hogy mit töltsön be
            var tvkepe = new Image();
            tvkepe.src = 'https://brain-images-ssl.cdn.dixons.com/4/9/10161494/l_10161494_002.jpg';
           
            function Kistv() {
                this.xhely=Math.round(Math.random()*400);
                this.yhely=Math.round(Math.random()*400);
            };
           
            var kistvtomb = [];
            for (i = 0; i < 5; i++) {
                kistvtomb.push(new Kistv());
            };
           
            // amikor betöltött a kép, akkor rajzoljuk ki
            tvkepe.onload = function() {
                for (i = 0; i < kistvtomb.length; i++) {
                    ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50);
                }

                ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);
            }
        }
        </script>
    </body>
</html>

   
itamas - Tag | 136 hsz       Online status #212202   2018.10.21 10:00 GMT+1 óra  
Köszi a választ, Instalok, de valami még nem jó. Az általad leírtak alapján ilyenné alakítottam a kódot:
Kód:
<html>
<head>
<title>Képek</title>
</head>
<body>
<canvas id="rajzvaszon" width="500" height="500"></canvas>
<img id="tv_kepe" src='kepek/viditv.jpg'>
<script>
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var tvkepe = document.getElementById("tv_kepe");
function Kistv() { //A konstruktor
this.xhely=Math.round(Math.random()*400);
this.yhely=Math.round(Math.random()*400);
};
var kistvtomb = [];
for (i = 0; i < 5; i++) { //egy példány létrehozása a Kistv objektumból
kistvtomb.push(new Kistv());
};
for (i = 0; i < kistvtomb.length; i++) {
ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50); //kicsi képek a saját koordinátájukra - ez NEM OKÉ!
}
ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);  //kirajzoljuk a nagy képet a képernyő közepére - ez oké.
</script>
</body>
</html>

Meg még az lenne a kérdésem, hogy az objektumok megsemmisítése hogyan működik JS-ben? Legyen mindegyiknek egy "letezik" vagy hasonló nevű változója, és ezt állítgassam igazra meg hamisra, vagy amolyan C#-osan lehet "null" vagy ilyesmi értéket hozzájuk rendelni, és így eltünteni a már szükségtelen objektumpéldányokat?

Ezt a hozzászólást itamas módosította (2018.10.21 13:12 GMT+1 óra, 360 nap)
   
Instalok - Tag | 619 hsz       Online status #212201   2018.10.20 23:15 GMT+1 óra  
Nem tudom, h csak rész-kódot adtál-e meg, de:
- hiányzik a <head> és <body> tag
- érdemes az egész JS kódot valamilyen esemény alá berakni (főleg, ha külön js file, és a head-ben húzod be), például window.onload
- function Kistv(xhely,yhely) - itt bekérsz 2 paramétert, amit aztán nem használsz fel
- nem muszáj létező html img taget felhasználni, be is tudod tölteni a képet, és azt kirajzolni: http://www.williammalone.com/briefs/how-to-draw-image-html5-canvas/
- a kistvtomb.push egy függvény, tehát kistvtomb.push(...) formában írandó.

Az általad megadott kód enyhén javított változata:
Kód:
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var tvkepe = document.getElementById("tv_kepe");

function Kistv() { //A konstruktor
    this.xhely=Math.round(random()*400);
    this.yhely=Math.round(random()*400);
};

kistvdb = 0;
var kistvtomb = [];
while ( kistvdb < 5 ) { // ez lehetne for ciklus is
    kistvtomb.push(new Kistv());
    kistvdb += 1;
};

for (i = 0; i < kistvtomb.length; i++) {
    ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50);
}
ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);

Nem azt mondom, hogy így érdemes csinálni, de ennek már mennie kell. Nagyjából.

Illetve ajánlom figyelmedbe a Chrome F12-vel elérhető kis sidebarját, azon belül is főleg a console-t.

   
itamas - Tag | 136 hsz       Online status #212200   2018.10.20 16:09 GMT+1 óra  
Sziasztok! Nemrég hozzáfogtam a JavaScript tanulásához, de elakadtam azzal a problémával, hogy egy objektum több példányát összegyűjtsem egy tömbbe és azok alapján kirakjam azokat. Szerintem ez így nem nagyon érthető, de a kódom talán beszédesebb lesz arról, hogy mi kéne, mi nem működik (én most túl fáradt vagyok a gépeléshez, mert egész nap a Javascriptes honlapokat bújtam, de úgy látszik az én logikám még nem kompatibilis a JS-ével...).
Kód:
<html>
<title>Képek</title>
<canvas id="rajzvaszon" width="500" height="500"></canvas>
<img id="tv_kepe" src='kepek/viditv.jpg'>
<script>
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var tvkepe = document.getElementById("tv_kepe");
function Kistv(xhely,yhely) { //A konstruktor
this.xhely=Math.round(random()*400);
this.yhely=Math.round(random()*400);
};
kistvdb = 0;
var kistvtomb = [];
while ( kistvdb < 5 ) { //egy példány létrehozása a Kistv objektumból
kistvtomb.push = new Kistv(Math.round(random()*400),Math.round(random()*400));
kistvdb += 1;
};
for (i = 0; i < kistvtomb.length-1; i++) {
ctx.drawImage(tvkepe,kistvtomb[i].xhely,kistvtomb[i].yhely,50,50); //kicsi képek a saját koordinátájukra - EZ NEM OKÉ!
}
ctx.drawImage(tvkepe,canvas.width/2,canvas.height/2);  //kirajzoljuk a nagy képet a képernyő közepére - ez oké.
</script>
</html>