|
|
|
|
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.
|
|
|
|
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();
|
|
|
|
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.
|
|
|
|
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?
|
|
|
|
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.
|
|
|
|
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?
|
|
|
|
|
|
É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.
|
|
|
|
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.
|
|
|
|
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?
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
|
|
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?
|
|
|
|
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.
|
|
|
|
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?
|
|
|
|
É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
|
|
|
|
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?
|
|
|
|
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, 371 nap)
|
|
|
|
|
|
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?
|
|
|
|
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.
|
|
|
|
É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] ...
|
|
|
|
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?
|
|
|
|
Ja, értem már! Köszönöm ezt az információt is; most már megjegyeztem és hasznosítom.
|
|
|
|
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
}
|
|
|
|
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?
|
|
|
|
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.
|
|
|
|
É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. 
|
|
|
|
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...
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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)
|
|
|
|
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.
|
|
|
|
Ezt a hozzászólást itamas módosította (2018.11.21 12:51 GMT+1 óra, 427 nap)
|
|
|
|
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...
|
|
|
|
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.
|
|
|
|
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?
|
|
|
|
|
|
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... :-(
|
|
|
|
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!
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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>
|
|
|
|
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, 458 nap)
|
|
|
|
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.
|
|
|
|
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>
|
|
|
Legutóbb frissített
project:
Maker4D
Friss kép a galériából:
|
