|
|
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, 37 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, 93 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, 124 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>
|
|
|
Igazán nincs mit, és BÚÉK előre is!
|
|
|
|
|
Sziasztok!
PHP / MySQL -> valaki tud olyan módszert ami egy scriptben kiválaszt táblából adott számú elemet, rendezve és legmagasabb értékkel? A választ köszönöm előre is.
Még 13 óra és 10 perc Újévig - BUÉK mindenkinek:
|
|
|
|
|
Sziasztok!
Hol lehet idehaza LUA scriptet tanulni?
|
|
|
Pretender: Ehhez már fordítóprogramot kell fejleszteni. Egyszerű esetben nem olyan nehéz, de elég mély a téma. Lexer, parser, interpreter. A suliban majd fogsz róla tanulni és egy egyszerűbb elemzéssel meg is valósítani egy kis nyelvecskét talán az ANTLR közbeiktatásával, ami már a lexer és parser-t meg is oldja helyetted.
Syam: Én olyasmire gondolok, hogy írom a rendszert, persze alapos tervezés után és menet közben integrálgatom a scriptet, tesztelek. Valamennyire időtálló, sőt 1-1 alrendszer nem is nagyon változna később. Csak mivel mindent magamnak írok, nem biztos, hogy megéri és összességében nem biztos, hogy gyorsabb a fejlesztés, ha a teljes játéklogikát scriptelem, mintha C++ ban írnám, de minden kis fingnyi változtatás után fordítás lenne.
Itt ahogy olvastam mindenki oda van a scriptől, meg vissza, akkor is ha saját motort fejleszt.
Szerk.: Jövőre indítok ilyen projectet, ha mást nem majd én számolok be, hogy mennyire éri meg.
Ezt a hozzászólást Parallax módosította (2011.09.22 11:11 GMT+1 óra, ---)
|
|
|
Én erről nem is tudok sokat... anno úgy oldottam meg a "scriptelést", hogy szövegesen beolvastam a parancsot, meg a paramétereket, és külön-külön lehetett minden egyes parancshoz rendelni egy konvertálós és végrehajtó függvényt.
Pl. volt az a parancsom, hogy
Kód: player_spawn(0,0,0,5);
Abból beolvastam, hogy command = player_spawn, parameters[] = "0", "0", "0", "5"
Volt egy dictionary-m is, ami megadta, hogy mit kell hívni az adott parancs esetén. Meghívtam azt a két függvényt
Kód: void A()
{
x = StringHelper::ToFloat(parameters[0]);
//...
}
void B()
{
player->Spawn(x,y,z,angle);
}
Node kizárt, hogy ezt így szokták (így pl. minden egyes parancshoz írni kell két függvényt, változókat eltárolni, stb.), szóval hogy érdemes ilyet írni?
|
|
|
Szerintem ez attól függ, h az engine egy vagy több játékra lesz tervezve.
Utóbbi esetben az engine-t gyaklag csak modolja az ember amihez pedig minél nagyobb szabadság kell, amit a script tud (csak) nyújtani az engine átírása nélkül.
Viszont utólag megírni a script bind interface-t az egy halál...
alias aalberik
|
|
|
Idézet Parallax :
Idézet barack1 :
Kész engine-t nem is nehéz scriptelgetni, a finom feladat az, amikor magadnak írsz mindent.
Annak azért már nem sok köze van a scripteléshez.
Akkor talán itt jobb helye van ennek a problémának. Engem érdekelne másoknak mi a tapasztalata. Megéri e a script integrálással való munkát (binding, felület írás) az a gyakorlatilag egyetlen előny, hogy gyorsabb játék logikát írni, vagy engine-t tesztelni? Ez arra az esetre vonatkozik, ha kis csapat van pár fő, vagy csak 1-2 programozó.
|
|
|
Idézet dvorgaz :
LuaBind-nál a függvények importálásához/script futtatásához kell ugy egy ilyen:
Kód: // Create a new lua state
lua_State *myLuaState = lua_open();
// Connect LuaBind to this lua state
luabind::open(myLuaState);
// do stuff...
lua_close(myLuaState);
Ezt minden alkalommal el kell játszani mikor scriptet futtatok, vagy mondjuk a program elején létrehozom ezt a luastate-et meg exportálok c++ függvényeket, aztán majd kilépéskor meghívom a lua_close()-t?
Én utóbbit csinálom, de szerintem létezhet olyan eset mikor az előbbi is hasznos lehet.
Reality is almost always wrong. - House
|
|
|
LuaBind-nál a függvények importálásához/script futtatásához kell ugy egy ilyen:
Kód: // Create a new lua state
lua_State *myLuaState = lua_open();
// Connect LuaBind to this lua state
luabind::open(myLuaState);
// do stuff...
lua_close(myLuaState);
Ezt minden alkalommal el kell játszani mikor scriptet futtatok, vagy mondjuk a program elején létrehozom ezt a luastate-et meg exportálok c++ függvényeket, aztán majd kilépéskor meghívom a lua_close()-t?
|
|
|
Az ilyesmi policy függő, abban az esetben amit írtál emlékeim szerint a copy az alap policy. A policy-kről itt olvashatsz.
Reality is almost always wrong. - House
|
|
|
Hello, bekötöttem egy MyResourceManager nevű (ResourceManager típusú) objektumot Luába LuaBind-dal:
Kód: // Assign MyResourceManager to a global in lua
luabind::globals(myLuaState)["MyResourceManager"] = &MyResourceManager;
Ilyenkor tényleg cím szerint adja át a scriptnek (tehát nem jönt létre belőle másolat), vagy bemásolja valahova a scriptbe is? Pl. mennyire hatékony, ha nagy mennyiségű adatot szeretnék így átnyomni a scriptnek?
Azt próbálgattam, hogy bekötés után változtatgattam az objektum egy tagváltozóját C++ból és scriptből is, és mindíg "szinkronban" voltak a scriptbeli és kódbeli változók, de nem egyértelmű, hogy ez amiatt van-e, hogy pointerrel lett átadva, vagy azért mert külön szinkronizálja őket.
|
|
|
Ez is szin ... de ugye Red Green Blue Alpha ... nahh de az utolso az alpha? vagy az elso? (kozepre enm szoktak tenni  ))
ezert jo ha leirod, mert ezt egybol nem fogod tudni ... amelett van ahol nem RGB-t kernek, hanem BGR-t ... szoval  )))
|
|
|
Idézet twilek :
haaat
akkor ez vajon mit jelenthet? lamp0001={1, 1, 1, 0}
? ))
Ez így nem ér,  a színnél könnyebb 3 számot beazonosítani! (way túúúúl sarkos a példád)
|
|
|
Pedig en tenyleg javaslom ... de valo igaz, hogy draga. 100$ = 18.000 huf (kb  )) ez a dolog bosegesen meger ennyit .. tenyleg nagyon nagyon hasznos ...
ami nagyon jo benne:
alt+shift+g -> feljon egy ablak, ami a projectben talalhato osszes filet tartalmaza, ahogy gepelsz ugy szuri a listat, enterre a fjalhoz ugrik
alt+m -> lenyilik egy ablak, a fajlban levo fuggvenyekkel, gepelsz, szur, enter oda ugrik
alt+g -> valtas header es cpp kozott / ujabb verzioban mar inl -t is kezel
a faj llistahoz hasonloan van fuggveny lista is egesz soulution ben ... refeneciak, hivas listak, minden .. renegeteg nagyon hasznos funkcioja van, amibol mar az elso 3 miatt erdemes  )))
szoval nagyon nagyon nagyszeru kis tool .. a code complite rol nem is beszelve ...
beirsz neki .. pl:
for ENTER
for( ITT A KURZOR )
{
}
switchre, exception re .. de te bovitheted alistat ... elkepeszto .. 
Nahh de ez nem a reklam helye, bocsi, tobbet nem irok
|
|
|
Legújabb project:
Szókirakó 3
Legutóbb frissített project:
Szókirakó 3
Friss kép a galériából:
|