Initial commit
This commit is contained in:
commit
4bdaa9ba8d
119
aranyjanos/ballada.js
Normal file
119
aranyjanos/ballada.js
Normal file
@ -0,0 +1,119 @@
|
||||
var cimek = [
|
||||
"A walesi bárdok",
|
||||
"Ágnes asszony",
|
||||
"Az örök zsidó",
|
||||
"Híd-avatás",
|
||||
"Szondi két apródja",
|
||||
"Tengerihántás",
|
||||
"Tetemre hívás",
|
||||
"V. László",
|
||||
"Vörös Rébék"
|
||||
];
|
||||
var tema = [
|
||||
"történelmi",
|
||||
"népi",
|
||||
"népi",
|
||||
"lélektani",
|
||||
"történelmi",
|
||||
"népi",
|
||||
"lélektani",
|
||||
"történelmi",
|
||||
"népi"
|
||||
]
|
||||
var szerkezet = [
|
||||
"lineáris",
|
||||
"körkörös",
|
||||
"lineáris",
|
||||
"lineáris",
|
||||
"többszólamú",
|
||||
"többszólamú",
|
||||
"lineáris",
|
||||
"többszólamú",
|
||||
"lineáris"
|
||||
]
|
||||
var balladak;
|
||||
var vers = [], szavak = [];
|
||||
var first = true;
|
||||
var index;
|
||||
|
||||
function init() {
|
||||
balladak = document.getElementById("ballada");
|
||||
for (var i = 0; i < cimek.length; i++) {
|
||||
var option = document.createElement("option");
|
||||
option.text = cimek[i];
|
||||
balladak.add(option);
|
||||
}
|
||||
}
|
||||
|
||||
function loadBallada() {
|
||||
var selected = balladak.options[balladak.selectedIndex].text;
|
||||
if (first) {
|
||||
if (selected != "Ballada kiválasztása...") {
|
||||
balladak.remove(0);
|
||||
document.getElementById("vers").style.paddingBottom = "24px";
|
||||
first = false;
|
||||
}
|
||||
}
|
||||
if (!first) {
|
||||
index = balladak.selectedIndex;
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
vers = this.responseText.split("\r\n");
|
||||
document.getElementById("vers").innerHTML = vers.join("<br>");
|
||||
count();
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", "balladák/" + selected + ".txt", true);
|
||||
xhttp.send();
|
||||
}
|
||||
}
|
||||
|
||||
function count() {
|
||||
szavak = [];
|
||||
var versszak = 0, verssor = 0, soros = vers.indexOf(""), szavakcnt = 0, karakterek = 0, korszak = "";
|
||||
var ev = parseInt(vers[vers.length-1].substring(1,5));
|
||||
if (ev <= 1851) {
|
||||
korszak = "Nagyszalonta";
|
||||
}
|
||||
else if (ev <= 1860) {
|
||||
korszak = "Dalias idők (Nagykőrös)";
|
||||
}
|
||||
else if (ev <= 1882) {
|
||||
korszak = "Őszikék (Pest)";
|
||||
}
|
||||
for (var i = 0; i < vers.length; i++) {
|
||||
if (vers[i] == "") {
|
||||
versszak++;
|
||||
}
|
||||
}
|
||||
verssor = versszak * soros;
|
||||
var sorok = 0;
|
||||
for (var vsz = 0; vsz < versszak; vsz++) {
|
||||
szavak[vsz] = new Array(soros);
|
||||
for (var sor = 0; sor < szavak[vsz].length-1; sor++) {
|
||||
szavak[vsz][sor] = [];
|
||||
szavak[vsz][sor] = vers[sorok].trim().split(' ');
|
||||
szavakcnt += szavak[vsz][sor].length;
|
||||
sorok++;
|
||||
for (var szo = 0; szo < szavak[vsz][sor].length; szo++) {
|
||||
karakterek += szavak[vsz][sor][szo].length;
|
||||
}
|
||||
}
|
||||
sorok++;
|
||||
}
|
||||
console.log("versszak: " + versszak);
|
||||
console.log("versor: " + verssor);
|
||||
console.log("szavak: " + szavakcnt);
|
||||
console.log("karakterek: " + karakterek);
|
||||
console.log("év: " + ev);
|
||||
console.log("korszak: " + korszak);
|
||||
document.getElementById("k").innerHTML = korszak;
|
||||
document.getElementById("t").innerHTML = tema[index];
|
||||
document.getElementById("s").innerHTML = szerkezet[index];
|
||||
document.getElementById("vsz").innerHTML = versszak;
|
||||
document.getElementById("vs").innerHTML = verssor;
|
||||
document.getElementById("kar").innerHTML = karakterek;
|
||||
document.getElementById("vsa").innerHTML = Math.round(karakterek / verssor * 100) / 100;
|
||||
document.getElementById("sza").innerHTML = Math.round(karakterek / versszak * 100) / 100;
|
||||
}
|
||||
103
aranyjanos/balladak.html
Normal file
103
aranyjanos/balladak.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Balladák</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="/AranyJanos/favicon.ico">
|
||||
<script src="ballada.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<header class="header">
|
||||
<h1>Arany János</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="index.html">Főoldal</a>
|
||||
<a class="active" href="balladak.html">Balladák</a>
|
||||
<a href="game.html">Ballada kitaláló</a>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="left">
|
||||
<select id="ballada" onchange="loadBallada()">
|
||||
<option value="">Ballada kiválasztása...</option>
|
||||
</select>
|
||||
<p id="vers"></p>
|
||||
</div>
|
||||
<div id="right">
|
||||
<h2>Ballada adatok</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">A vers szempontjai</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Korszak</th>
|
||||
<td id="k"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Téma</th>
|
||||
<td id="t"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Szerkezet</th>
|
||||
<td id="s"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Statisztikák</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Versszakok száma</th>
|
||||
<td id="vsz"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Verssorok száma</th>
|
||||
<td id="vs"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Karakterek száma (kivéve szóköz)</th>
|
||||
<td id="kar"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Szavak száma sorokban átlag</th>
|
||||
<td id="vsa"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Szavak száma versszakokban átlag</th>
|
||||
<td id="sza"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="vszStat">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="10">Versszakok statisztikái</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="vszNumber">
|
||||
<th colspan="4">Versszakok</th>
|
||||
</tr>
|
||||
<tr id="vszWords">
|
||||
<th colspan="4">Szavak száma</th>
|
||||
</tr>
|
||||
<tr id="vszChaars">
|
||||
<th colspan="4">Karakterek száma</th>
|
||||
</tr>
|
||||
<tr id="vszLine">
|
||||
<th colspan="4">Átlag szó/sor</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<br class="clear" />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
156
aranyjanos/balladák/A walesi bárdok.txt
Normal file
156
aranyjanos/balladák/A walesi bárdok.txt
Normal file
@ -0,0 +1,156 @@
|
||||
Edward király, angol király
|
||||
Léptet fakó lován:
|
||||
Hadd látom, úgymond, mennyit ér
|
||||
A velszi tartomány.
|
||||
|
||||
Van-e ott folyó és földje jó?
|
||||
Legelőin fű kövér?
|
||||
Használt-e a megöntözés:
|
||||
A pártos honfivér?
|
||||
|
||||
S a nép, az istenadta nép,
|
||||
Ha oly boldog-e rajt'
|
||||
Mint akarom, s mint a barom,
|
||||
Melyet igába hajt?
|
||||
|
||||
Felség! valóban koronád
|
||||
Legszebb gyémántja Velsz:
|
||||
Földet, folyót, legelni jót,
|
||||
Hegy-völgyet benne lelsz.
|
||||
|
||||
S a nép, az istenadta nép
|
||||
Oly boldog rajta, Sire!
|
||||
Kunyhói mind hallgatva, mint
|
||||
Megannyi puszta sir.
|
||||
|
||||
Edward király, angol király
|
||||
Léptet fakó lován:
|
||||
Körötte csend amerre ment,
|
||||
És néma tartomány.
|
||||
|
||||
Montgomery a vár neve,
|
||||
Hol aznap este szállt;
|
||||
Montgomery, a vár ura,
|
||||
Vendégli a királyt.
|
||||
|
||||
Vadat és halat, s mi jó falat
|
||||
Szem-szájnak ingere,
|
||||
Sürgő csoport, száz szolga hord,
|
||||
Hogy nézni is tereh;
|
||||
|
||||
S mind, amiket e szép sziget
|
||||
Ételt-italt terem;
|
||||
S mind, ami bor pezsegve forr
|
||||
Túl messzi tengeren.
|
||||
|
||||
Ti urak, ti urak! hát senkisem
|
||||
Koccint értem pohárt?
|
||||
Ti urak, ti urak!... ti velsz ebek!
|
||||
Ne éljen Eduárd?
|
||||
|
||||
Vadat és halat, s mi az ég alatt
|
||||
Szem-szájnak kellemes,
|
||||
Azt látok én: de ördög itt
|
||||
Belül minden nemes.
|
||||
|
||||
Ti urak, ti urak, hitvány ebek!
|
||||
Ne éljen Eduárd?
|
||||
Hol van, ki zengje tetteim -
|
||||
Elő egy velszi bárd!
|
||||
|
||||
Egymásra néz a sok vitéz,
|
||||
A vendég velsz urak;
|
||||
Orcáikon, mint félelem,
|
||||
Sápadt el a harag.
|
||||
|
||||
Szó bennszakad, hang fennakad,
|
||||
Lehellet megszegik. -
|
||||
Ajtó megől fehér galamb,
|
||||
Ősz bárd emelkedik.
|
||||
|
||||
Itt van, király, ki tetteidet
|
||||
Elzengi, mond az agg;
|
||||
S fegyver csörög, haló hörög
|
||||
Amint húrjába csap.
|
||||
|
||||
"Fegyver csörög, haló hörög,
|
||||
A nap vértóba száll,
|
||||
Vérszagra gyűl az éji vad:
|
||||
Te tetted ezt, király!
|
||||
|
||||
Levágva népünk ezrei,
|
||||
Halomba, mint kereszt,
|
||||
Hogy sirva tallóz aki él:
|
||||
Király, te tetted ezt!"
|
||||
|
||||
Máglyára! el! igen kemény -
|
||||
Parancsol Eduárd -
|
||||
Ha! lágyabb ének kell nekünk;
|
||||
S belép egy ifju bárd.
|
||||
|
||||
"Ah! lágyan kél az esti szél
|
||||
Milford-öböl felé;
|
||||
Szüzek siralma, özvegyek
|
||||
Panasza nyög belé.
|
||||
|
||||
Ne szülj rabot, te szűz! anya
|
||||
Ne szoptass csecsemőt!..."
|
||||
S int a király. S elérte még
|
||||
A máglyára menőt.
|
||||
|
||||
De vakmerőn s hivatlanúl
|
||||
Előáll harmadik;
|
||||
Kobzán a dal magára vall,
|
||||
Ez íge hallatik:
|
||||
|
||||
"Elhullt csatában a derék -
|
||||
No halld meg Eduárd:
|
||||
Neved ki diccsel ejtené,
|
||||
Nem él oly velszi bárd.
|
||||
|
||||
Emléke sír a lanton még -
|
||||
No halld meg Eduárd:
|
||||
Átok fejedre minden dal,
|
||||
Melyet zeng velszi bárd."
|
||||
|
||||
Meglátom én! - S parancsot ád
|
||||
Király rettenetest:
|
||||
Máglyára, ki ellenszegűl,
|
||||
Minden velsz énekest!
|
||||
|
||||
Szolgái szét száguldanak,
|
||||
Ország-szerin, tova.
|
||||
Montgomeryben így esett
|
||||
A híres lakoma. -
|
||||
|
||||
S Edward király, angol király
|
||||
Vágtat fakó lován;
|
||||
Körötte ég földszint az ég:
|
||||
A velszi tartomány.
|
||||
|
||||
Ötszáz, bizony, dalolva ment
|
||||
Lángsírba velszi bárd:
|
||||
De egy se birta mondani
|
||||
Hogy: éljen Eduárd. -
|
||||
|
||||
Ha, ha! mi zúg?... mi éji dal
|
||||
London utcáin ez?
|
||||
Felköttetem a lord-majort,
|
||||
Ha bosszant bármi nesz!
|
||||
|
||||
Áll néma csend; légy szárnya bent,
|
||||
Se künn, nem hallatik:
|
||||
"Fejére szól, ki szót emel!
|
||||
Király nem alhatik."
|
||||
|
||||
Ha, ha! elő síp, dob, zene!
|
||||
Harsogjon harsona:
|
||||
Fülembe zúgja átkait
|
||||
A velszi lakoma...
|
||||
|
||||
De túl zenén, túl síp-dobon,
|
||||
Riadó kürtön át:
|
||||
Ötszáz énekli hangosan
|
||||
A vértanúk dalát.
|
||||
|
||||
(1857 jún.)
|
||||
67
aranyjanos/balladák/Az örök zsidó.txt
Normal file
67
aranyjanos/balladák/Az örök zsidó.txt
Normal file
@ -0,0 +1,67 @@
|
||||
Pihenni már. - Nem, nem lehet:
|
||||
Vész és vihar hajt engemet,
|
||||
Alattam a föld nem szilárd,
|
||||
Fejem fölött kétélü bárd...
|
||||
Tovább! tovább!
|
||||
|
||||
Az út, hová talpam nyomul,
|
||||
Sűlyed, ropog, átvékonyul;
|
||||
Ónsúllyal a kolosszi lég
|
||||
Elzúzna, ha megállanék...
|
||||
Tovább! tovább!
|
||||
|
||||
Rettent a perc, a létező,
|
||||
S teher minden következő;
|
||||
Új léptem új kigyón tapod:
|
||||
Gyülölöm a mát s holnapot...
|
||||
Tovább! tovább!
|
||||
|
||||
Éhes vagyok: ennem iszony;
|
||||
Láng az ital, midőn iszom;
|
||||
Álmam szilaj fölrettenés,
|
||||
Kárpit megől szivembe kés...
|
||||
Tovább! tovább!
|
||||
|
||||
S melyet hazud a sivatag,
|
||||
Mint délibáb: tó és patak;
|
||||
Gyümölcs unszol, friss balzsamu:
|
||||
Kivűl arany, belűl hamu...
|
||||
Tovább! tovább!
|
||||
|
||||
Rohannom kell - s a földi boly
|
||||
Mellettem gyorsan visszafoly:
|
||||
Ködfátyol-kép az emberek:
|
||||
Én egy arcot sem ismerek...
|
||||
Tovább! tovább!
|
||||
|
||||
Oh, mily tömeg? s én egyedűl,
|
||||
Útam habár közé vegyül:
|
||||
Érzem, mint csónak a habot,
|
||||
Hogy átmenet mind rám csapott.
|
||||
Tovább! tovább!
|
||||
|
||||
Az üstökös meg' visszatér,
|
||||
Kiröppent nyíl oda is ér,
|
||||
Az eldobott kő megpihen:
|
||||
Én céltalan, én szüntelen
|
||||
Tovább! tovább!
|
||||
|
||||
Pusztán folyam mért nem vagyok,
|
||||
Hogy inna fel aszú homok!
|
||||
Mért nem futó, veszett vihar,
|
||||
Mely ormokon egyszer kihal...
|
||||
Tovább! tovább!
|
||||
|
||||
Irígylem az ágról szakadt
|
||||
Levélkét: hisz majd fennakad;
|
||||
Irígylem az ördögszekért:
|
||||
Árokba hull: céljához ért...
|
||||
Tovább! tovább!
|
||||
|
||||
Szegény zsidó... Szegény szivem:
|
||||
Elébb-utóbb majd megpihen.
|
||||
Az irgalom nagy és örök,
|
||||
Megszán s átkom nem mennydörög:
|
||||
Tovább! tovább!
|
||||
|
||||
(1860)
|
||||
121
aranyjanos/balladák/Híd-avatás.txt
Normal file
121
aranyjanos/balladák/Híd-avatás.txt
Normal file
@ -0,0 +1,121 @@
|
||||
Szólt a fiú: "Kettő, vagy semmi!"
|
||||
És kártya perdül, kártya mén;
|
||||
Bedobta... késő visszavenni:
|
||||
Ez az utolsó tétemény:
|
||||
"Egy fiatal élet-remény."
|
||||
|
||||
A kártya nem "fest", - a fiúnak
|
||||
Vérgyöngy izzad ki homlokán.
|
||||
Tét elveszett!... ő vándorútnak
|
||||
- Most már remény nélkül, magán -
|
||||
Indúl a késő éjszakán.
|
||||
|
||||
Előtte a folyam, az új hid,
|
||||
Még rajta zászlók lengenek:
|
||||
Ma szentelé föl a komoly hit,
|
||||
S vidám zenével körmenet:
|
||||
Nyeré "Szűz-Szent-Margit" nevet.
|
||||
|
||||
Halad középig, hova záros
|
||||
Kapcsát ereszték mesteri;
|
||||
Éjfélt is a négy parti város
|
||||
Tornyában sorra elveri; -
|
||||
Lenn, csillagok száz-ezeri.
|
||||
|
||||
S amint az óra, csengve, bongva,
|
||||
Ki véknyan üt, ki vastagon,
|
||||
S ő néz a visszás csillagokba:
|
||||
Kél egy-egy árnyék a habon:
|
||||
Ősz, gyermek, ifju, hajadon.
|
||||
|
||||
Elébb csak a fej nő ki állig,
|
||||
S körülforog kiváncsian;
|
||||
Majd az egész termet kiválik
|
||||
S ujjonganak mindannyian:
|
||||
"Uj hid! avatni mind! vigan."
|
||||
|
||||
"Jerünk!... ki kezdje? a galamb-pár!"
|
||||
Fehérben ifju és leány
|
||||
Ölelkezik s a hídon van már:
|
||||
"Egymásé a halál után!"
|
||||
S buknak, - mint egykor igazán.
|
||||
|
||||
Taps várja. - "Most a millióson
|
||||
Van a sor: bátran, öregem!" -
|
||||
"Ha megszökött minden adósom:
|
||||
Igy szökni tisztesebb nekem!"
|
||||
S elsímul a víz tükre lenn.
|
||||
|
||||
Hivatlanul is jönnek aztán
|
||||
A harmadik, a negyedik:
|
||||
"Én a quaternót elszalasztám!"
|
||||
"Én a becsűletet, - pedig
|
||||
Viseltem négy évtizedig."
|
||||
|
||||
S kört körre hány a barna hullám,
|
||||
Amint letűnnek, itt vagy ott.
|
||||
Jön egy fiú: "Én most tanúlám
|
||||
Az elsőt; pénzem elfogyott:
|
||||
Nem adtak: ugrom hát nagyot!"
|
||||
|
||||
Egy tisztes agg, fehér szakállal,
|
||||
Lassan a hídra vánszorog:
|
||||
"Hordozta ez, míg birta vállal,
|
||||
A létet: mégis nyomorog! -
|
||||
Fogadd be, nyílt örvény-torok!
|
||||
|
||||
Unalmas arc, félig kifestve -
|
||||
Egy úri nő lomhán kikel:
|
||||
"Ah, kínos élet: reggel, estve
|
||||
Öltözni és vetkezni kell!"
|
||||
Ezt is hullámok nyelik el.
|
||||
|
||||
Nagy zajjal egy dúlt férfi váza
|
||||
Csörtet fel és vigyorgva mond:
|
||||
"Enyém a hadvezéri pálca,
|
||||
Mely megveré Napleont!"
|
||||
A többi sugdos: "a bolond!..."
|
||||
|
||||
Szurtos fiú ennek nyakába
|
||||
Hátul röhögve ott terem
|
||||
S ketten repűlnek a Dunába:
|
||||
"Lábszijjra várt a mesterem:
|
||||
No, várjon, míg megkérlelem!"
|
||||
|
||||
"Én dús vagyok" kiált egy másik
|
||||
S élvezni többé nem tudom! -"
|
||||
"Én hű valék a kézfogásig
|
||||
S elvette Alfréd a hugom'!"
|
||||
Eltűnnek mind, a járt uton.
|
||||
|
||||
"Párbajban ezt én így fogadtam:
|
||||
Menj hát elül, sötét golyó!" --
|
||||
"Én a szemérmet félrehagytam,
|
||||
És íme, az lőn bosszuló:
|
||||
Most vőlegényem a folyó. -"
|
||||
|
||||
Igy, s már nem egyenkint, - seregben,
|
||||
Cikázva, némán ugranak,
|
||||
Mint röpke hal a tengerekben;
|
||||
Vagy mint csoportos madarak
|
||||
Föl-fölreppenve, szállanak.
|
||||
|
||||
Órjás szemekben hull e zápor,
|
||||
Lenn táncol órjás buborék;
|
||||
Félkörben az öngyilkos tábor
|
||||
Zúg fel s le, mint malomkerék;
|
||||
A Duna győzi s adja még.
|
||||
|
||||
Néz a fiú... nem látja többé,
|
||||
Elméje bódult, szeme vak;
|
||||
De, amint sűrübbé, sűrübbé
|
||||
Nő a veszélyes forgatag:
|
||||
Megérzi sodrát, hogy ragad.
|
||||
|
||||
S nincs ellenállás e viharnak, -
|
||||
Széttörni e varázsgyürüt
|
||||
Nincsen hatalma földi karnak. -
|
||||
Mire az óra egyet üt:
|
||||
Üres a híd, - csend mindenütt.
|
||||
|
||||
(1877 aug. 22)
|
||||
96
aranyjanos/balladák/Szondi két apródja.txt
Normal file
96
aranyjanos/balladák/Szondi két apródja.txt
Normal file
@ -0,0 +1,96 @@
|
||||
Felhőbe hanyatlott a drégeli rom,
|
||||
Rá visszasüt a nap, ádáz tusa napja;
|
||||
Szemközt vele nyájas, szép zöld hegy-orom,
|
||||
Tetején lobogós hadi kopja.
|
||||
|
||||
Két ifiu térdel, kezökben a lant,
|
||||
A kopja tövén, mintha volna feszűlet.
|
||||
Zsibongva hadával a völgyben alant
|
||||
Ali győzelem-ünnepet űlet.
|
||||
|
||||
"Mért nem jön a Szondi két dalnoka, mért?
|
||||
Bülbül-szavu rózsák két mennyei bokra?
|
||||
Hadd fűzne dalokból gyöngysorba füzért,
|
||||
Odaillőt egy huri nyakra!"
|
||||
|
||||
"Ott zöldel az ormó, fenn zöldel a hant
|
||||
Zászlós kopiával a gyaur basa sírján:
|
||||
Ott térdel a gyöngypár, kezében a lant,
|
||||
És pengeti, pengeti, sírván."
|
||||
|
||||
...S hogy feljöve Márton, az oroszi pap,
|
||||
Kevély üzenettel a bősz Ali küldte:
|
||||
Add meg kegyelemre, jó Szondi, magad!
|
||||
Meg nem marad itt anyaszülte.
|
||||
|
||||
"Szép úrfiak! immár e puszta halom,
|
||||
E kopja tövén nincs mér' zengeni többet:
|
||||
Jertek velem, ottlenn áll nagy vigalom,
|
||||
Odalenn vár mézizü sörbet. -"
|
||||
|
||||
Mondjad neki, Márton, im ezt felelem:
|
||||
Kegyelmet uradtól nem vár soha Szondi,
|
||||
Jézusa kezében kész a kegyelem:
|
||||
Egyenest oda fog folyamodni.
|
||||
|
||||
"Serbet, füge, pálma, sok déli gyümölcs,
|
||||
Mit csak terem a nagy szultán birodalma.
|
||||
Jó illatu fűszer, és drága kenőcs...
|
||||
Ali győzelem-ünnepe van ma!"
|
||||
|
||||
Hadd zúgjon az álgyu! pogány Ali mond,
|
||||
És pattog a bomba, és röpked a gránát;
|
||||
Minden tüzes ördög népet, falat ont:
|
||||
Töri Drégel sziklai várát.
|
||||
|
||||
"Szép úrfiak! a nap nyugvóra hajolt,
|
||||
Immár födi vállát bíborszinü kaftán,
|
||||
Szél zendül az erdőn, - ott leskel a hold:
|
||||
Idekinn hideg éj sziszeg aztán!"
|
||||
|
||||
A vár piacára ezüstöt, aranyt,
|
||||
Sok nagybecsü marhát máglyába kihordat;
|
||||
Harcos paripái nyihognak alant:
|
||||
Szügyeikben tőrt keze forgat.
|
||||
|
||||
"Aztán - no, hisz úgy volt! aztán elesett!
|
||||
Zászlós kopiával hős Ali temette;
|
||||
Itt nyugszik a halmon, - rövid az eset -;
|
||||
Zengjétek Alit ma helyette!"
|
||||
|
||||
Két dalnoka is volt, két árva fiú:
|
||||
Öltözteti cifrán bársonyba puhába:
|
||||
Nem hagyta cselédit - ezért öli bú -
|
||||
Vele halni meg, ócska ruhába'!
|
||||
|
||||
"S küldött Alihoz... Ali dús, Ali jó;
|
||||
Lány-arcotok' a nap meg nem süti nála;
|
||||
Sátrában alusztok, a széltül is ó:
|
||||
Fiaim, hozzá köt a hála!"
|
||||
|
||||
Hogy vítt ezerekkel! hogy vítt egyedűl!
|
||||
Mint bástya, feszült meg romlott torony alján:
|
||||
Jó kardja előtt a had rendre ledűl,
|
||||
Kelevéze ragyog vala balján.
|
||||
|
||||
"Rusztem maga volt ő!... s hogy harcola még,
|
||||
Bár álgyúgolyótul megtört ina, térde!
|
||||
Én láttam e harcot!... Azonban elég:
|
||||
Ali majd haragunni fog érte."
|
||||
|
||||
Mint hulla a hulla! veszett a pogány,
|
||||
Kő módra befolyván a hegy menedékét:
|
||||
Ő álla halála vérmosta fokán,
|
||||
Diadallal várta be végét.
|
||||
|
||||
"Eh! vége mikor lesz? kifogytok-e már
|
||||
Dícséretiből az otromba gyaurnak?
|
||||
Eb a hite kölykei! vesszeje vár
|
||||
És börtöne kész Ali úrnak."
|
||||
|
||||
Apadjon el a szem, mely célba vevé,
|
||||
Száradjon el a kar, mely őt lefejezte;
|
||||
Irgalmad, oh Isten, ne légyen övé,
|
||||
Ki miatt lőn ily kora veszte!
|
||||
|
||||
(1856 jún.)
|
||||
99
aranyjanos/balladák/Tengerihántás.txt
Normal file
99
aranyjanos/balladák/Tengerihántás.txt
Normal file
@ -0,0 +1,99 @@
|
||||
Ropog a tűz, messze süt a vidékre,
|
||||
Pirosan száll füstje fel a nagy égre;
|
||||
Körülállja egynehány fa,
|
||||
Tovanyúlik rémes árnya;
|
||||
S körül űli a tanyáknak
|
||||
Szép legénye, szép leánya.
|
||||
|
||||
"Szaporán, hé! nagy a rakás; mozogni!
|
||||
Nem is illik összebúva susogni.
|
||||
Ki először piros csőt lel,
|
||||
Lakodalma lesz az ősszel.
|
||||
- Tegyetek rá! hadd lobogjon:
|
||||
Te gyerek, gondolj a tűzzel.
|
||||
|
||||
- Dalos Eszti szép leány volt, de árva.
|
||||
Fiatal még a mezei munkára;
|
||||
Sanyarú volt beleszokni:
|
||||
Napon égni, pirosodni,
|
||||
- Hüvös éj lesz, fogas a szél! -
|
||||
Derekának hajladozni.
|
||||
|
||||
Deli karcsú derekában a salló,
|
||||
Puha lábán nem teve kárt a talló;
|
||||
Mint a búza, piros, teljes,
|
||||
Kerek arca, maga mellyes,
|
||||
- Teli a hold, most buvik fel -
|
||||
Az egész lyány ugyan helyes.
|
||||
|
||||
Tuba Ferkó juhot őriz a tájon:
|
||||
Juha mételyt legel a rossz lapályon,
|
||||
Maga oly bús... mi nem éri?
|
||||
Furulyája mindig sí-ri,
|
||||
- Aha! rókát hajt a Bodré -
|
||||
Dalos Esztert úgy kiséri.
|
||||
|
||||
Dalos Eszti - a mezőre kiment ő,
|
||||
Aratókkal puha fűvön pihent ő;
|
||||
De ha álom ért reájok,
|
||||
Odahagyta kis tanyájok'
|
||||
- Töri a vadkan az "irtást" -
|
||||
Ne tegyétek, ti leányok!
|
||||
|
||||
Szederinda gyolcs ruháját szakasztja,
|
||||
Tövis, talló piros vérit fakasztja;
|
||||
Hova jár, mint kósza lélek,
|
||||
Ha alusznak más cselédek?...
|
||||
- Soha, mennyi csillag hull ma! -
|
||||
Ti, leányok, ne tegyétek.
|
||||
|
||||
Tuba Ferkó a legelőt megúnta,
|
||||
Tovahajtott, furulyáját se fútta;
|
||||
Dalos Eszter nem kiséri,
|
||||
Maga halvány, dala sí-rí:
|
||||
- Nagy a harmat, esik egyre -
|
||||
Csak az isten tudja, mér' rí.
|
||||
|
||||
Szomorún jár, tébolyog a mezőben,
|
||||
Nem is áll jól semmi dolog kezében;
|
||||
Éje hosszú, napja bágyadt,
|
||||
Szive sóhajt - csak egy vágyat:
|
||||
- De suhogjon az a munka! -
|
||||
Te, halál, vess puha ágyat.
|
||||
|
||||
Ködös őszre vált az idő azonban,
|
||||
Törik is már a tengerit Adonyban;
|
||||
Dalos Eszter csak nem jött ki:
|
||||
Temetőbe költözött ki;
|
||||
- Az a Lombár nagy harangja! -
|
||||
Ne gyalázza érte senki.
|
||||
|
||||
Tuba Ferkó hazakerűlt sokára,
|
||||
Dalos Esztit hallja szegényt, hogy jára;
|
||||
Ki-kimén a temetőbe
|
||||
Rossz időbe', jó időbe':
|
||||
- Kuvikol már, az ebanyja! -
|
||||
"Itt nyugosznak, fagyos földbe."
|
||||
|
||||
Maga Ferkó nem nyughatik az ágyon,
|
||||
Behunyt szemmel jár-kel a holdvilágon,
|
||||
Muzsikát hall nagy-fenn, messze,
|
||||
Dalos Eszti hangja közte,
|
||||
- Ne aludj, hé! vele álmodsz -
|
||||
Azt danolja: "gyere! jöszte!"
|
||||
|
||||
Nosza Ferkó, felszalad a boglyára,
|
||||
Azután a falu hegyes tornyára;
|
||||
Kapaszkodnék, de nem éri,
|
||||
Feje szédűl: mi nem éri?...
|
||||
- Tizenkettőt ver Adonyban:
|
||||
Elég is volt ma regélni. -"
|
||||
|
||||
Lohad a tűz; a legények subába -
|
||||
Összebúnak a leányok csuhába;
|
||||
Magasan a levegőben
|
||||
Repül egy nagy lepedő fenn:
|
||||
Azon ülve muzsikálnak,
|
||||
Furulyálnak, eltünőben.
|
||||
|
||||
(1877 júl. 15)
|
||||
97
aranyjanos/balladák/Tetemre hívás.txt
Normal file
97
aranyjanos/balladák/Tetemre hívás.txt
Normal file
@ -0,0 +1,97 @@
|
||||
A radványi sötét erdőben
|
||||
Halva találták Bárczi Benőt.
|
||||
Hosszu hegyes tőr ifju szivében;
|
||||
"Ime, bizonyság Isten előtt:
|
||||
Gyilkos erőszak ölte meg őt!"
|
||||
|
||||
Kastélyába vitette föl atyja,
|
||||
Ott letevék a hűs palotán;
|
||||
Ki se terítteti, meg se mosatja:
|
||||
Vérben, ahogy volt, nap nap után
|
||||
Hever egyszerű ravatalán.
|
||||
|
||||
Állata őrzeni négy alabárdost:
|
||||
"Lélek ez ajtón se be, se ki..."
|
||||
"Hátha az anyja, szép huga már most
|
||||
Jönne siratni?" - "Vissza neki;
|
||||
Jaj, ki parancsom, élve, szegi!"
|
||||
|
||||
Fojtva, teremről rejti teremre
|
||||
Halk zokogását asszonyi bú. -
|
||||
Maga, pecséttel, "hívja tetemre"
|
||||
Kit szemre vesz, ölyvként, sanda gyanú:
|
||||
Legyen a seb vérzése tanú.
|
||||
|
||||
A palotát fedi fekete posztó,
|
||||
Déli verőn sem süt oda nap;
|
||||
Áll a tetemnél tiszti pörosztó,
|
||||
Gyertya, feszűlet, kánoni pap:
|
||||
Sárga viaszfényt nyughelye kap.
|
||||
|
||||
"Jöjjenek ellenségi, ha voltak!"
|
||||
Jő, kit az apja rendre nevez;
|
||||
Hiába! nem indul sebe a holtnak
|
||||
Állva fejénél az, vagy emez:
|
||||
"Gyilkosa hát nem ez... újra nem ez."
|
||||
|
||||
"Hát ki?..." riad fel Bárczi sötéten,
|
||||
"Boszulatlan nem foly ez ösi vér;
|
||||
Ide a gyilkost!... bárha pecsétem
|
||||
Váddal az önnön szívemig ér:
|
||||
Mindenki gyanús nekem, aki él!"
|
||||
|
||||
"Jöjjenek úgy hát ifju baráti!"
|
||||
Sorra belépdel sok dalia:
|
||||
Fáj nekik a hőst véribe' látni,
|
||||
S nem harc mezején elomlania.
|
||||
Erre se vérzik Bárczi fia.
|
||||
|
||||
"Jöjjön az udvar! apraja, nagyja...
|
||||
Jöjjön elő Bárc, a falu, mind!"
|
||||
Megkönnyezetlen senki se hagyja,
|
||||
Kedves urára szánva tekint.
|
||||
Nem fakad a seb könnyre megint.
|
||||
|
||||
"Jöjjön az anyja! hajadon húga!"
|
||||
Künn a leány, már messze, sikolt;
|
||||
Anyja reárogy, öleli búgva:
|
||||
Mindre nem érez semmit a holt:
|
||||
Marad a tört vér - fekete folt.
|
||||
|
||||
"Jöjjön utolszor szép szeretője,
|
||||
Titkos arája, Kund Abigél!"
|
||||
Jő; - szeme villan s tapad a tőrre,
|
||||
Arca szobor lett, lába gyökér.
|
||||
- Sebből pirosan buzog a vér.
|
||||
|
||||
Könnye se perdűl, jajja se hallik,
|
||||
Csak odakap, hol fészkel az agy:
|
||||
Iszonyu az, mi oda nyilallik!...
|
||||
Döbbenet által a szív ere fagy:
|
||||
"Lyányom, ez ifjú gyilkosa vagy!"
|
||||
|
||||
Kétszeri mondást - mint lebüvölten -
|
||||
Hallgat el, aztán így rebegi:
|
||||
"Bárczi Benőt én meg nem öltem
|
||||
Tanum az Ég, s minden seregi!
|
||||
Hanem e tőrt én adtam neki.
|
||||
|
||||
Bírta szivem' már hű szerelemre -
|
||||
Tudhatta, közöttünk nem vala gát:
|
||||
Unszola mégis szóval "igenre",
|
||||
Mert ha nem: ő kivégzi magát.
|
||||
Enyelegve adám a tőrt: nosza hát!"
|
||||
|
||||
S vadul a sebből a tőrt kiragadja,
|
||||
Szeme szokatlan lángot lövell,
|
||||
Kacag és sír, s fennvillogtatja
|
||||
S vércse-visongással rohan el.
|
||||
Vetni kezet rá senki se mer.
|
||||
|
||||
Odakinn lefut a nyilt utca során,
|
||||
Táncolni, dalolni se szégyell;
|
||||
Dala víg: "Egyszer volt egy leány,
|
||||
Ki csak úgy játszott a legénnyel,
|
||||
Mint macska szokott az egérrel!"
|
||||
|
||||
(1877 okt. 27)
|
||||
91
aranyjanos/balladák/V. László.txt
Normal file
91
aranyjanos/balladák/V. László.txt
Normal file
@ -0,0 +1,91 @@
|
||||
Sűrű setét az éj,
|
||||
Dühöng a déli szél,
|
||||
Jó Budavár magas
|
||||
Tornyán az érckakas
|
||||
Csikorog élesen.
|
||||
|
||||
"Ki az? mi az? vagy úgy -"
|
||||
"Fordulj be és alugy
|
||||
Uram László király:
|
||||
A zápor majd eláll,
|
||||
Az veri ablakod."
|
||||
|
||||
A felhő megszakad,
|
||||
Nyilása tűz, patak;
|
||||
Zúgó sebes özönt
|
||||
A rézcsatorna önt
|
||||
Budának tornyiról.
|
||||
|
||||
"Miért zúg a tömeg?
|
||||
Kivánja eskümet?"
|
||||
"A nép, uram király,
|
||||
Csendes, mint a halál,
|
||||
Csupán a menny dörög."
|
||||
|
||||
Megcsörren a bilincs,
|
||||
Lehull, gazdája nincs:
|
||||
Buda falán a rab
|
||||
- Egy-egy felhődarab -
|
||||
Ereszkedik alá.
|
||||
|
||||
"Hah! láncát tépi a
|
||||
Hunyadi két fia -"
|
||||
"Uram, uram, ne félj!
|
||||
László, tudod, nem él
|
||||
S a gyermek, az fogoly."
|
||||
|
||||
Mélyen a vár alatt
|
||||
Vonúl egy kis csapat;
|
||||
Olyan rettegve lép,
|
||||
Most lopja életét...
|
||||
Kanizsa, Rozgonyi.
|
||||
|
||||
"Kettőzni kell az őrt,
|
||||
Kivált Mátyás előtt!"
|
||||
"Mátyás, az itt maradt,
|
||||
Hanem a többi rab -
|
||||
Nincsen, uram, sehol."
|
||||
|
||||
A felhő kimerült,
|
||||
A szélvihar elült,
|
||||
Lágyan zsongó habok
|
||||
Ezer kis csillagot
|
||||
Rengetnek a Dunán.
|
||||
|
||||
"El! míg lehet s szabad!
|
||||
Cseh-földön biztosabb."
|
||||
"Miért e félelem?
|
||||
Hallgat minden elem
|
||||
Ég s föld határa közt."
|
||||
|
||||
Az alvó aluszik,
|
||||
A bujdosó buvik;
|
||||
Ha zörren egy levél,
|
||||
Poroszlót jőni vél
|
||||
Kanizsa, Rozgonyi.
|
||||
|
||||
"Messze még a határ?
|
||||
Minden perc egy halál!"
|
||||
"Legitten átkelünk,
|
||||
Ne félj uram: velünk
|
||||
A gyermek, a fogoly."
|
||||
|
||||
Az alvó felvirad,
|
||||
A bujdosó riad;
|
||||
Szellő sincsen, de zúg,
|
||||
Felhő sincsen, de búg
|
||||
S villámlik messziről.
|
||||
|
||||
"Oh adj, oh adj nekem
|
||||
Hűs cseppet, hű csehem!"
|
||||
"Itt a kehely, igyál,
|
||||
Uram, László király,
|
||||
Enyhít... mikép a sír!"
|
||||
|
||||
Állj meg, bosszú, megállj:
|
||||
Cseh földön ül a rab;
|
||||
Cseh földben a király,
|
||||
Mindég is ott marad,
|
||||
De visszajő a rab...!
|
||||
|
||||
(1853)
|
||||
105
aranyjanos/balladák/Vörös Rébék.txt
Normal file
105
aranyjanos/balladák/Vörös Rébék.txt
Normal file
@ -0,0 +1,105 @@
|
||||
"Vörös Rébék általment a
|
||||
Keskeny pallón s elrepült -"
|
||||
Tollászkodni, már mint varju,
|
||||
Egy jegenyefára űlt.
|
||||
Akinek azt mondja: kár!
|
||||
Nagy baj éri és nagy kár:
|
||||
Hess, madár!
|
||||
|
||||
Ő volt az, ki addig főzte
|
||||
Pörge Dani bocskorát,
|
||||
Míg elvette a Sinkóék
|
||||
Cifra lányát, a Terát.
|
||||
De most bezzeg bánja már,
|
||||
Váltig hajtja: kár volt, kár!
|
||||
Hess, madár!
|
||||
|
||||
Pörge Dani most őbenne
|
||||
Ha elbotlik se köszön,
|
||||
S ha ott kapja, kibuktatja
|
||||
Orrával a küszöbön.
|
||||
Pedig titkon oda jár,
|
||||
Szép asszonynak mondja: kár!
|
||||
Hess, madár!
|
||||
|
||||
Cifra asszony színes szóra
|
||||
Tetteti, hogy mit se hajt:
|
||||
"Kend meg köztünk ne csináljon
|
||||
Háborodást, házi bajt,
|
||||
Nem vagyok én csapodár."
|
||||
Rebi néni mondja: kár!
|
||||
Hess, madár!
|
||||
|
||||
Másszor is jön, hoz fehér pénzt,
|
||||
Piros kendőt s egyebet:
|
||||
"Nesze, lyányom? e mézes bor
|
||||
Erősítse a szived:
|
||||
Szépnek úgy nem tenni kár!"
|
||||
- "Hadd jöjjön hát a kasznár."
|
||||
Hess, madár!
|
||||
|
||||
Háborúság, házi patvar
|
||||
Attól kezdve van elég;
|
||||
De nem hallik a szomszédba:
|
||||
Pörge Dani tűri még.
|
||||
A bölcső is ott van már:
|
||||
Künn egy varju mondja: kár!
|
||||
Hess, madár!
|
||||
|
||||
"Asszony, ördög! vidd apádnak
|
||||
Haza ezt a gyermeket -
|
||||
Ne! a varjut (hol a puskám?)
|
||||
Útra meglövöm neked."
|
||||
Varju azt se mondja: kár!
|
||||
El sem is rebbenti már:
|
||||
"Hess, madár!
|
||||
|
||||
Híre terjed a helységben:.
|
||||
"Tudjátok, mi az eset?
|
||||
Pörge Dani egy varjút lőtt
|
||||
S Rebi néni leesett!"
|
||||
Rebi lelke nem vón' kár:
|
||||
De, mint varju, visszajár
|
||||
Hess, madár!
|
||||
|
||||
Gyilkost a törvény nyomozza;
|
||||
Szegény Dani mit tegyen?
|
||||
Útnak indul, bujdosásnak,
|
||||
Keskeny pallón átmegyen.
|
||||
Szembe jött rá a kasznár.
|
||||
Varju elkiáltja: kár!
|
||||
Hess, madár!
|
||||
|
||||
Keskeny a palló kettőnek:
|
||||
Nem térhet ki a Dani;
|
||||
Egy billentés: lent a vízben
|
||||
Nagyot csobban valami.
|
||||
Sok eső volt: mély az ár.
|
||||
Varju látja, mondja: kár!
|
||||
Hess, madár!
|
||||
|
||||
Bujdosónak kín az élte;
|
||||
Reszket, ha levél zörög:
|
||||
Felvont sárkányt vesz kezébe,
|
||||
Hajtja éh: "megállj, görög!"
|
||||
Varjú mind' kiséri: "kár!...
|
||||
Fennakadsz te, szép betyár!"
|
||||
"Hess, madár!"
|
||||
|
||||
"Most ebédre, hollók, varjak
|
||||
Seregestül, aki van!
|
||||
De szemét ne bántsa senki:
|
||||
Azzal elbánok magam."
|
||||
Fekete volt; mint bogár:
|
||||
Asszony ott sír: "mégis kár!
|
||||
Hess, madár!"
|
||||
|
||||
Vörös Rébék általment a
|
||||
Keskeny pallón: most repűl;
|
||||
Egy varjúból a másikba
|
||||
Száll a lelke, vég ne'kül
|
||||
S kinek ő azt mondja: kár!
|
||||
Nagy baj éri és nagy kár.
|
||||
Hess, madár!
|
||||
|
||||
(1877 szept. 26)
|
||||
157
aranyjanos/balladák/Ágnes asszony.txt
Normal file
157
aranyjanos/balladák/Ágnes asszony.txt
Normal file
@ -0,0 +1,157 @@
|
||||
Ágnes asszony a patakban
|
||||
Fehér lepedőjét mossa;
|
||||
Fehér leplét, véres leplét
|
||||
A futó hab elkapdossa.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Odagyűl az utcagyermek:
|
||||
Ágnes asszony, mit mos kelmed?
|
||||
"Csitt te, csitt te! csibém vére
|
||||
Keveré el a gyolcs leplet."
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Összefutnak a szomszédnők:
|
||||
Ágnes asszony, hol a férjed?
|
||||
"Csillagom, hisz ottbenn alszik!
|
||||
Ne menjünk be, mert fölébred."
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Jön a hajdu: Ágnes asszony,
|
||||
A tömlöcbe gyere mostan.
|
||||
"Jaj, galambom, hogy' mehetnék,
|
||||
Míg e foltot ki nem mostam!"
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Mély a börtön: egy sugár-szál
|
||||
Odaférni alig képes;
|
||||
Egy sugár a börtön napja,
|
||||
Éje pedig rémtül népes.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Szegény Ágnes naphosszanta
|
||||
Néz e kis világgal szembe,
|
||||
Néz merően, - a sugárka
|
||||
Mind belefér egy fél szembe.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Mert, alighogy félre fordul,
|
||||
Rémek tánca van körűle;
|
||||
Ha ez a kis fény nem volna,
|
||||
Úgy gondolja: megőrülne.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Ím azonban, időtelve,
|
||||
Börtönének zárja nyílik:
|
||||
Ágnes a törvény előtt
|
||||
Megáll szépen, ahogy illik.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Öltözetjét rendbe hozza,
|
||||
Kendőjére fordít gondot,
|
||||
Szöghaját is megsimítja
|
||||
Nehogy azt higgyék: megbomlott.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Hogy belép, a zöld asztalnál
|
||||
Tisztes őszek ülnek sorra;
|
||||
Szánalommal néznek ő rá,
|
||||
Egy se mérges, vagy mogorva.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
"Fiam, Ágnes, mit miveltél?
|
||||
Szörnyü a bűn, terhes a vád;
|
||||
Ki a tettet végrehajtá
|
||||
Szeretőd ím maga vall rád."
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
"Ő bitón fog veszni holnap,
|
||||
Ő, ki férjedet megölte;
|
||||
Holtig vizen és kenyéren
|
||||
Raboskodva bünhödöl te."
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Körültekint Ágnes asszony,
|
||||
Meggyőződni ép eszérül;
|
||||
Hallja a hangot, érti a szót,
|
||||
S míg azt érti: "meg nem őrül."
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
De amit férjéről mondtak
|
||||
A szó oly visszásan tetszik;
|
||||
Az világos csak, hogy őt
|
||||
Haza többé nem eresztik.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Nosza sírni, kezd zokogni,
|
||||
Sűrü záporkönnye folyván:
|
||||
Liliomról pergő harmat,
|
||||
Hulló vizgyöngy hattyu tollán.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
"Méltóságos nagy uraim!
|
||||
Nézzen Istent kegyelmetek:
|
||||
Sürgetős munkám van otthon,
|
||||
Fogva én itt nem űlhetek."
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
"Mocsok esett lepedőmön,
|
||||
Ki kell a vérfoltot vennem!
|
||||
Jaj, ha e szenny ott maradna,
|
||||
Hová kéne akkor lennem!"
|
||||
Oh! irgalom atyja ne hagyj el.
|
||||
|
||||
Összenéz a bölcs törvényszék
|
||||
Hallatára ily panasznak.
|
||||
Csendesség van. Hallgat a száj,
|
||||
Csupán a szemek szavaznak.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
"Eredj haza, szegény asszony!
|
||||
Mosd fehérre mocskos lepled;
|
||||
Eredj haza, Isten adjon
|
||||
Erőt ahhoz és kegyelmet."
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
S Ágnes asszony a patakban
|
||||
Lepedőjét újra mossa;
|
||||
Fehér leplét, tiszta leplét
|
||||
A futó hab elkapdossa.
|
||||
Oh! irgalom atyja, ne hagyj el
|
||||
|
||||
Mert hiában tiszta a gyolcs,
|
||||
Benne többé semmi vérjel:
|
||||
Ágnes azt még egyre látja
|
||||
S épen úgy, mint akkor éjjel.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Virradattól késő estig
|
||||
Áll a vízben, széke mellett:
|
||||
Hab zilálja rezgő árnyát,
|
||||
Haja fürtét kósza szellet.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Holdvilágos éjjelenkint,
|
||||
Mikor a víz fodra csillog,
|
||||
Maradozó csattanással,
|
||||
Fehér sulyka messze villog.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
És ez így megy évrül-évre;
|
||||
Télen-nyáron, szünet nélkül;
|
||||
Harmat-arca hő napon ég,
|
||||
Gyönge térde fagyban kékül.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
Őszbe fordul a zilált haj,
|
||||
Már nem holló, nem is ében;
|
||||
Torz-alakú ránc verődik
|
||||
Szanaszét a síma képen.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
S Ágnes asszony a patakban
|
||||
Régi rongyát mossa, mossa -
|
||||
Fehér leple foszlányait
|
||||
A szilaj hab elkapdossa.
|
||||
Oh! irgalom atyja, ne hagyj el.
|
||||
|
||||
(1853)
|
||||
BIN
aranyjanos/favicon.ico
Normal file
BIN
aranyjanos/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
52
aranyjanos/game.html
Normal file
52
aranyjanos/game.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Arany János</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="/AranyJanos/favicon.ico">
|
||||
<script src="game.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<header class="header">
|
||||
<h1>Arany János</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="index.html">Főoldal</a>
|
||||
<a href="balladak.html">Balladák</a>
|
||||
<a class="active" href="game.html">Ballada kitaláló</a>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="mainmenu">
|
||||
<h2>Ballada kitaláló</h2>
|
||||
<p>A weboldal fog mutatni 2 random sort 9 balladából (
|
||||
A walesi bárdok,
|
||||
Ágnes asszony,
|
||||
Az örök zsidó,
|
||||
Híd-avatás,
|
||||
Szondi két apródja,
|
||||
Tengerihántás,
|
||||
Tetemre hívás,
|
||||
V. László,
|
||||
Vörös Rébék
|
||||
) és 4 lehetőség közül ki kell választani, melyik balladába tartozik. Helyes válasz: +1 pont</p>
|
||||
<p>10 kérdés lesz, de van végtelen mód is. Ha nem vagyunk biztosak benne, melyik balladába van a 2 sor van segítség, ami további sorokat mutat meg a balladából, de akkor csak fél pontot kapunk helyes válasz esetén.</p>
|
||||
<input type="button" onclick="start()" value="Játék Indítása">
|
||||
</div>
|
||||
<div id="game" hidden>
|
||||
<div id="topbar">
|
||||
<h2 id="pont">Pontok: 0</h2>
|
||||
<h2 id="feladat">0. kör</h2>
|
||||
<input id="help" type="button" value="Segítség">
|
||||
<input id="newgame" onclick="start()" type="button" value="Új játék" hidden="true">
|
||||
</div>
|
||||
<div id="idezet">
|
||||
<p id="resz"></p>
|
||||
</div>
|
||||
<div id="answers">
|
||||
<!--buttons-->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
139
aranyjanos/game.js
Normal file
139
aranyjanos/game.js
Normal file
@ -0,0 +1,139 @@
|
||||
var cimek = [
|
||||
"A walesi bárdok",
|
||||
"Ágnes asszony",
|
||||
"Az örök zsidó",
|
||||
"Híd-avatás",
|
||||
"Szondi két apródja",
|
||||
"Tengerihántás",
|
||||
"Tetemre hívás",
|
||||
"V. László",
|
||||
"Vörös Rébék"
|
||||
];
|
||||
|
||||
var balladak = [];
|
||||
|
||||
function init() {
|
||||
for (var i = 0; i < 4; i++) {
|
||||
let btn = document.createElement("input");
|
||||
btn.type = "button";
|
||||
btn.id = "btn" + i;
|
||||
btn.setAttribute("onclick", "answer(" + i + ")");
|
||||
document.getElementById("answers").appendChild(btn);
|
||||
}
|
||||
loadBallada(0);
|
||||
|
||||
}
|
||||
|
||||
function loadBallada(index) {
|
||||
if (index < cimek.length) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
let vers = this.responseText.split("\r\n");
|
||||
buildBallada(vers, index);
|
||||
index++;
|
||||
loadBallada(index);
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", "balladák/" + cimek[index] + ".txt", true);
|
||||
xhttp.send();
|
||||
}
|
||||
}
|
||||
|
||||
function buildBallada(vers, i) {
|
||||
let versszak = 0;
|
||||
for (var j = 0; j < vers.length; j++) {
|
||||
if (vers[j] == "") {
|
||||
versszak++;
|
||||
}
|
||||
}
|
||||
let sorok = 0;
|
||||
balladak[i] = new Array(versszak);
|
||||
for (var vsz = 0; vsz < versszak; vsz++) {
|
||||
balladak[i][vsz] = new Array(vers.indexOf(""));
|
||||
for (var sor = 0; sor < balladak[i][vsz].length; sor++) {
|
||||
// console.log(sor + " " + sorok);
|
||||
balladak[i][vsz][sor] = vers[sorok];
|
||||
sorok++;
|
||||
}
|
||||
sorok++;
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
console.log("started");
|
||||
document.getElementById("mainmenu").hidden = true;
|
||||
document.getElementById("game").hidden = false;
|
||||
document.getElementById("newgame").hidden = true;
|
||||
document.getElementById("pont").innerHTML = "Pontok: 0";
|
||||
round = 0;
|
||||
score = 0;
|
||||
nextRound();
|
||||
}
|
||||
|
||||
var ballada, versszak;
|
||||
var correctBallada;
|
||||
var nums = [];
|
||||
var round = 0;
|
||||
var helped = false;
|
||||
var score = 0;
|
||||
|
||||
function nextRound() {
|
||||
round++;
|
||||
document.getElementById("help").disabled = false;
|
||||
document.getElementById("help").value = "Segítség";
|
||||
document.getElementById("help").setAttribute("onclick", "help()");
|
||||
helped = false;
|
||||
for (var i = 0; i < 4; i++) {
|
||||
document.getElementById("btn" + i).style = "";
|
||||
document.getElementById("btn" + i).disabled = false;
|
||||
}
|
||||
document.getElementById("feladat").innerHTML = round + ". kör"
|
||||
ballada = Math.floor(Math.random() * balladak.length);
|
||||
versszak = Math.floor(Math.random() * balladak[ballada].length);
|
||||
document.getElementById("resz").innerHTML = balladak[ballada][versszak][0] + "<br>" + balladak[ballada][versszak][1];
|
||||
correctBallada = Math.floor(Math.random() * 4);
|
||||
for (var i = 0; i < cimek.length; i++) {
|
||||
nums[i] = i;
|
||||
}
|
||||
writeAnswer(0, correctBallada, ballada);
|
||||
}
|
||||
|
||||
function writeAnswer(a, b, i) {
|
||||
if (a < 4) {
|
||||
document.getElementById("btn" + (b % 4)).value = cimek[i];
|
||||
nums.splice(nums.indexOf(i), 1);
|
||||
// console.log((b % 4) + " " + i);
|
||||
// console.log(nums);
|
||||
a++;
|
||||
b++;
|
||||
writeAnswer(a, b, nums[Math.floor(Math.random() * nums.length)]);
|
||||
}
|
||||
}
|
||||
|
||||
function answer(answ) {
|
||||
if (answ == correctBallada) {
|
||||
score = helped ? score + 0.5 : score + 1;
|
||||
}
|
||||
else {
|
||||
document.getElementById("btn" + answ).style.backgroundColor = "red";
|
||||
}
|
||||
document.getElementById("btn" + correctBallada).style.backgroundColor = "lime";
|
||||
document.getElementById("pont").innerHTML = "Pontok: " + score;
|
||||
document.getElementById("help").value = round < 10 ? "Következő" : "Végtelen";
|
||||
document.getElementById("help").setAttribute("onclick", "nextRound()");
|
||||
document.getElementById("help").disabled = false;
|
||||
for (var i = 0; i < 4; i++) {
|
||||
document.getElementById("btn" + i).disabled = true;
|
||||
}
|
||||
if (round == 10) {
|
||||
alert("Elért pontszám: " + score + "/10");
|
||||
document.getElementById("newgame").hidden = false;
|
||||
}
|
||||
}
|
||||
|
||||
function help() {
|
||||
helped = true;
|
||||
document.getElementById("resz").innerHTML = balladak[ballada][versszak].join("<br>");
|
||||
document.getElementById("help").disabled = true;
|
||||
}
|
||||
22
aranyjanos/index.html
Normal file
22
aranyjanos/index.html
Normal file
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Arany János</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="/AranyJanos/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<h1>Arany János</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<a class="active" href="index.html">Főoldal</a>
|
||||
<a href="balladak.html">Balladák</a>
|
||||
<a href="game.html">Ballada kitaláló</a>
|
||||
</nav>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
244
aranyjanos/style.css
Normal file
244
aranyjanos/style.css
Normal file
@ -0,0 +1,244 @@
|
||||
:focus {outline:none;}
|
||||
::-moz-focus-inner {border:0;}
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 10px 10%;
|
||||
background-color: #aaa;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-family: cursive;
|
||||
font-size: 50px;
|
||||
color: gold;
|
||||
text-shadow: 2px 2px 8px black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #eee;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
nav {
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
nav a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #eee;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#vers {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-family: serif;
|
||||
padding: 0 24px;
|
||||
background-color: white;
|
||||
border-left: solid #aaa 4px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
#left {
|
||||
width: 40%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#right {
|
||||
width: 40%;
|
||||
display:inline-block;
|
||||
float: right;
|
||||
margin: 0 10%;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
thead > tr > th {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-bottom: solid 2px black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tbody > tr > th {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: right;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
#vszStat > tbody > tr > th, #vszStat > tbody > tr > td {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-family: serif;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
border-left: solid #aaa 4px;
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear:both;
|
||||
line-height:0;
|
||||
}
|
||||
|
||||
#mainmenu {
|
||||
padding: 72px;
|
||||
}
|
||||
|
||||
#mainmenu p {
|
||||
text-align: justify;
|
||||
width: 50%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
#mainmenu input {
|
||||
display: block;
|
||||
font-family: Arial;
|
||||
width: 50%;
|
||||
height: 72px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
background-color: aqua;
|
||||
border: solid 1px black;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#mainmenu input:enabled:hover {
|
||||
background-color: DeepSkyBlue;
|
||||
}
|
||||
|
||||
#game {
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
padding-top: 72px;
|
||||
padding-bottom: 72px;
|
||||
}
|
||||
|
||||
#answers input {
|
||||
font-family: Arial;
|
||||
width: 23%;
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
background-color: aqua;
|
||||
border: solid 1px black;
|
||||
margin: 0 1%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#answers input:enabled:hover {
|
||||
background-color: DeepSkyBlue;
|
||||
}
|
||||
|
||||
#help, #newgame {
|
||||
font-family: Arial;
|
||||
width: 96px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
border: solid 1px black;
|
||||
margin-right: 1%;
|
||||
}
|
||||
|
||||
#help {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
|
||||
#newgame {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
#help:enabled:hover {
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
#newgame:enabled:hover {
|
||||
background-color: gold;
|
||||
}
|
||||
|
||||
input:enabled {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: black;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#pont, #feladat {
|
||||
display: inline-block;
|
||||
width: 33%;
|
||||
margin: 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
#pont {
|
||||
text-align: left;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
#resz {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
margin: 72px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#idezet {
|
||||
text-align: center;
|
||||
margin: 1% 0;
|
||||
border-top: solid 2px #aaa;
|
||||
border-bottom: solid 2px #aaa;
|
||||
}
|
||||
73
erzekelo/index.html
Normal file
73
erzekelo/index.html
Normal file
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
|
||||
<meta name="description" content="Bitfaragó - HoBITek" />
|
||||
<meta name="keywords" content="Bitfaragó, HobBITek, 3.forduló," />
|
||||
<meta name="author" content="Baldauf Márton, Nyikon zoltán, Sárközi Balázs" />
|
||||
<meta property="og:title" content="Bitfaragó - verseny" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="" />
|
||||
<meta property="og:description" content="Bitfaragó - HobBITek, 3.forduló" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="300" />
|
||||
<meta property="og:image:height" content="300" />
|
||||
<meta name="revisit-after" content="7 days" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Cache-Control" content="no-cache" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="googlebot" content="index, follow" />
|
||||
<meta name="google" content="notranslate" />
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<title>Bitfaragó - 3. forduló</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
|
||||
<script type="text/javascript" src="javascript.js"></script>
|
||||
</head>
|
||||
<body onload="getSensor()">
|
||||
<header>
|
||||
<div class="menu">
|
||||
<div class="text">
|
||||
Szenzorok látómezőinek megjelenítése
|
||||
</div>
|
||||
<label class="switch">
|
||||
<input id="fovswitch" type="checkbox" checked="true" onchange="fovonoff()">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<div class="">
|
||||
<p>A mozgatás módjáról és lehetőségeiről használd a <a href="#" id="myBtn">segédletet</a>.</p>
|
||||
</div>
|
||||
<div class="text">
|
||||
Version 1 - Version 2
|
||||
</div>
|
||||
<label class="switch">
|
||||
<input id="versionswitch" type="checkbox" onchange="versionPicker()">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<div id="myModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<span class="close">×</span>
|
||||
<h2>Segédlet</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>A pont mozgatásához használd a nyilakat. A nyilak segítségével jobbra-balra, le-fel tudsz mozogni.</p>
|
||||
</div>
|
||||
<!-- <div class="modal-footer">
|
||||
<h3>Modal Footer</h3>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<article class="">
|
||||
<canvas id="myCanvas" width="500" height="500"></canvas>
|
||||
</article>
|
||||
<footer>
|
||||
HoBITek © | 2019 okt. 21
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
371
erzekelo/javascript.js
Normal file
371
erzekelo/javascript.js
Normal file
@ -0,0 +1,371 @@
|
||||
class Sensor {
|
||||
constructor(id, posx, posy, angle, anglerad) {
|
||||
this.id= id;
|
||||
this.posx=posx;
|
||||
this.posy=posy;
|
||||
this.angle=angle;
|
||||
this.anglerad = anglerad;
|
||||
}
|
||||
}
|
||||
|
||||
class Ray {
|
||||
constructor(id, signal, angle){
|
||||
this.id = id;
|
||||
this.signal = signal;
|
||||
this.angle = angle;
|
||||
}
|
||||
}
|
||||
|
||||
var sensorData ="";
|
||||
var sensors = [];
|
||||
var rays = [];
|
||||
var canvas;
|
||||
var ctx;
|
||||
var grid;
|
||||
var ctxFOV = "rgba(0,0,255,0.1)";
|
||||
var sensorChecker = "";
|
||||
var previousx = 0;
|
||||
var previousy = 0;
|
||||
|
||||
function getSensor() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
if (this.status == 200) {
|
||||
sensorData = this.responseText;
|
||||
splitSensorData(sensorData);
|
||||
start();
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.open('POST', 'http://bitkozpont.mik.uni-pannon.hu/Vigyazz3SensorData.php', true);
|
||||
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr.send(JSON.stringify({
|
||||
request: 'sensors'
|
||||
}));
|
||||
}
|
||||
|
||||
function getSensorDataV1() {
|
||||
if (previousx != aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja || previousy != aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja)
|
||||
{
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
if (this.status == 200) {
|
||||
sensorChecker = this.responseText;
|
||||
splitDetectedSensorData(sensorChecker);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.open('POST', 'http://bitkozpont.mik.uni-pannon.hu/Vigyazz3SensorData.php', true);
|
||||
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr.send(JSON.stringify({
|
||||
request: 'sensordata',
|
||||
version: 1,
|
||||
posx: aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja,
|
||||
posy: aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja
|
||||
}));
|
||||
}
|
||||
previousx = aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja;
|
||||
previousy = aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja;
|
||||
}
|
||||
|
||||
function getSensorDataV2() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
if (this.status == 200) {
|
||||
sensorChecker = this.responseText;
|
||||
splitDetectedSensorData(sensorChecker);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.open('POST', 'http://bitkozpont.mik.uni-pannon.hu/Vigyazz3SensorData.php', true);
|
||||
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr.send(JSON.stringify({
|
||||
request: 'sensordata',
|
||||
version: 2,
|
||||
}));
|
||||
}
|
||||
//R.I.P nyikon dzsézönje :D
|
||||
|
||||
|
||||
// function splitSensorData(rtrnValue){
|
||||
// var str = rtrnValue.split("[")[1].split("]")[0];
|
||||
// var snsrs = str.split("}");
|
||||
// var sensors = [];
|
||||
// for (var i = 0; i < snsrs.length - 1; i++){
|
||||
// sensor = snsrs[i].split("{")[1];
|
||||
// var data = sensor.split(",");
|
||||
// sensors.push(new Sensor(data[0].split(":")[1], data[1].split(":")[1], data[2].split(":")[1], data[3].split(":")[1]), data[4].split(":")[1]);
|
||||
// }
|
||||
//
|
||||
//
|
||||
// for (var i = 0; i < sensors.length; i++){
|
||||
// alert(sensors[i].id + ";", sensors[i].posx + ";", sensors[i].posy + ";", sensors[i].angle + ";", sensors[i].anglerad + ";");
|
||||
// }
|
||||
// }
|
||||
|
||||
function splitSensorData(json_text){
|
||||
var jsn = JSON.parse(json_text);
|
||||
for (var i = 0; i < 4; i++) {
|
||||
var sensor = jsn.data[i];
|
||||
|
||||
sensors.push(new Sensor(sensor.id, sensor.posx, sensor.posy, sensor.angle, sensor.anglerad));
|
||||
}
|
||||
}
|
||||
|
||||
var startX1;
|
||||
var startY1;
|
||||
var startX2;
|
||||
var startY2;
|
||||
var endX1;
|
||||
var endY1;
|
||||
var endX2;
|
||||
var endY2;
|
||||
var rectX;
|
||||
var rectY;
|
||||
|
||||
function splitDetectedSensorData(json_text){
|
||||
var sensorCount = 0;
|
||||
var rayIDs = [];
|
||||
rays = [];
|
||||
var jsn = JSON.parse(json_text);
|
||||
for (var i = 0; i < 4; i++) {
|
||||
var ray = jsn.data[i];
|
||||
rays.push(new Ray(ray.id, ray.signal, ray.angle));
|
||||
// console.log(rays[i].id + ";" + rays[i].signal + ";" + rays[i].angle);
|
||||
if (ray.signal && sensorCount < 2) {
|
||||
rayIDs[sensorCount] = ray.id;
|
||||
sensorCount++;
|
||||
}
|
||||
}
|
||||
if (sensorCount == 2)
|
||||
{ //Ilyeneket nem tanultunk!
|
||||
startX1 = sensors[rayIDs[0]].posx;
|
||||
startY1 = sensors[rayIDs[0]].posy;
|
||||
startX2 = sensors[rayIDs[1]].posx;
|
||||
startY2 = sensors[rayIDs[1]].posy;
|
||||
endX1 = startX1 + Math.cos((sensors[rayIDs[0]].angle + rays[rayIDs[0]].angle) * Math.PI / 180) * 400;
|
||||
endY1 = startY1 + Math.sin((sensors[rayIDs[0]].angle + rays[rayIDs[0]].angle) * Math.PI / 180) * 400;
|
||||
endX2 = startX2 + Math.cos((sensors[rayIDs[1]].angle + rays[rayIDs[1]].angle) * Math.PI / 180) * 400;
|
||||
endY2 = startY2 + Math.sin((sensors[rayIDs[1]].angle + rays[rayIDs[1]].angle) * Math.PI / 180) * 400;
|
||||
//console.log(startX1 + ", " + startY1 + " " + endX1 + ", " + endY1 + " " + startX2 + ", " + startY2 + " " + endX2 + ", " + endY2);
|
||||
|
||||
// var b_angle = 90 - rays[rayIDs[0]].angle + sensors[rayIDs[0]].angle;
|
||||
// var a_side = (Math.sin(sensors[rayIDs[0]].angle + rays[rayIDs[0]].angle*Math.PI/180) * 400) / Math.sin(90*Math.PI/180);
|
||||
// var b_side = (Math.sin(b_angle*Math.PI/180) * 400) / Math.sin(90*Math.PI/180);
|
||||
//
|
||||
// endX1 = startX1 + b_side;
|
||||
// endY1 = startY1 + a_side;
|
||||
//
|
||||
// var b_angle = 90 - rays[rayIDs[1]].angle + sensors[rayIDs[0]].angle;
|
||||
// var a_side = (Math.sin(sensors[rayIDs[0]].angle + rays[rayIDs[1]].angle*Math.PI/180) * 400) / Math.sin(90*Math.PI/180);
|
||||
// var b_side = (Math.sin(b_angle*Math.PI/180) * 400) / Math.sin(90*Math.PI/180);
|
||||
|
||||
// endX2 = startX2 + b_side;
|
||||
// endY2 = startY2 + a_side;
|
||||
var pos = detectIntersection(startX1, startY1, endX1, endY1, startX2, startY2, endX2, endY2);
|
||||
drawSquare(Math.floor(pos[0] / 100) * 100, Math.floor(pos[1] / 100) * 100);
|
||||
rectX = Math.floor(pos[0] / 100) * 100;
|
||||
rectY = Math.floor(pos[1] / 100) * 100;
|
||||
}
|
||||
else {
|
||||
rectX = -101;
|
||||
rectY = -101;
|
||||
}
|
||||
}
|
||||
function start() {
|
||||
modal();
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
grid = canvas.getContext("2d");
|
||||
versionPicker();
|
||||
var canvasRefresher = setInterval(refreshCanvas, 35);
|
||||
}
|
||||
|
||||
function refreshCanvas() {
|
||||
var canvasHeight=canvas.offsetHeight;
|
||||
var canvasWidth=canvas.offsetWidth;
|
||||
ctx.clearRect(0, 0, canvasHeight, canvasWidth);
|
||||
drawGrid();
|
||||
drawFOV();
|
||||
drawDetection();
|
||||
drawSensors();
|
||||
drawSquare();
|
||||
if (version){
|
||||
drawCircle();
|
||||
}
|
||||
}
|
||||
|
||||
function drawSquare() {
|
||||
ctx.fillStyle = "rgba(255, 255, 0, 0.6)";
|
||||
ctx.fillRect(rectX + 1, rectY + 1, 99, 99);
|
||||
}
|
||||
|
||||
function drawGrid(){
|
||||
var p = 0;
|
||||
for (var x = 0; x <= 500; x += 100) {
|
||||
grid.moveTo(0.5 + x + p, p);
|
||||
grid.lineTo(0.5 + x + p, 500 + p);
|
||||
}
|
||||
|
||||
for (var x = 0; x <= 500; x += 100) {
|
||||
grid.moveTo(p, 0.5 + x + p);
|
||||
grid.lineTo(500 + p, 0.5 + x + p);
|
||||
}
|
||||
grid.strokeStyle = "black";
|
||||
grid.stroke();
|
||||
}
|
||||
|
||||
function drawSensors() {
|
||||
ctx.fillStyle = "darkred";
|
||||
for (var si=0; si<sensors.length; si++){
|
||||
var anglerad=sensors[si].angle*Math.PI/180;
|
||||
ctx.beginPath();
|
||||
ctx.arc(sensors[si].posx, sensors[si].posy, 10, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
var jsAngleStart=anglerad-Math.PI/4;
|
||||
var jsAngleEnd=anglerad+Math.PI/4;
|
||||
if (jsAngleStart<0) jsAngleStart+=Math.PI*2;
|
||||
else if (jsAngleStart>Math.PI*2) jsAngleStart-=Math.PI*2;
|
||||
if (jsAngleEnd<0) jsAngleEnd+=Math.PI*2;
|
||||
else if (jsAngleEnd>Math.PI*2) jsAngleEnd-=Math.PI*2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(sensors[si].posx, sensors[si].posy);
|
||||
ctx.lineTo(sensors[si].posx+Math.cos(anglerad-Math.PI/4)*20, sensors[si].posy+Math.sin(anglerad-Math.PI/4)*20);
|
||||
ctx.lineTo(sensors[si].posx+Math.cos(anglerad+Math.PI/4)*20, sensors[si].posy+Math.sin(anglerad+Math.PI/4)*20);
|
||||
ctx.lineTo(sensors[si].posx, sensors[si].posy);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function drawFOV() {
|
||||
ctx.fillStyle = ctxFOV;
|
||||
for (var i = 0; i < 4; i++)
|
||||
{
|
||||
ctx.moveTo(sensors[i].posx, sensors[i].posy);
|
||||
ctx.beginPath();
|
||||
ctx.arc(sensors[i].posx, sensors[i].posy, 400, (sensors[i].angle - 45) * Math.PI / 180, (sensors[i].angle + 45) * Math.PI / 180);
|
||||
ctx.lineTo(sensors[i].posx, sensors[i].posy);
|
||||
ctx.fill();
|
||||
};
|
||||
}
|
||||
|
||||
function fovonoff() {
|
||||
if (document.getElementById("fovswitch").checked)
|
||||
{
|
||||
ctxFOV = "rgba(0,0,255,0.1)";
|
||||
}
|
||||
else {
|
||||
ctxFOV = "rgba(0,0,0,0)";
|
||||
}
|
||||
}
|
||||
|
||||
var refreshSensorData2;
|
||||
var refreshSensorData1;
|
||||
function versionPicker() {
|
||||
if (document.getElementById("versionswitch").checked)
|
||||
{
|
||||
clearInterval(refreshSensorData1);
|
||||
getSensorDataV2();
|
||||
refreshSensorData2 = setInterval(getSensorDataV2, 1000);
|
||||
version = false;
|
||||
}
|
||||
else {
|
||||
clearInterval(refreshSensorData2);
|
||||
refreshSensorData1 = setInterval(getSensorDataV1, 35);
|
||||
version = true;
|
||||
}
|
||||
}
|
||||
|
||||
function drawDetection() {
|
||||
ctx.fillStyle = "rgba(255,0,0,0.2)";
|
||||
for (var i = 0; i < 4; i++)
|
||||
{
|
||||
if (rays[i] != undefined) {
|
||||
if (rays[i].signal) {
|
||||
ctx.moveTo(sensors[i].posx, sensors[i].posy);
|
||||
ctx.beginPath();
|
||||
ctx.arc(sensors[i].posx, sensors[i].posy, 400, (sensors[i].angle + rays[i].angle - 2) * Math.PI / 180, (sensors[i].angle + rays[i].angle + 2) * Math.PI / 180);
|
||||
ctx.lineTo(sensors[i].posx, sensors[i].posy);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja = 250;
|
||||
var aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja = 250;
|
||||
|
||||
function drawCircle(){
|
||||
ctx.strokeStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.fillStyle = "black";
|
||||
ctx.beginPath();
|
||||
ctx.arc(aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja, aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja, 4, 0, Math.PI*2, true);
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", moveObject, false);
|
||||
|
||||
function moveObject(e) {
|
||||
var step=8;
|
||||
switch(e.keyCode) {
|
||||
case 37:
|
||||
if (aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja - step >= 0)
|
||||
aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja -= step;
|
||||
break;
|
||||
case 38:
|
||||
if (aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja - step >= 0)
|
||||
aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja -= step;
|
||||
break;
|
||||
case 39:
|
||||
if (aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja + step <= 500)
|
||||
aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja += step;
|
||||
break;
|
||||
case 40:
|
||||
if (aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja + step <= 500)
|
||||
aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja += step;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function modal() {
|
||||
var modal = document.getElementById("myModal");
|
||||
var btn = document.getElementById("myBtn");
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
|
||||
btn.onclick = function() {
|
||||
modal.style.display = "block";
|
||||
}
|
||||
span.onclick = function() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//[0, 0], [0, 0]
|
||||
function detectIntersection(x1, y1, x2, y2, x3, y3, x4, y4){
|
||||
denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
|
||||
if (denominator === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
|
||||
let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator;
|
||||
|
||||
if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let x = x1 + ua * (x2 - x1);
|
||||
let y = y1 + ua * (y2 - y1);
|
||||
|
||||
return [x, y];
|
||||
|
||||
}
|
||||
176
erzekelo/style.css
Normal file
176
erzekelo/style.css
Normal file
@ -0,0 +1,176 @@
|
||||
body {
|
||||
font-family: Verdana,Arial,sans-serif;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
article {
|
||||
width: 600px;
|
||||
margin: 100px auto;
|
||||
height: 100%;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
bottom: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
#myCanvas {
|
||||
border: dotted 1px;
|
||||
background-color: lightgray;
|
||||
}
|
||||
.text {
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: inline-block;
|
||||
margin-right: 50px;
|
||||
margin-bottom: 50px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
a{
|
||||
color: #2196F3;
|
||||
text-decoration: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
/*choosing thing*/
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/*segédlet*/
|
||||
#myBtn{
|
||||
cursor:pointer;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
|
||||
-webkit-animation-name: animatetop;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-name: animatetop;
|
||||
animation-duration: 0.4s
|
||||
}
|
||||
|
||||
@-webkit-keyframes animatetop {
|
||||
from {top:-300px; opacity:0}
|
||||
to {top:0; opacity:1}
|
||||
}
|
||||
|
||||
@keyframes animatetop {
|
||||
from {top:-300px; opacity:0}
|
||||
to {top:0; opacity:1}
|
||||
}
|
||||
|
||||
.close {
|
||||
color: white;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 2px 16px;
|
||||
background-color: #2196F3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-body {padding: 2px 16px;}
|
||||
|
||||
.modal-footer {
|
||||
padding: 2px 16px;
|
||||
background-color: #2196F3;
|
||||
color: white;
|
||||
}
|
||||
BIN
futoszalag/img/arrowDown.gif
Normal file
BIN
futoszalag/img/arrowDown.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
futoszalag/img/arrowLeft.gif
Normal file
BIN
futoszalag/img/arrowLeft.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
futoszalag/img/arrowRight.gif
Normal file
BIN
futoszalag/img/arrowRight.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
futoszalag/img/arrowUp.gif
Normal file
BIN
futoszalag/img/arrowUp.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
552
futoszalag/index.html
Normal file
552
futoszalag/index.html
Normal file
@ -0,0 +1,552 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>1. feladat</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
|
||||
<style type="text/css" media="screen,projection,print">
|
||||
body {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
section {
|
||||
min-width: 400px;
|
||||
padding: 20px;
|
||||
margin: 10px auto 10px auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: -25px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#table {
|
||||
cursor: crosshair;
|
||||
background: orange;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
border-color: orange;
|
||||
box-shadow: 10px 10px 5px #d0d0d0;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #4CAF50;
|
||||
/* Green */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 16px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
transition-duration: 0.4s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button1 {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 2px solid #4CAF50;
|
||||
}
|
||||
|
||||
.button1:hover {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.buttonred {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 2px solid #f44336;
|
||||
|
||||
}
|
||||
|
||||
.buttonred:hover {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.buttonblue {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 2px solid #008CBA;
|
||||
}
|
||||
|
||||
.buttonblue:hover {
|
||||
background-color: #008CBA;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #008CBA;
|
||||
}
|
||||
|
||||
.buttonorange {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 2px solid orange;
|
||||
}
|
||||
|
||||
.buttonorange:hover {
|
||||
background-color: orange;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
input[type=number],
|
||||
select {
|
||||
max-width: 50px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 50px;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
color: #fcfcfc;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.cellrowclicked {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
.conveyorbelt {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.cellclicked {
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var tt;
|
||||
var nrow;
|
||||
var ncell;
|
||||
var belt;
|
||||
var activeCell;
|
||||
var index = 0;
|
||||
var levels = 0;
|
||||
var package;
|
||||
var packages;
|
||||
var simulationStopped = true;
|
||||
|
||||
class ConveyorBelt {
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.image = new Image();
|
||||
this.image.width = 50;
|
||||
this.image.height = 50;
|
||||
tt[y][x].appendChild(this.image)
|
||||
this.changeDirection(Direction.RIGHT)
|
||||
}
|
||||
changeDirection(d) {
|
||||
switch (d) {
|
||||
case Direction.LEFT:
|
||||
this.image.src = 'img/arrowLeft.gif'
|
||||
break;
|
||||
case Direction.RIGHT:
|
||||
this.image.src = 'img/arrowRight.gif'
|
||||
break;
|
||||
case Direction.UP:
|
||||
this.image.src = 'img/arrowUp.gif'
|
||||
break;
|
||||
case Direction.DOWN:
|
||||
this.image.src = 'img/arrowDown.gif'
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.direction = d;
|
||||
}
|
||||
}
|
||||
|
||||
class Package {
|
||||
constructor() {
|
||||
this.image = new Image();
|
||||
this.image.src = "package.png";
|
||||
this.image.style.zIndex = 2;
|
||||
this.image.width = 50;
|
||||
this.image.height = 50;
|
||||
this.position = -1;
|
||||
this.moving = false;
|
||||
}
|
||||
next() {
|
||||
if (this.moving) {
|
||||
this.position++;
|
||||
if (this.position == index) {
|
||||
this.position--;
|
||||
this.image.remove();
|
||||
this.moving = false;
|
||||
this.position = -1;
|
||||
} else {
|
||||
tt[belt[this.position].y][belt[this.position].x].appendChild(this.image);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var Direction = {
|
||||
DOWN: [1, 0],
|
||||
RIGHT: [0, 1],
|
||||
LEFT: [0, -1],
|
||||
UP: [-1, 0]
|
||||
}
|
||||
|
||||
function init() {
|
||||
nrow = parseInt(document.getElementById("row").value);
|
||||
ncell = parseInt(document.getElementById("column").value);
|
||||
tt = new Array(nrow);
|
||||
belt = new Array(nrow * ncell);
|
||||
if (nrow < 5 || nrow > 15 || ncell < 5 || ncell > 15) {
|
||||
alert("Tábla méret túl kicsi vagy túl nagy!");
|
||||
return;
|
||||
}
|
||||
activeCell = undefined;
|
||||
index = 0;
|
||||
document.getElementById("table").innerHTML = "";
|
||||
for (var i = 0; i < nrow; i++) {
|
||||
var newrow = document.getElementById("table").insertRow(i);
|
||||
tt[i] = new Array(ncell);
|
||||
for (var j = 0; j < ncell; j++) {
|
||||
tt[i][j] = newrow.insertCell(j);
|
||||
tt[i][j].id = i * ncell + j;
|
||||
tt[i][j].onclick = function () {
|
||||
cellClicked(this);
|
||||
};
|
||||
tt[i][j].classList.add("cell");
|
||||
tt[i][j].innerHTML = "";
|
||||
}
|
||||
}
|
||||
levels=0;
|
||||
|
||||
}
|
||||
|
||||
function clearBackground() {
|
||||
for (var i = 0; i < nrow; i++) {
|
||||
for (var j = 0; j < ncell; j++) {
|
||||
tt[i][j].classList.remove("cellrowclicked");
|
||||
tt[i][j].classList.remove("cellclicked");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function cellClicked(obj) {
|
||||
|
||||
clearBackground();
|
||||
simulationStopped = true;
|
||||
document.getElementById("folytonos").classList.remove("blue");
|
||||
document.getElementById("folytonos").innerHTML = "Folytonos működés";
|
||||
var row = parseInt(obj.id / ncell);
|
||||
var column = obj.id % ncell;
|
||||
var yes;
|
||||
tt[row][column].classList.add("cellclicked");
|
||||
for (var j = 0; j < ncell; j++) {
|
||||
if (j != column) {
|
||||
tt[row][j].classList.add("cellrowclicked");
|
||||
}
|
||||
}
|
||||
if (activeCell == undefined) {
|
||||
if (column == 0 || row == 0 || column == nrow - 1 || row == ncell - 1) {
|
||||
activeCell = new ConveyorBelt(column, row);
|
||||
tt[row][column].classList.add('conveyorbelt')
|
||||
belt[index] = activeCell;
|
||||
index++;
|
||||
} else {
|
||||
alert("A futószalagnak a pálya szélén kell kezdődnie!")
|
||||
}
|
||||
} else {
|
||||
if ((activeCell.x == column && activeCell.y - row <= 1 && activeCell.y - row >= -1) ||
|
||||
(activeCell.y == row && activeCell.x - column <= 1 && activeCell.x - column >= -1)) {
|
||||
if ((activeCell.x != column || activeCell.y != row) && !tt[row][column].classList.contains('conveyorbelt')) {
|
||||
tt[row][column].classList.add('conveyorbelt');
|
||||
if (activeCell.x == column) {
|
||||
if (activeCell.y - row == 1) {
|
||||
yes = Direction.UP;
|
||||
} else {
|
||||
yes = Direction.DOWN;
|
||||
}
|
||||
} else {
|
||||
if (activeCell.x - column == 1) {
|
||||
yes = Direction.LEFT;
|
||||
} else {
|
||||
yes = Direction.RIGHT;
|
||||
}
|
||||
}
|
||||
belt[index - 1].changeDirection(yes);
|
||||
activeCell = new ConveyorBelt(column, row);
|
||||
belt[index] = activeCell;
|
||||
belt[index].changeDirection(belt[index - 1].direction);
|
||||
index++;
|
||||
} else {
|
||||
alert("A futoszalag nem mehet magába!")
|
||||
}
|
||||
} else {
|
||||
alert("Csak szomszédos cellába folytatódhat a futószalag!");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function undo() {
|
||||
if(index>0){
|
||||
index--;
|
||||
activeCell = belt[index - 1];
|
||||
tt[belt[index].y][belt[index].x].classList.remove("conveyorbelt");
|
||||
tt[belt[index].y][belt[index].x].innerHTML = '';
|
||||
belt[index] = null;
|
||||
clearBackground();
|
||||
}
|
||||
}
|
||||
|
||||
function checkBelt(nonstop) {
|
||||
clearBackground();
|
||||
if (index == 0) {
|
||||
alert("Nincsen futószalag!");
|
||||
} else if (index == 1) {
|
||||
alert("A futószalag túl rövid!");
|
||||
} else {
|
||||
if (activeCell.x == 0 || activeCell.y == 0 || activeCell.x == ncell - 1 || activeCell.y == nrow - 1) {
|
||||
if (nonstop) {
|
||||
simulationStopped = !simulationStopped;
|
||||
if (simulationStopped) {
|
||||
document.getElementById("folytonos").classList.remove("blue");
|
||||
document.getElementById("folytonos").innerHTML = "Folytonos működés";
|
||||
} else {
|
||||
var dist = parseInt(prompt("Milyen időközönként jöjjenek a csomagok?")) - 1;
|
||||
if (!(dist >= 0)) {
|
||||
alert("A számnak nagyobbnak kell lennie 0-nál!");
|
||||
simulationStopped = true;
|
||||
return;
|
||||
}
|
||||
document.getElementById("folytonos").classList.add("blue");
|
||||
document.getElementById("folytonos").innerHTML = "Folytonosság leállítása";
|
||||
simulate(dist);
|
||||
}
|
||||
} else {
|
||||
document.getElementById("inditas").classList.add("red");
|
||||
document.getElementById("inditas").classList.remove("buttonred");
|
||||
document.getElementById("inditas").disabled = true;
|
||||
startBelt();
|
||||
}
|
||||
} else {
|
||||
alert("A futószalagnak a pálya szélétől a szélére kell mennie!");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function startBelt() {
|
||||
var speed = 1 / document.getElementById("speed").value * 1000;
|
||||
package = new Package();
|
||||
package.moving = true;
|
||||
var timer = setInterval(function () {
|
||||
package.next();
|
||||
if (!package.moving) {
|
||||
document.getElementById("inditas").classList.remove("red");
|
||||
document.getElementById("inditas").classList.add("buttonred");
|
||||
document.getElementById("inditas").disabled = false;
|
||||
document.getElementById("folytonos").classList.remove("blue");
|
||||
document.getElementById("folytonos").classList.add("buttonblue");
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, speed);
|
||||
}
|
||||
|
||||
function simulate(dist) {
|
||||
var x = 0;
|
||||
var speed = 1 / document.getElementById("speed").value * 1000;
|
||||
packages = new Array(index + 1);
|
||||
for (let i = 0; i < packages.length; i++) {
|
||||
packages[i] = new Package();
|
||||
}
|
||||
packages[0].moving = true;
|
||||
var timer = setInterval(function () {
|
||||
if (simulationStopped) {
|
||||
for (var i = 0; i < packages.length; i++) {
|
||||
packages[i].next();
|
||||
}
|
||||
if (!packages[x].moving) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
} else {
|
||||
if (packages[x].position == dist) {
|
||||
if (++x == packages.length) {
|
||||
x = 0;
|
||||
}
|
||||
packages[x].moving = true;
|
||||
}
|
||||
for (var i = 0; i < packages.length; i++) {
|
||||
packages[i].next();
|
||||
}
|
||||
}
|
||||
}, speed);
|
||||
}
|
||||
|
||||
function level(x) {
|
||||
for (i = index; i >= 0; i--) {
|
||||
|
||||
undo();
|
||||
}
|
||||
document.getElementById("levelmemory").value = x;
|
||||
if(x!=0){
|
||||
document.getElementById("column").value = 6;
|
||||
document.getElementById("row").value = 6;
|
||||
}
|
||||
init();
|
||||
switch (x) {
|
||||
case 1:
|
||||
buttonEnabler();
|
||||
document.getElementById("level1").classList.remove("button1");
|
||||
for (let i = 0; i < 3; i++) {
|
||||
cellClicked(tt[0][i]);
|
||||
|
||||
}
|
||||
levels = 1;
|
||||
|
||||
break;
|
||||
case 2:
|
||||
buttonEnabler();
|
||||
document.getElementById("level2").classList.remove("button1");
|
||||
for (let i = 0; i < 6; i++) {
|
||||
cellClicked(tt[0][i]);
|
||||
|
||||
}
|
||||
levels = 2;
|
||||
break;
|
||||
case 3:
|
||||
buttonEnabler();
|
||||
document.getElementById("level3").classList.remove("button1");
|
||||
for (let i = 2; i < 5; i++) {
|
||||
cellClicked(tt[0][i]);
|
||||
|
||||
}
|
||||
for (let i = 1; i < 6; i++) {
|
||||
|
||||
cellClicked(tt[i][4]);
|
||||
}
|
||||
levels = 3;
|
||||
break;
|
||||
case 4:
|
||||
buttonEnabler();
|
||||
document.getElementById("level4").classList.remove("button1");
|
||||
var yy = 0;
|
||||
var xx = 0;
|
||||
var ctrctr = 0;
|
||||
while(xx < 5 || 5 > yy)
|
||||
{
|
||||
cellClicked(tt[xx][yy])
|
||||
if(ctrctr%2==0){xx++;}
|
||||
else{yy++;}
|
||||
ctrctr++;
|
||||
}
|
||||
levels = 4;
|
||||
break;
|
||||
case 0:
|
||||
buttonEnabler();
|
||||
document.getElementById("level0").classList.remove("button1");
|
||||
levels = 0;
|
||||
break;
|
||||
default:
|
||||
buttonEnabler();
|
||||
document.getElementById("level0").classList.remove("button1");
|
||||
levels = 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function buttonEnabler() {
|
||||
for (i = 0; i < 5; i++) {
|
||||
document.getElementById("level" + i).classList.add("button1");
|
||||
}
|
||||
levels = 0;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="container" onload="init()">
|
||||
<header>
|
||||
<h1 class="display-4">Futószalag szimulátor</h1>
|
||||
</header>
|
||||
<div class="row">
|
||||
<div class="col-md-1"></div>
|
||||
<div class="col-sm-2"><button class="button" onclick="level(0)" id="level0">Custom</button></div>
|
||||
<div class="col-sm-2"><button class="button button1" onclick="level(1)" id="level1">1.Pálya</button></div>
|
||||
<div class="col-sm-2"><button class="button button1" onclick="level(2)" id="level2">2.Pálya</button></div>
|
||||
<div class="col-sm-2"><button class="button button1" onclick="level(3)" id="level3">3.Pálya</button></div>
|
||||
<div class="col-sm-2"><button class="button button1" onclick="level(4)" id="level4">4.Pálya</button></div>
|
||||
<div class="col-md-1"></div>
|
||||
</div>
|
||||
<section>
|
||||
<table id="table" align="center"></table>
|
||||
</section>
|
||||
<button class="button buttonorange" onclick="undo()">Visszavonás</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3" style="padding-top: 10px;">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<label for="row">Sor:</label>
|
||||
<input type="number" onchange="if(document.getElementById('levelmemory').value==0){init()}else{this.value = 6}" min="5" max="15" id="row" value="6">
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<label for="column">Oszlop:</label>
|
||||
<input type="number" onchange="if(document.getElementById('levelmemory').value==0){init()}else{this.value = 6}" min="5" max="15" id="column" value="6">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<span>1</span><input type="range" min="1" max="10" value="1" id="speed" class="vertical-center" style="width: 80%;"><span style="float: right;">10</span><br>
|
||||
<p style="margin-top: 10px;">Sebesség</p>
|
||||
</div>
|
||||
<div class="col-sm-3"><button class="button buttonblue" id="folytonos" onclick="checkBelt(true)">Folytonos működés</button></div>
|
||||
<div class="col-sm-3"><button class="button buttonred" id="inditas" onclick="checkBelt(false)">Futószalag indítása</button></div>
|
||||
</div>
|
||||
<input type="hidden" id="levelmemory" value="0">
|
||||
<script>
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
futoszalag/package.png
Normal file
BIN
futoszalag/package.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
61
huszar/index.html
Normal file
61
huszar/index.html
Normal file
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
|
||||
<meta name="description" content="Bitfaragó - HoBITek" />
|
||||
<meta name="keywords" content="Bitfaragó, HobBITek" />
|
||||
<meta name="author" content="Baldauf Márton, Nyikon zoltán, Sárközi Balázs" />
|
||||
<meta property="og:title" content="Bitfaragó - verseny" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="" />
|
||||
<meta property="og:description" content="Bitfaragó - HobBITek" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="300" />
|
||||
<meta property="og:image:height" content="300" />
|
||||
<meta name="revisit-after" content="7 days" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Cache-Control" content="no-cache" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="googlebot" content="index, follow" />
|
||||
<meta name="google" content="notranslate" />
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<title>Bitfaragó - Huszárvándorlás</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
|
||||
<script type="text/javascript" src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="inline">
|
||||
<input type="text" class="input" name="" value="" id="width"><br>
|
||||
<input type="text" class="input" name="" value="" id="height"><br>
|
||||
<label class="container">Könnyű
|
||||
<input type="radio" checked="checked" name="radio" id="easy">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="container">Nehéz
|
||||
<input type="radio" name="radio" id="hard">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<input type="button" name="" value="Kezdés" class="button" onclick="start()" >
|
||||
</div>
|
||||
<div class="time" id="counter">
|
||||
0
|
||||
</div>
|
||||
<div class="time hard" id="timer">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<article class="">
|
||||
<div class="">
|
||||
<table id="table"></table>
|
||||
</div>
|
||||
</article>
|
||||
<footer>
|
||||
HoBITek © | 2019 okt. 9
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
163
huszar/main.css
Normal file
163
huszar/main.css
Normal file
@ -0,0 +1,163 @@
|
||||
td {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background-color: rgb(42,42,42);
|
||||
border: 1px solid white;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
#table{
|
||||
margin: auto;
|
||||
border: 2px solid black;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
cursor: crosshair;
|
||||
}
|
||||
header{
|
||||
margin: auto;
|
||||
}
|
||||
.input {
|
||||
margin-bottom: 5px;
|
||||
width: 110px;
|
||||
}
|
||||
.inline {
|
||||
display: inline-block;
|
||||
margin-right: 50px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 2px solid black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.time{
|
||||
display: inline;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 5em;
|
||||
margin-right: 50px;
|
||||
float: right;
|
||||
}
|
||||
.button {
|
||||
background-color: #017310;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 16px 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin: 4px;
|
||||
opacity: 0.8;
|
||||
transition: 0.3s;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
article {
|
||||
height: 100%;
|
||||
}
|
||||
.button:hover {opacity: 1}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.hard{
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/*radio buttons*/
|
||||
.container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-family: arial,sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background-color: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.container:hover input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.container input:checked ~ .checkmark {
|
||||
background-color: #13e3eb;
|
||||
}
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container .checkmark:after {
|
||||
top: 9px;
|
||||
left: 9px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/*Cells*/
|
||||
.cell:hover {
|
||||
background-color: yellow !important;
|
||||
}
|
||||
|
||||
.hardCell {
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
.stepCell {
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
.stepCell:hover {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.hardCell.stepCell {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.hardCell.stepCell:hover {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.currentCell {
|
||||
background-color: darkorange;
|
||||
}
|
||||
|
||||
.passedCell {
|
||||
background-color: red;
|
||||
}
|
||||
368
huszar/main.js
Normal file
368
huszar/main.js
Normal file
@ -0,0 +1,368 @@
|
||||
class GridCell {
|
||||
constructor(_id, xpos, ypos) {
|
||||
this.id = _id;
|
||||
this.x = xpos;
|
||||
this.y = ypos;
|
||||
this.passed = false;
|
||||
this.text = 0;
|
||||
this.step = true;
|
||||
this.motionDetector = false;
|
||||
this.motionID = -2;
|
||||
}
|
||||
|
||||
startTimer(interval) {
|
||||
var dOld = new Date();
|
||||
var nOld;
|
||||
if (this.motionID == globalMotionID){
|
||||
nOld = globalMotionTime;
|
||||
}
|
||||
else{
|
||||
nOld = dOld.getTime();
|
||||
}
|
||||
var x = this.x;
|
||||
var y = this.y;
|
||||
var mid = this.motionID;
|
||||
var counter = setInterval(function(){
|
||||
var dNow = new Date();
|
||||
var nNow = dNow.getTime();
|
||||
var ntime = Math.round(((interval*1000) - (nNow - nOld))/10) / 100;
|
||||
if(globalx != x){
|
||||
clearInterval(counter);
|
||||
globalMotionID = mid;
|
||||
globalMotionTime = nOld;
|
||||
if (grid[globalx][globaly].motionDetector == true){
|
||||
grid[globalx][globaly].startTimer(5);
|
||||
}
|
||||
else{
|
||||
globalMotionID = -1;
|
||||
globalMotionTime = 0;
|
||||
document.getElementById("timer").innerHTML = 0.00;
|
||||
isFirtHardCellClick = true;
|
||||
}
|
||||
}
|
||||
else if (ntime <= 0){
|
||||
clearInterval(counter);
|
||||
document.getElementById("timer").innerHTML = 0.00;
|
||||
state = "endOfGame";
|
||||
}
|
||||
else{
|
||||
document.getElementById("timer").innerHTML = ntime;
|
||||
}
|
||||
|
||||
if (document.getElementById("timer").innerHTML == "0"){
|
||||
document.getElementById("timer").innerHTML = "0.00";
|
||||
}
|
||||
}, 1);
|
||||
}
|
||||
}
|
||||
|
||||
var width = 0;
|
||||
var height = 0;
|
||||
var state;
|
||||
var cnt = 1;
|
||||
var grid = [];
|
||||
var running = false;
|
||||
var globalx;
|
||||
var globaly;
|
||||
var globalMotionID = -1;
|
||||
var globalMotionTime = 0;
|
||||
var steps = 0;
|
||||
var startx = 0;
|
||||
var starty = 0;
|
||||
var areas = 0;
|
||||
var sizes = [];
|
||||
var isFirtHardCellClick = true;
|
||||
var hardSizes = [];
|
||||
var hardCenters = [];
|
||||
|
||||
function distance(a, b) {
|
||||
const dx = a[0] - b[0];
|
||||
const dy = a[1] - b[1];
|
||||
return(Math.sqrt(dx*dx + dy*dy)); //Math.hypot(dx, dy)
|
||||
}
|
||||
|
||||
function start() {
|
||||
if (!running) {
|
||||
running = true;
|
||||
generate();
|
||||
if (document.getElementById("hard").checked == true)
|
||||
{
|
||||
document.getElementById("timer").innerHTML = "0.0";
|
||||
areas = Math.floor(height*width/20);
|
||||
|
||||
for (let i = 0; i < areas && i < 4; i++)
|
||||
{
|
||||
sizes.push(3 + i * 2);
|
||||
}
|
||||
hardMode();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function time() {
|
||||
var dOld = new Date();
|
||||
var nOld = dOld.getTime();
|
||||
if (state != "endOfGame") {
|
||||
var counter = setInterval(function(){
|
||||
var dNow = new Date();
|
||||
var nNow = dNow.getTime();
|
||||
timeElasped = Math.floor((nNow-nOld) / 1000);
|
||||
document.getElementById("counter").innerHTML = timeElasped;
|
||||
if(state == "endOfGame"){
|
||||
clearInterval(counter);
|
||||
if (cnt == width * height + 1) {
|
||||
result = circleSolution();
|
||||
if (result) {
|
||||
alert("GG! Ön egy körútvonalat talált!!! Noice!");
|
||||
reset();
|
||||
}
|
||||
else{
|
||||
alert("Nyertél!");
|
||||
reset();
|
||||
}
|
||||
}
|
||||
else {
|
||||
alert("Vesztettél!");
|
||||
reset();
|
||||
}
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function generate() {
|
||||
width = parseInt(document.getElementById("width").value);
|
||||
height = parseInt(document.getElementById("height").value);
|
||||
id = 0;
|
||||
if (width >= 5 && height >= 5) {
|
||||
table = document.getElementById("table");
|
||||
for (let i = 0; i < height; i++) {
|
||||
row = table.insertRow(-1);
|
||||
grid.push([]);
|
||||
for (let j = 0; j < width; j++) {
|
||||
grid[i].push(new GridCell(id, i, j));
|
||||
cell = row.insertCell(-1);
|
||||
cell.setAttribute("class", "cell");
|
||||
cell.setAttribute("id", id);
|
||||
cell.setAttribute("onclick", "cellClick(" + id + ", " + i + ", " + j + ")");
|
||||
id += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
state = "endOfGame";
|
||||
alert("Rossz adat!");
|
||||
}
|
||||
}
|
||||
|
||||
function cellClick(id, i, j) {
|
||||
if (grid[i][j].step)
|
||||
{
|
||||
document.getElementById(grid[i][j].id).classList.toggle("currentCell", true);
|
||||
grid[i][j].passed = true;
|
||||
grid[i][j].text = cnt;
|
||||
if (cnt == 1) {
|
||||
time();
|
||||
startx = j;
|
||||
starty = i;
|
||||
for (let k = 0; k < height; k++)
|
||||
{
|
||||
for (let l = 0; l < width; l++)
|
||||
{
|
||||
document.getElementById(grid[k][l].id).classList.toggle("cell", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
document.getElementById(grid[globalx][globaly].id).classList.toggle("currentCell", false);
|
||||
document.getElementById(grid[globalx][globaly].id).classList.toggle("passedCell", true);
|
||||
}
|
||||
globalx = i;
|
||||
globaly = j;
|
||||
cnt += 1;
|
||||
document.getElementById(id).innerHTML = grid[i][j].text;
|
||||
search();
|
||||
if (isFirtHardCellClick && grid[i][j].motionDetector == true){
|
||||
if (grid[i][j].motionDetector == true){
|
||||
grid[i][j].startTimer(5);
|
||||
}
|
||||
else{
|
||||
globalMotionID = -1;
|
||||
globalMotionTime = 0;
|
||||
document.getElementById("timer").innerHTML = 0.00;
|
||||
}
|
||||
isFirtHardCellClick = false;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function search() {
|
||||
steps = 0;
|
||||
for (i = 0; i < height; i++)
|
||||
{
|
||||
for (j = 0; j < width; j++)
|
||||
{
|
||||
grid[i][j].step = false;
|
||||
document.getElementById(grid[i][j].id).classList.toggle("stepCell", false);
|
||||
}
|
||||
}
|
||||
cellCheck(globalx+2, globaly-1);
|
||||
cellCheck(globalx+2, globaly+1);
|
||||
cellCheck(globalx-2, globaly-1);
|
||||
cellCheck(globalx-2, globaly+1);
|
||||
cellCheck(globalx-1, globaly-2);
|
||||
cellCheck(globalx-1, globaly+2);
|
||||
cellCheck(globalx+1, globaly-2);
|
||||
cellCheck(globalx+1, globaly+2);
|
||||
if (steps == 0)
|
||||
{
|
||||
running = false;
|
||||
state = "endOfGame";
|
||||
}
|
||||
}
|
||||
|
||||
function cellCheck(targetx, targety) {
|
||||
if (grid[targetx] != undefined)
|
||||
{
|
||||
if (grid[targetx][targety] != undefined)
|
||||
{
|
||||
if (grid[targetx][targety].text == 0)
|
||||
{
|
||||
grid[targetx][targety].step = true;
|
||||
document.getElementById(grid[targetx][targety].id).classList.toggle("stepCell", true);
|
||||
steps++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function circleSolution(){
|
||||
if (globalx - 1 == startx && globaly - 2 == starty) {
|
||||
return true;
|
||||
}
|
||||
else if (globalx + 1 == startx && globaly - 2 == starty) {
|
||||
return true;
|
||||
}
|
||||
else if (globalx - 2 == startx && globaly - 1 == starty) {
|
||||
return true;
|
||||
}
|
||||
else if (globalx - 2 == startx && globaly + 1 == starty) {
|
||||
return true;
|
||||
}
|
||||
else if (globalx + 2 == startx && globaly - 1 == starty) {
|
||||
return true;
|
||||
}
|
||||
else if (globalx + 1 == startx && globaly + 1 == starty) {
|
||||
return true;
|
||||
}
|
||||
else if (globalx - 1 == startx && globaly + 2 == starty) {
|
||||
return true;
|
||||
}
|
||||
else if (globalx + 1 == startx && globaly + 2 == starty) {
|
||||
return true;
|
||||
}
|
||||
else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
var hc = 0;
|
||||
function hardMode() {
|
||||
for (let i = 0; i < areas; i++)
|
||||
{
|
||||
var centers = [];
|
||||
hardSizes.push(sizes[Math.floor(Math.random()*sizes.length)]);
|
||||
var circle = false;
|
||||
for (let j = 0; j < grid.length; j++){
|
||||
for (let k = 0; k < grid[j].length; k++){
|
||||
var result = isAway([j, k]);
|
||||
if (result){
|
||||
centers.push([j, k]);
|
||||
circle = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (circle){
|
||||
hardCenters.push(centers[Math.floor(Math.random() * centers.length)]);
|
||||
createCircle(hardSizes[i], hardCenters[i], i);
|
||||
}
|
||||
else{
|
||||
hardCenters.push([-1000, -1000]);
|
||||
hc++;
|
||||
}
|
||||
}
|
||||
console.log(hc);
|
||||
}
|
||||
|
||||
function isAway(o) {
|
||||
for (let i = 0; i < hardCenters.length; i++) {
|
||||
if (distance(o, hardCenters[i]) < (hardSizes[i] - 1) / 2 + (hardSizes[hardSizes.length -1] - 1) / 2 + 1.5)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function createCircle(size, pos, id) {
|
||||
hardCells(pos[0], pos[1]);
|
||||
for (var i = 0; i < (size - 1) / 2; i++) {
|
||||
hardCells(pos[0] + i + 1, pos[1], id);
|
||||
hardCells(pos[0] - (i + 1), pos[1], id);
|
||||
hardCells(pos[0], pos[1] + i + 1, id);
|
||||
hardCells(pos[0], pos[1] - (i + 1), id);
|
||||
}
|
||||
if (Math.random() < 0.5){
|
||||
for (var i = 0; i < (size - 1) / 2 - 1; i++) {
|
||||
for (var j = 0; j < (size - 1) / 2 - i ; j++) {
|
||||
hardCells(pos[0] - (i + 1), pos[1] - j, id);
|
||||
hardCells(pos[0] + (i + 1), pos[1] - j, id);
|
||||
hardCells(pos[0] - (i + 1), pos[1] + j, id);
|
||||
hardCells(pos[0] + (i + 1), pos[1] + j, id);
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
for (var i = 0; i < (size - 1) / 2; i++) {
|
||||
for (var j = 0; j < (size - 1) / 2 - (i - 1); j++) {
|
||||
hardCells(pos[0] - (i + 1), pos[1] - j, id);
|
||||
hardCells(pos[0] + (i + 1), pos[1] - j, id);
|
||||
hardCells(pos[0] - (i + 1), pos[1] + j, id);
|
||||
hardCells(pos[0] + (i + 1), pos[1] + j, id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hardCells(targetx, targety, id) {
|
||||
if (grid[targetx] != undefined)
|
||||
{
|
||||
if (grid[targetx][targety] != undefined)
|
||||
{
|
||||
document.getElementById(grid[targetx][targety].id).classList.toggle("hardCell", true);
|
||||
grid[targetx][targety].motionDetector = true;
|
||||
grid[targetx][targety].motionID = id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reset(){
|
||||
width = 0;
|
||||
height = 0;
|
||||
state = null;
|
||||
cnt = 1;
|
||||
grid = [];
|
||||
running = false;
|
||||
globalx = 0;
|
||||
globaly = 0;
|
||||
steps = 0;
|
||||
startx = 0;
|
||||
starty = 0;
|
||||
areas = 0;
|
||||
globalMotionID = -1;
|
||||
globalMotionTime = 0;
|
||||
document.getElementById("counter").innerHTML = "0";
|
||||
document.getElementById("timer").innerHTML = "0.00";
|
||||
document.getElementById("table").innerHTML = "";
|
||||
}
|
||||
67
index.html
Normal file
67
index.html
Normal file
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
|
||||
<head>
|
||||
<title>Buduf Weboldal</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="jumbotron text-center" style="margin-bottom:0">
|
||||
<h1>Buduf Weboldal</h1>
|
||||
<p>Üdvözöllek a weboldalamon!</p>
|
||||
</div>
|
||||
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
|
||||
<a class="navbar-brand" href="#">Főoldal</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="collapsibleNavbar">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#projects">Projektek</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container" style="margin-top:30px">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h2>About Me</h2>
|
||||
<p>Some text about me</p>
|
||||
<h3>Some Links</h3>
|
||||
<p>...</p>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<h2 id="projects">WEBES PROJEKTEK</h2>
|
||||
<h4><a href="owheroes">Overwatch Heroes</a></h4>
|
||||
<p>Az első saját nagyobb weblap, amit csináltam.</p>
|
||||
<h4><a href="aranyjanos">Arany János</a></h4>
|
||||
<p>Egy irodalom projektre csináltam, nem sikerült teljesen befejezni.</p>
|
||||
<h4><a href="huszar">Huszárvándorlás</a></h4>
|
||||
<p>Bitfaragó 2019 versenyre készítettük. A csapat: Balázs, Nyikus és Én</p>
|
||||
<h4><a href="erzekelo">Mozgásérzékelők</a></h4>
|
||||
<p>Szintén a Bitfaragó 2019 versenyre készítettük. A csapat: Balázs, Nyikus és Én</p>
|
||||
<h4><a href="futoszalag">Futószalag szimulátor</a></h4>
|
||||
<p>Ezt a Bitfaragó 2020 versenyre készítettük. A csapat: Balázs, Ricsi és Én</p>
|
||||
<h4><a href="kinevet">Ki nevet a végén?</a></h4>
|
||||
<p>Ezt is a Bitfaragó 2020 versenyre készítettük. A csapat: Balázs, Ricsi és Én</p>
|
||||
<hr class="d-sm-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron text-center" style="margin-bottom:0">
|
||||
<p>...</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
BIN
kinevet/img/blue.png
Normal file
BIN
kinevet/img/blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
kinevet/img/crown.png
Normal file
BIN
kinevet/img/crown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
kinevet/img/dice1.png
Normal file
BIN
kinevet/img/dice1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
kinevet/img/dice2.png
Normal file
BIN
kinevet/img/dice2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
kinevet/img/dice3.png
Normal file
BIN
kinevet/img/dice3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
kinevet/img/dice4.png
Normal file
BIN
kinevet/img/dice4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
kinevet/img/dice5.png
Normal file
BIN
kinevet/img/dice5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
kinevet/img/dice6.png
Normal file
BIN
kinevet/img/dice6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
kinevet/img/freeze.png
Normal file
BIN
kinevet/img/freeze.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
kinevet/img/ghost.png
Normal file
BIN
kinevet/img/ghost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
kinevet/img/green.png
Normal file
BIN
kinevet/img/green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
kinevet/img/ignite.png
Normal file
BIN
kinevet/img/ignite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
kinevet/img/info_icon.png
Normal file
BIN
kinevet/img/info_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
kinevet/img/level2.png
Normal file
BIN
kinevet/img/level2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
kinevet/img/level3.png
Normal file
BIN
kinevet/img/level3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
kinevet/img/level4.png
Normal file
BIN
kinevet/img/level4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
kinevet/img/red.png
Normal file
BIN
kinevet/img/red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
kinevet/img/yellow.png
Normal file
BIN
kinevet/img/yellow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
143
kinevet/index.html
Normal file
143
kinevet/index.html
Normal file
@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ki nevet a végén</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
|
||||
<!--Húsvétra jó lesz 🐰🥚-->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1 class="display-3">Ki nevet a végén?</h1>
|
||||
</header>
|
||||
<div id="gamemode">
|
||||
<h3 class="display-4">Játékmód kiválasztása</h3>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="gamemodes" onclick="init(2)">
|
||||
<img class="img-thumbnail img-fluid" src="img/level2.png" width="300px" alt="2 játékos mód" title="2 játékos mód">
|
||||
<p class="lead">2 játékos mód</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="gamemodes" onclick="init(3)">
|
||||
<img class="img-thumbnail img-fluid" src="img/level3.png" alt="3 játékos mód" title="3 játékos mód">
|
||||
<p class="lead">3 játékos mód</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4" onclick="init(4)">
|
||||
<div class="gamemodes">
|
||||
<img class="img-thumbnail img-fluid" src="img/level4.png" alt="4 játékos mód" title="4 játékos mód">
|
||||
<p class="lead">4 játékos mód</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game" id="game">
|
||||
<div class="center">
|
||||
<div class="jumbotron inside dice">
|
||||
<img src="img/dice1.png" class="rounded" alt="dobókocka" id="dice" title="dobókocka">
|
||||
<button id="roll" type="button" class="btn btn-outline-secondary" onclick="dice()">DOBÁS</button>
|
||||
</div>
|
||||
<div class="jumbotron inside2">
|
||||
<img src="img/info_icon.png" style="width: 30px; height: 30px; position: absolute; right: 0px; top: 0px;" data-toggle="modal" data-target="#guideModalLong" alt="Guide" title="Segítség">
|
||||
<div class="circle">
|
||||
<img src="img/blue.png" class="rounded" alt="Játékos" id="nextPlayer" title="Kék játékos">
|
||||
</div>
|
||||
<div class="nextPlayer">
|
||||
<h5>A soron következő játékos</h5>
|
||||
<p id="nextPlayerColor">Kék</p>
|
||||
<div class="abilities row">
|
||||
<div class="col-4"><img id="ability1" style="background-color: green;" src="img/ignite.png" onclick="spell(1)" class="img-thumbnail img-fluid zoom" title="A dobás után felégeti az áthaladott mezőket a játékos következő köréig." alt="Felégetés"></div>
|
||||
<div class="col-4"><img id="ability2" style="background-color: green;" src="img/ghost.png" onclick="spell(2)" class="img-thumbnail img-fluid zoom" title="A dobott érték kétszeresével lép előre a játékos." alt="Gyorsaság"></div>
|
||||
<div class="col-4"><img id="ability3" style="background-color: green;" src="img/freeze.png" onclick="spell(3)" class="img-thumbnail img-fluid zoom" title="A legelső játékos kimarad egy körből." alt="Fagyasztás"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
<div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="guideModalLong" tabindex="-1" role="dialog" aria-labelledby="guideModalLongTitle" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="guideModalLongTitle">Segítség</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="guide">
|
||||
<div class="row">
|
||||
<div class="smallCircle" style="background-color: darkblue;"></div>
|
||||
<div class="display-5 guideText">Újratölti a játékos összes képességet</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="smallCircle" style="background-color: magenta;"></div>
|
||||
<div class="display-5 guideText">A játékos még egyszer dobhat</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="smallCircle" style="background-color: aqua;"></div>
|
||||
<div class="display-5 guideText">A játékos kimarad a körből</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="display-5 guideText">A képességek bővebb leírásához vidd fölé az egeret!</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div class="display-5" style="text-align: right; font-weight: lighter;">Note: A képességek a kocka eldobásával sülnek el</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="winner container" id="winner">
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLongTitle" style="font-size: 30px;">Győztes</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<img src="img/crown.png" width="350px" style="position: absolute; top: -65px; left: 80px;">
|
||||
<br>
|
||||
<br>
|
||||
<img src="" id="winnerColor" class="center" style="width: 100px;" alt="">
|
||||
<br>
|
||||
<h4 class="text-center" id="winnerText"></h4>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Bezárás</button>
|
||||
<button type="button" class="btn btn-success" onclick="location.reload();">Új játék</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
386
kinevet/script.js
Normal file
386
kinevet/script.js
Normal file
@ -0,0 +1,386 @@
|
||||
var canvas;
|
||||
/** @type {CanvasRenderingContext2D} */
|
||||
var ctx;
|
||||
/** @type {Array} */
|
||||
var game = [];
|
||||
/** @type {Array} */
|
||||
var players = [];
|
||||
var fieldCount = 0;
|
||||
var playerCount = 0;
|
||||
var currentPlayer = 0;
|
||||
var doubleBuff = false;
|
||||
var igniteBuff = false;
|
||||
var frostBuff = false;
|
||||
var nextplayer = true;
|
||||
var inAnimation = false;
|
||||
|
||||
class Field {
|
||||
constructor(id, x, y) {
|
||||
this.id = id;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.color = "yellow";
|
||||
this.extrafield = 0;
|
||||
this.ignited = false;
|
||||
this.igniteID = -1;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = this.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, 20, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.font = "20px Arial"
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillText(this.id, this.x, this.y, 32);
|
||||
}
|
||||
}
|
||||
|
||||
class Player {
|
||||
constructor(color) {
|
||||
this.color = color;
|
||||
this.image = new Image();
|
||||
this.image.src = "img/" + color + ".png";
|
||||
this.position = 0;
|
||||
this.setField(game[0]);
|
||||
this.spells = [true, true, true];
|
||||
this.spellsTemporary = [false, false, false];
|
||||
this.skipTurn = false;
|
||||
}
|
||||
setField(field) {
|
||||
this.position = field.id;
|
||||
this.x = field.x - 10;
|
||||
this.y = field.y - 20;
|
||||
}
|
||||
draw() {
|
||||
ctx.drawImage(this.image, this.x, this.y, 20, 40);
|
||||
}
|
||||
spell(x) {
|
||||
if (!inAnimation) {
|
||||
if (this.spells[x - 1]) {
|
||||
switch (x) {
|
||||
case 1:
|
||||
this.spellsTemporary[x - 1] = !this.spellsTemporary[x - 1];
|
||||
if (!igniteBuff) {
|
||||
igniteBuff = true;
|
||||
document.getElementById("ability" + x).style.backgroundColor = "blue";
|
||||
} else {
|
||||
igniteBuff = false;
|
||||
document.getElementById("ability" + x).style.backgroundColor = "green";
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
this.spellsTemporary[x - 1] = !this.spellsTemporary[x - 1];
|
||||
if (!doubleBuff) {
|
||||
doubleBuff = true;
|
||||
document.getElementById("ability" + x).style.backgroundColor = "blue";
|
||||
} else {
|
||||
doubleBuff = false;
|
||||
document.getElementById("ability" + x).style.backgroundColor = "green";
|
||||
};
|
||||
break;
|
||||
case 3:
|
||||
this.spellsTemporary[x - 1] = !this.spellsTemporary[x - 1];
|
||||
if (!frostBuff) {
|
||||
frostBuff = true;
|
||||
document.getElementById("ability" + x).style.backgroundColor = "blue";
|
||||
} else {
|
||||
frostBuff = false;
|
||||
document.getElementById("ability" + x).style.backgroundColor = "green";
|
||||
};
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function init(x) {
|
||||
playerCount = x;
|
||||
document.getElementById("gamemode").style.display = "none";
|
||||
document.getElementById("game").style.display = "block";
|
||||
canvas = document.getElementById("canvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
generateFields();
|
||||
addPlayers();
|
||||
redraw();
|
||||
}
|
||||
|
||||
function generateFields() {
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
game.push(new Field(fieldCount++, i * 60, 60));
|
||||
}
|
||||
|
||||
game.push(new Field(fieldCount++, 540, 120));
|
||||
game.push(new Field(fieldCount++, 540, 180));
|
||||
game.push(new Field(fieldCount++, 540, 240));
|
||||
|
||||
for (let i = 9; i >= 1; i--) {
|
||||
game.push(new Field(fieldCount++, i * 60, 300));
|
||||
}
|
||||
|
||||
game.push(new Field(fieldCount++, 60, 360));
|
||||
game.push(new Field(fieldCount++, 60, 420));
|
||||
game.push(new Field(fieldCount++, 60, 480));
|
||||
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
game.push(new Field(fieldCount++, i * 60, 540));
|
||||
}
|
||||
|
||||
// Start mező
|
||||
game[0].color = "lime";
|
||||
// Cél
|
||||
game[32].color = "lime";
|
||||
|
||||
// Kimarad egy körből
|
||||
for (const index of [6, 15, 22, 30]) {
|
||||
game[index].extraField = 1;
|
||||
game[index].color = "aqua";
|
||||
}
|
||||
|
||||
// Mégegyszer jön
|
||||
for (const index of [9, 16, 25]) {
|
||||
game[index].extraField = 2;
|
||||
game[index].color = "magenta";
|
||||
}
|
||||
|
||||
// Visszatölti a képességeket
|
||||
for (const index of [1, 11, 21]) {
|
||||
game[index].extraField = 3;
|
||||
game[index].color = "darkblue";
|
||||
}
|
||||
}
|
||||
|
||||
function addPlayers() {
|
||||
players.push(new Player("blue"));
|
||||
players.push(new Player("green"));
|
||||
if (playerCount > 2) {
|
||||
players.push(new Player("red"));
|
||||
if (playerCount == 4) {
|
||||
players.push(new Player("yellow"));
|
||||
}
|
||||
}
|
||||
players[currentPlayer].image.onload = function () {
|
||||
players[currentPlayer].draw();
|
||||
}
|
||||
}
|
||||
|
||||
function redraw() {
|
||||
ctx.clearRect(0, 0, 600, 600);
|
||||
for (let i = 0; i < fieldCount; i++) {
|
||||
game[i].draw();
|
||||
}
|
||||
for (let i = 0; i < playerCount; i++) {
|
||||
players[i].draw();
|
||||
}
|
||||
}
|
||||
|
||||
function nextStep(amount) {
|
||||
nextplayer = false;
|
||||
document.getElementById("roll").disabled = true;
|
||||
// Ha a játékos másik játékosra lépne
|
||||
if (amount != 0) {
|
||||
while (isThereAPlayer(players[currentPlayer].position + amount)) {
|
||||
amount++;
|
||||
}
|
||||
}
|
||||
// Ha túl sokat lépne a játékos vagy túl keveset
|
||||
if (amount > 32 - players[currentPlayer].position) {
|
||||
amount = 32 - players[currentPlayer].position;
|
||||
}
|
||||
if (amount < -players[currentPlayer].position) {
|
||||
amount = -players[currentPlayer].position;
|
||||
}
|
||||
animateToNextField(amount);
|
||||
}
|
||||
|
||||
function isThereAPlayer(pos) {
|
||||
for (let i = 0; i < playerCount; i++) {
|
||||
if (players[i].position == pos) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function endStep() {
|
||||
if (players[currentPlayer].position == 32) {
|
||||
winner(players[currentPlayer].color);
|
||||
return;
|
||||
}
|
||||
if (game[players[currentPlayer].position].ignited) {
|
||||
animateToNextField(-1);
|
||||
} else {
|
||||
// Extra mező
|
||||
switch (game[players[currentPlayer].position].extraField) {
|
||||
case 1:
|
||||
// Kimarad egy körből
|
||||
players[currentPlayer].skipTurn = true;
|
||||
break;
|
||||
// Mégegyszer jön nem itt van kezelve (2)
|
||||
case 3:
|
||||
// Újratölti a képességeit
|
||||
players[currentPlayer].spells = [true, true, true];
|
||||
players[currentPlayer].spellsTemporary = [false, false, false];
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
// Teszteli, ha a következő játékos kimaradna
|
||||
while (players[(currentPlayer + 1) % playerCount].skipTurn) {
|
||||
currentPlayer = (currentPlayer + 1) % playerCount;
|
||||
players[currentPlayer].skipTurn = false;
|
||||
}
|
||||
// Következő játékos, ha nem mégegyszer jön
|
||||
if (game[players[currentPlayer].position].extraField != 2) {
|
||||
currentPlayer = (currentPlayer + 1) % playerCount;
|
||||
}
|
||||
nextplayer = true;
|
||||
document.getElementById("roll").disabled = false;
|
||||
switch (currentPlayer) {
|
||||
case 0:
|
||||
document.getElementById("nextPlayer").src = "img/blue.png";
|
||||
document.getElementById("nextPlayer").title = "Kék játékos";
|
||||
document.getElementById("nextPlayerColor").innerHTML = "Kék";
|
||||
break;
|
||||
case 1:
|
||||
document.getElementById("nextPlayer").src = "img/green.png";
|
||||
document.getElementById("nextPlayer").title = "Zöld játékos";
|
||||
document.getElementById("nextPlayerColor").innerHTML = "Zöld";
|
||||
break;
|
||||
case 2:
|
||||
document.getElementById("nextPlayer").src = "img/red.png";
|
||||
document.getElementById("nextPlayer").title = "Piros játékos";
|
||||
document.getElementById("nextPlayerColor").innerHTML = "Piros";
|
||||
break;
|
||||
case 3:
|
||||
document.getElementById("nextPlayer").src = "img/yellow.png";
|
||||
document.getElementById("nextPlayer").title = "Sárga játékos";
|
||||
document.getElementById("nextPlayerColor").innerHTML = "Sárga";
|
||||
break;
|
||||
default:
|
||||
document.getElementById("nextPlayer").src = "img/blue.png";
|
||||
document.getElementById("nextPlayer").title = "Kék játékos";
|
||||
document.getElementById("nextPlayerColor").innerHTML = "Kék";
|
||||
}
|
||||
game.forEach((element, index, array) => {
|
||||
if (element.igniteID == currentPlayer) {
|
||||
var array1 = [6, 15, 22, 30];
|
||||
var array2 = [9, 16, 25];
|
||||
element.ignited = false;
|
||||
element.color = "yellow";
|
||||
element.igniteID = -1;
|
||||
if (array1.includes(index)) {
|
||||
element.color = "aqua";
|
||||
} else if (array2.includes(index)) {
|
||||
element.color = "magenta";
|
||||
}
|
||||
}
|
||||
});
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (!players[currentPlayer].spells[i]) {
|
||||
document.getElementById("ability" + (i + 1).toString()).style.backgroundColor = "red";
|
||||
document.getElementById("ability" + (i + 1).toString()).classList.remove("zoom");
|
||||
} else {
|
||||
document.getElementById("ability" + (i + 1).toString()).style.backgroundColor = "green";
|
||||
document.getElementById("ability" + (i + 1).toString()).classList.add("zoom");
|
||||
}
|
||||
}
|
||||
inAnimation = false;
|
||||
}
|
||||
}
|
||||
|
||||
function animateToNextField(amount) {
|
||||
var currentField = game[players[currentPlayer].position];
|
||||
var nextField;
|
||||
if (amount > 0) {
|
||||
nextField = game[players[currentPlayer].position + 1];
|
||||
amount--;
|
||||
} else if (amount < 0) {
|
||||
nextField = game[players[currentPlayer].position - 1];
|
||||
amount++;
|
||||
} else {
|
||||
if (!nextplayer) {
|
||||
endStep();
|
||||
}
|
||||
return;
|
||||
}
|
||||
var direction = [];
|
||||
direction[0] = nextField.x - currentField.x;
|
||||
direction[1] = nextField.y - currentField.y;
|
||||
direction[0] /= 60;
|
||||
direction[1] /= 60;
|
||||
var count = 0;
|
||||
var timer = setInterval(function () {
|
||||
players[currentPlayer].x += direction[0] * 2;
|
||||
players[currentPlayer].y += direction[1] * 2;
|
||||
redraw();
|
||||
if (++count == 30) {
|
||||
clearInterval(timer);
|
||||
players[currentPlayer].setField(nextField);
|
||||
setTimeout(animateToNextField, 120, amount);
|
||||
}
|
||||
}, 16, direction, nextField);
|
||||
}
|
||||
|
||||
function dice() {
|
||||
inAnimation = true;
|
||||
random = Math.floor(Math.random() * 6 + 1);
|
||||
document.getElementById("dice").src = "img/dice" + random + ".png";
|
||||
if (doubleBuff) {
|
||||
random *= 2;
|
||||
doubleBuff = false;
|
||||
}
|
||||
if (igniteBuff) {
|
||||
igniteBuff = false;
|
||||
var a = players[currentPlayer].position;
|
||||
var b = players[currentPlayer].position + random;
|
||||
for (var i = a + 1; i < b; i++) {
|
||||
game[i].ignited = true;
|
||||
game[i].color = "red";
|
||||
game[i].igniteID = currentPlayer;
|
||||
}
|
||||
redraw();
|
||||
}
|
||||
if (frostBuff) {
|
||||
frostBuff = false;
|
||||
var a = 0;
|
||||
players.forEach((element, index, array) => {
|
||||
if (element.position > players[a].position) a = index;
|
||||
});
|
||||
players[a].skipTurn = true;
|
||||
}
|
||||
for (var i = 0; i < 3; i++) {
|
||||
if (players[currentPlayer].spellsTemporary[i])
|
||||
players[currentPlayer].spells[i] = false;
|
||||
}
|
||||
nextStep(random);
|
||||
}
|
||||
|
||||
function spell(x) {
|
||||
players[currentPlayer].spell(x)
|
||||
}
|
||||
|
||||
function winner(x) {
|
||||
document.getElementById("winnerColor").src = "img/" + x + ".png";
|
||||
switch (x) {
|
||||
case "green":
|
||||
document.getElementById("winnerText").innerHTML = "A zöld játékos nyert!";
|
||||
break;
|
||||
case "red":
|
||||
document.getElementById("winnerText").innerHTML = "A piros játékos nyert!";
|
||||
break;
|
||||
case "blue":
|
||||
document.getElementById("winnerText").innerHTML = "A kék játékos nyert!";
|
||||
break;
|
||||
case "yellow":
|
||||
document.getElementById("winnerText").innerHTML = "A sárga játékos nyert!";
|
||||
break;
|
||||
default:
|
||||
document.getElementById("winnerText").innerHTML = "A játékos nyert!";
|
||||
}
|
||||
document.getElementById("winnerText");
|
||||
$('#exampleModalCenter').modal('show')
|
||||
|
||||
}
|
||||
137
kinevet/style.css
Normal file
137
kinevet/style.css
Normal file
@ -0,0 +1,137 @@
|
||||
#canvas {
|
||||
display: block;
|
||||
margin: auto;
|
||||
background-color: lightgray;
|
||||
|
||||
}
|
||||
#gamemode{
|
||||
text-align: center;
|
||||
}
|
||||
#gamemode p{
|
||||
margin-top: 50px;
|
||||
font-size: 25px;
|
||||
}
|
||||
#game{
|
||||
display: none;
|
||||
}
|
||||
h1{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
h3{
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.center{
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 600px;
|
||||
}
|
||||
.inside{
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
height: 150px;
|
||||
top: 490px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.dice img{
|
||||
margin-left: 30px;
|
||||
margin-top: -45px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.dice button{
|
||||
margin-top: -45px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.inside2{
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
height: 150px;
|
||||
top: 250px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.inside2 img{
|
||||
margin-left: 36px;
|
||||
height: 130px;
|
||||
}
|
||||
.circle {
|
||||
margin-top: -60px;
|
||||
height: 140px;
|
||||
width: 140px;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
border: 5px yellow solid;
|
||||
}
|
||||
.nextPlayer{
|
||||
margin-left: 130px;
|
||||
margin-top: -120px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.nextPlayer p{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gamemodes{
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
.gamemodes:hover{
|
||||
-webkit-transform: scale(1.05);
|
||||
-moz-transform: scale(1.05);
|
||||
-o-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
-webkit-transform-origin: top right;
|
||||
-moz-transform-origin: top right;
|
||||
-o-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gamemodes img{
|
||||
scale: 140%;
|
||||
|
||||
}
|
||||
.abilities{
|
||||
width: 250px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.abilities img{
|
||||
height: 50px;
|
||||
}
|
||||
.zoom:hover{
|
||||
-webkit-transform: scale(1.05);
|
||||
-moz-transform: scale(1.05);
|
||||
-o-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
-webkit-transform-origin: top right;
|
||||
-moz-transform-origin: top right;
|
||||
-o-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
cursor: pointer;
|
||||
}
|
||||
.guide{
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.guide .row{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.smallCircle{
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.guideText{
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
68
owheroes/damage.html
Normal file
68
owheroes/damage.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="icon" href="imgs/owicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<title>OW Heroes - Damage</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="jumbotron" id="fejlec">
|
||||
<h1 class="display-3 text-center cim">Overwatch Heroes</h1>
|
||||
<div class="menu">
|
||||
<div class="row nopadding">
|
||||
<div class="col-md-8 d-none d-md-block nopadding">
|
||||
<p class="roles nopadding">ROLES</p>
|
||||
</div>
|
||||
<div class="col-md-4 nopadding"><a class="play nopadding" href="index.html">TIC TAC TOE</a></div>
|
||||
</div>
|
||||
<div class="row nav nopadding">
|
||||
<div class="col-md-8 nopadding">
|
||||
<div class="row nopadding">
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role active" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""> DAMAGE</a>
|
||||
<a class="d-sm-none d-block role active" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""></a>
|
||||
</div>
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""> TANK</a>
|
||||
<a class="d-sm-none d-block role" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""></a>
|
||||
</div>
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""> SUPPORT</a>
|
||||
<a class="d-sm-none d-block role" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 nopadding">
|
||||
<p class="credit">CREATAED BY:<img class="owlogo" src="imgs/owlogo.png" alt=""><br> BALDAUF MÁRTON</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row nopadding jumbotron" id="torzs">
|
||||
<article class="col-md-4">
|
||||
<h1 class="hero">Soldier: 76</h1>
|
||||
<p class="text-justify">Armed with cutting-edge weaponry, including an experimental pulse rifle that’s capable of firing spirals of high-powered Helix Rockets, Soldier: 76 has the speed and support know-how of a highly trained warrior.</p>
|
||||
<img class="img-thumbnail" src="imgs/heroes/soldier76.png" alt="">
|
||||
</article>
|
||||
<article class="col-md-4">
|
||||
<h1 class="hero">Genji</h1>
|
||||
<p class="text-justify">Genji flings precise and deadly Shuriken at his targets, and uses his technologically-advanced katana to deflect projectiles or deliver a Swift Strike that cuts down enemies. </p>
|
||||
<img class="img-thumbnail" src="imgs/heroes/genji.png" alt="">
|
||||
</article>
|
||||
<article class="col-md-4">
|
||||
<h1 class="hero">Tracer</h1>
|
||||
<p class="text-justify">Toting twin pulse pistols, energy-based time bombs, and rapid-fire banter, Tracer is able to "blink" through space and rewind her personal timeline as she battles to right wrongs the world over. </p>
|
||||
<img class="img-thumbnail" src="imgs/heroes/tracer.png" alt="">
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
owheroes/fonts/FuturaNo2D.ttf
Normal file
BIN
owheroes/fonts/FuturaNo2D.ttf
Normal file
Binary file not shown.
BIN
owheroes/fonts/bignoodletoo.ttf
Normal file
BIN
owheroes/fonts/bignoodletoo.ttf
Normal file
Binary file not shown.
BIN
owheroes/imgs/background.png
Normal file
BIN
owheroes/imgs/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 MiB |
BIN
owheroes/imgs/damage.png
Normal file
BIN
owheroes/imgs/damage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
owheroes/imgs/heroes/dva.png
Normal file
BIN
owheroes/imgs/heroes/dva.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
BIN
owheroes/imgs/heroes/genji.png
Normal file
BIN
owheroes/imgs/heroes/genji.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
owheroes/imgs/heroes/lucio.png
Normal file
BIN
owheroes/imgs/heroes/lucio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
owheroes/imgs/heroes/mercy.png
Normal file
BIN
owheroes/imgs/heroes/mercy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
owheroes/imgs/heroes/reinhardt.png
Normal file
BIN
owheroes/imgs/heroes/reinhardt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
BIN
owheroes/imgs/heroes/soldier76.png
Normal file
BIN
owheroes/imgs/heroes/soldier76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
owheroes/imgs/heroes/tracer.png
Normal file
BIN
owheroes/imgs/heroes/tracer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
owheroes/imgs/heroes/winston.png
Normal file
BIN
owheroes/imgs/heroes/winston.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
BIN
owheroes/imgs/heroes/zenyatta.png
Normal file
BIN
owheroes/imgs/heroes/zenyatta.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
owheroes/imgs/icons/Windows10Upgrade9252.exe
Normal file
BIN
owheroes/imgs/icons/Windows10Upgrade9252.exe
Normal file
Binary file not shown.
BIN
owheroes/imgs/icons/dva.png
Normal file
BIN
owheroes/imgs/icons/dva.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
owheroes/imgs/icons/genji.png
Normal file
BIN
owheroes/imgs/icons/genji.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
owheroes/imgs/icons/lucio.png
Normal file
BIN
owheroes/imgs/icons/lucio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
owheroes/imgs/icons/mercy.png
Normal file
BIN
owheroes/imgs/icons/mercy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
owheroes/imgs/icons/reinhardt.png
Normal file
BIN
owheroes/imgs/icons/reinhardt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
owheroes/imgs/icons/soldier76.png
Normal file
BIN
owheroes/imgs/icons/soldier76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
owheroes/imgs/icons/tracer.png
Normal file
BIN
owheroes/imgs/icons/tracer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
owheroes/imgs/icons/winston.png
Normal file
BIN
owheroes/imgs/icons/winston.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
owheroes/imgs/icons/zenyatta.png
Normal file
BIN
owheroes/imgs/icons/zenyatta.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
owheroes/imgs/owicon.png
Normal file
BIN
owheroes/imgs/owicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
BIN
owheroes/imgs/owlogo.png
Normal file
BIN
owheroes/imgs/owlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
owheroes/imgs/support.png
Normal file
BIN
owheroes/imgs/support.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
owheroes/imgs/tank.png
Normal file
BIN
owheroes/imgs/tank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
132
owheroes/index.html
Normal file
132
owheroes/index.html
Normal file
@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="icon" href="imgs/owlogo.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<script src="tictactoe.js"></script>
|
||||
<title>Tic Tact Toe</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="jumbotron" id="fejlec">
|
||||
<h1 class="display-3 text-center cim">Overwatch Heroes</h1>
|
||||
<div class="row nopadding">
|
||||
<div class="col-md-8 d-none d-md-block nopadding">
|
||||
<p class="roles nopadding">ROLES</p>
|
||||
</div>
|
||||
<div class="col-md-4 nopadding"><a class="play playing nopadding" href="index.html">TIC TAC TOE</a></div>
|
||||
</div>
|
||||
<div class="row nav nopadding">
|
||||
<div class="col-md-8 nopadding">
|
||||
<div class="row nopadding">
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""> DAMAGE</a>
|
||||
<a class="d-sm-none d-block role" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""></a>
|
||||
</div>
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""> TANK</a>
|
||||
<a class="d-sm-none d-block role" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""></a>
|
||||
</div>
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""> SUPPORT</a>
|
||||
<a class="d-sm-none d-block role" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 nopadding">
|
||||
<p class="credit">CREATAED BY:<img class="owlogo" src="imgs/owlogo.png" alt=""><br> BALDAUF MÁRTON</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row nopadding jumbotron" id="torzs">
|
||||
<div id="blue" class="col-xl-3">
|
||||
<table id="blueheroselect" class="d-block">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3">
|
||||
<p class="hero nopadding">Select your hero!</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<script>
|
||||
var heroes = ["soldier76", "genji", "tracer", "reinhardt", "dva", "winston", "mercy", "zenyatta", "lucio"];
|
||||
for (i = 0; i < 3; i++) {
|
||||
document.write('<tr>');
|
||||
for (j = 0; j < 3; j++) {
|
||||
document.write('<td class="selecthero"><input type="button" class="heroicon" id="blue-' + heroes[i * 3 + j] + '" onclick="selectedblue(event)"></td>');
|
||||
document.getElementById("blue-" + heroes[i * 3 + j]).style.backgroundImage = 'url("imgs/icons/' + heroes[i * 3 + j] + '.png")';
|
||||
}
|
||||
document.write('</tr>');
|
||||
}
|
||||
</script>
|
||||
</tbody>
|
||||
</table>
|
||||
<p id="bluegameover" class="hero display-3 nopadding d-none"></p>
|
||||
</div>
|
||||
<div id="green" class="col-xl-6">
|
||||
<table class="board">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3">
|
||||
<p class="display-3 text-center hero nopadding">Tic-Tac-Toe</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<script>
|
||||
for (i = 0; i < 3; i++) {
|
||||
document.write('<tr>');
|
||||
for (j = 0; j < 3; j++) {
|
||||
document.write('<td><input class="tictactoe nopadding" type="button" id="p' + j + i + '" onclick="game(event)"></td>');
|
||||
}
|
||||
document.write('</tr>');
|
||||
}
|
||||
</script>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="3">
|
||||
<p id="score" class="hero display-3 nopadding"></p>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="controls"><input class="newgame nopadding" type="button" value="NEW GAME" onclick="newgame()"></div>
|
||||
</div>
|
||||
<div id="red" class="col-xl-3">
|
||||
<table id="redheroselect" class="d-block">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3">
|
||||
<p class="hero nopadding">Select your hero!</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<script>
|
||||
var heroes = ["soldier76", "genji", "tracer", "reinhardt", "dva", "winston", "mercy", "zenyatta", "lucio"];
|
||||
for (i = 0; i < 3; i++) {
|
||||
document.write('<tr>');
|
||||
for (j = 0; j < 3; j++) {
|
||||
document.write('<td class="selecthero"><input type="button" class="heroicon" id="red-' + heroes[i * 3 + j] + '" onclick="selectedred(event)"></td>')
|
||||
document.getElementById("red-" + heroes[i * 3 + j]).style.backgroundImage = 'url("imgs/icons/' + heroes[i * 3 + j] + '.png")';
|
||||
}
|
||||
document.write('</tr>');
|
||||
}
|
||||
</script>
|
||||
</tbody>
|
||||
</table>
|
||||
<p id="redgameover" class="hero display-3 nopadding d-none"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
250
owheroes/style.css
Normal file
250
owheroes/style.css
Normal file
@ -0,0 +1,250 @@
|
||||
@font-face {
|
||||
font-family: BigNoodleToo;
|
||||
src: url("fonts/bignoodletoo.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: FuturaNo2D;
|
||||
src: url("fonts/FuturaNo2D.ttf");
|
||||
}
|
||||
|
||||
.nopadding {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("imgs/background.png");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#fejlec {
|
||||
background-color: rgba(224, 224, 255, 0.5);
|
||||
padding: 50px 0px 0px 0px;
|
||||
}
|
||||
|
||||
#torzs {
|
||||
background-color: rgba(224, 224, 255, 0.5);
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
.cim {
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.roles,
|
||||
.play {
|
||||
line-height: 75px;
|
||||
display: block;
|
||||
font-family: BigNoodleToo;
|
||||
font-size: 60px;
|
||||
color: white;
|
||||
text-shadow: -1px 0 rgba(0, 0, 0, 0.5), 0 1px rgba(0, 0, 0, 0.5), 1px 0 rgba(0, 0, 0, 0.5), 0 -1px rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
background-color: rgba(43, 55, 83, 0.25);
|
||||
}
|
||||
|
||||
.roles {
|
||||
border-right: solid 1px black;
|
||||
}
|
||||
|
||||
.play:hover {
|
||||
font-size: 75px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.playing {
|
||||
font-size: 75px;
|
||||
background-image: radial-gradient(white 5%, white 18%, rgba(0, 0, 0, 0) 75%)
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: rgb(43, 55, 83);
|
||||
}
|
||||
|
||||
.imgroles {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.role {
|
||||
line-height: 50px;
|
||||
color: rgb(0, 191, 255);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
font-family: FuturaNo2D;
|
||||
font-size: 25px;
|
||||
border-right: solid 1px black;
|
||||
}
|
||||
|
||||
.role:hover {
|
||||
color: rgb(0, 191, 255);
|
||||
text-decoration: none;
|
||||
background-color: rgb(43, 55, 83);
|
||||
border-bottom: solid 6px rgb(0, 191, 255);
|
||||
}
|
||||
|
||||
.active {
|
||||
color: white !important;
|
||||
background-color: rgba(0, 191, 255, 0.75) !important;
|
||||
border-bottom: solid 6px rgb(0, 191, 255);
|
||||
}
|
||||
|
||||
.credit {
|
||||
line-height: 20px;
|
||||
color: rgb(0, 191, 255);
|
||||
;
|
||||
font-family: FuturaNo2D;
|
||||
text-align: right;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.owlogo {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
float: right;
|
||||
border-left: solid 1px black;
|
||||
margin: -5px -5px -5px 5px;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
font-family: BigNoodleToo;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.img-thumbnail {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 1px 1px 0 3px gray;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/*Tic Tac Toe*/
|
||||
|
||||
#red {
|
||||
padding: 15px;
|
||||
background-color: rgb(255, 128, 128);
|
||||
}
|
||||
|
||||
#green {
|
||||
padding: 15px;
|
||||
background-color: rgb(128, 255, 128);
|
||||
}
|
||||
|
||||
#blue {
|
||||
padding: 15px;
|
||||
background-color: rgb(128, 128, 255);
|
||||
}
|
||||
|
||||
input {
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 50px auto;
|
||||
width: 225px;
|
||||
}
|
||||
|
||||
td {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.heroicon {
|
||||
background-color: black;
|
||||
border: solid white 1px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.board {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tictactoe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: solid 2px black;
|
||||
}
|
||||
|
||||
#score {
|
||||
text-shadow: 1px 1px 3px #000000;
|
||||
display: block;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
background-color: black;
|
||||
margin: 15px -15px -15px -15px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.newgame {
|
||||
position: relative;
|
||||
font-size: 25px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-family: FuturaNo2D;
|
||||
background-color: rgb(255, 200, 0);
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.newgame:hover {
|
||||
background-color: rgba(255, 200, 0, 0.8);
|
||||
color: white;
|
||||
border: none;
|
||||
outline: 3px solid white;
|
||||
text-decoration: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
td.selecthero {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#blueheroselect>thead>tr>th>p,
|
||||
#redheroselect>thead>tr>th>p {
|
||||
display: block;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
#bluegameover,
|
||||
#redgameover {
|
||||
text-shadow: 1px 1px 3px #000000;
|
||||
height: 530px;
|
||||
line-height: 530px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
68
owheroes/support.html
Normal file
68
owheroes/support.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="icon" href="imgs/owlogo.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<title>OW Heroes - Support</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="jumbotron" id="fejlec">
|
||||
<h1 class="display-3 text-center cim">Overwatch Heroes</h1>
|
||||
<div class="menu">
|
||||
<div class="row nopadding">
|
||||
<div class="col-md-8 d-none d-md-block nopadding">
|
||||
<p class="roles nopadding">ROLES</p>
|
||||
</div>
|
||||
<div class="col-md-4 nopadding"><a class="play nopadding" href="index.html">TIC TAC TOE</a></div>
|
||||
</div>
|
||||
<div class="row nav nopadding">
|
||||
<div class="col-md-8 nopadding">
|
||||
<div class="row nopadding">
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""> DAMAGE</a>
|
||||
<a class="d-sm-none d-block role" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""></a>
|
||||
</div>
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""> TANK</a>
|
||||
<a class="d-sm-none d-block role" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""></a>
|
||||
</div>
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role active" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""> SUPPORT</a>
|
||||
<a class="d-sm-none d-block role active" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 nopadding">
|
||||
<p class="credit">CREATAED BY:<img class="owlogo" src="imgs/owlogo.png" alt=""><br> BALDAUF MÁRTON</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row nopadding jumbotron" id="torzs">
|
||||
<article class="col-md-4">
|
||||
<h1 class="hero">Mercy</h1>
|
||||
<p class="text-justify">Mercy’s Valkyrie Suit helps keep her close to teammates like a guardian angel; healing, resurrecting or strengthening them with the beams emanating from her Caduceus Staff.</p>
|
||||
<img class="img-thumbnail" src="imgs/heroes/mercy.png" alt="">
|
||||
</article>
|
||||
<article class="col-md-4">
|
||||
<h1 class="hero">Zenyatta</h1>
|
||||
<p class="text-justify">Zenyatta calls upon orbs of harmony and discord to heal his teammates and weaken his opponents, all while pursuing a transcendent state of immunity to damage.</p>
|
||||
<img class="img-thumbnail" src="imgs/heroes/zenyatta.png" alt="">
|
||||
</article>
|
||||
<article class="col-md-4">
|
||||
<h1 class="hero">Lucio</h1>
|
||||
<p class="text-justify">On the battlefield, Lúcio’s cutting-edge Sonic Amplifier buffets enemies with projectiles and knocks foes back with blasts of sound. His songs can both heal his team or boost their movement speed, and he can switch between tracks on the fly.</p>
|
||||
<img class="img-thumbnail" src="imgs/heroes/lucio.png" alt="">
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
68
owheroes/tank.html
Normal file
68
owheroes/tank.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="icon" href="imgs/owlogo.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<title>OW Heroes - Tank</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="jumbotron" id="fejlec">
|
||||
<h1 class="display-3 text-center cim">Overwatch Heroes</h1>
|
||||
<div class="menu">
|
||||
<div class="row nopadding">
|
||||
<div class="col-md-8 d-none d-md-block nopadding">
|
||||
<p class="roles nopadding">ROLES</p>
|
||||
</div>
|
||||
<div class="col-md-4 nopadding"><a class="play nopadding" href="index.html">TIC TAC TOE</a></div>
|
||||
</div>
|
||||
<div class="row nav nopadding">
|
||||
<div class="col-md-8 nopadding">
|
||||
<div class="row nopadding">
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""> DAMAGE</a>
|
||||
<a class="d-sm-none d-block role" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""></a>
|
||||
</div>
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role active" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""> TANK</a>
|
||||
<a class="d-sm-none d-block role active" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""></a>
|
||||
</div>
|
||||
<div class="col-4 nopadding">
|
||||
<a class="d-sm-block d-none role" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""> SUPPORT</a>
|
||||
<a class="d-sm-none d-block role" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 nopadding">
|
||||
<p class="credit">CREATAED BY:<img class="owlogo" src="imgs/owlogo.png" alt=""><br> BALDAUF MÁRTON</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row nopadding jumbotron" id="torzs">
|
||||
<article class="col-md-4">
|
||||
<h1 class="hero">Reinhardt</h1>
|
||||
<p class="text-justify">Clad in powered armor and swinging his hammer, Reinhardt leads a rocket-propelled charge across the battleground and defends his squadmates with a massive energy barrier.</p>
|
||||
<img class="img-thumbnail" src="imgs/heroes/reinhardt.png" alt="">
|
||||
</article>
|
||||
<article class="col-md-4">
|
||||
<h1 class="hero">D. VA</h1>
|
||||
<p class="text-justify">D.Va’s mech is nimble and powerful—its twin Fusion Cannons blast away with autofire at short range, and she can use its Boosters to barrel over enemies and obstacles, or deflect attacks with her projectile-dismantling Defense Matrix.</p>
|
||||
<img class="img-thumbnail" src="imgs/heroes/dva.png" alt="">
|
||||
</article>
|
||||
<article class="col-md-4">
|
||||
<h1 class="hero">Winston</h1>
|
||||
<p class="text-justify">Winston wields impressive inventions—a jump pack, electricity-blasting Tesla Cannon, portable shield projector and more—with literal gorilla strength.</p>
|
||||
<img class="img-thumbnail" src="imgs/heroes/winston.png" alt="">
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
163
owheroes/tictactoe.js
Normal file
163
owheroes/tictactoe.js
Normal file
@ -0,0 +1,163 @@
|
||||
var round = [0, 0];
|
||||
var p = [];
|
||||
var blue = "";
|
||||
var red = "";
|
||||
var g = false;
|
||||
var bluescore = 0;
|
||||
var redscore = 0;
|
||||
|
||||
for (i=0;i<3;i++)
|
||||
{
|
||||
p[i] = new Array(3);
|
||||
for (j=0;j<3;j++)
|
||||
{
|
||||
p[i][j] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function game(event) {
|
||||
if (g)
|
||||
{
|
||||
var e = event.currentTarget.id;
|
||||
var x = Number(e[1]);
|
||||
var y = Number(e[2]);
|
||||
if (p[x][y] == 0)
|
||||
{
|
||||
round[1]++;
|
||||
if ((round[0] + round[1]) % 2 == 1)
|
||||
{
|
||||
event.currentTarget.style.background = 'url("imgs/icons/' + blue + '.png") blue no-repeat';
|
||||
event.currentTarget.style.backgroundSize = "86px 86px";
|
||||
p[x][y] = -1;
|
||||
console.log("round: " + round[1] + " blue");
|
||||
}
|
||||
else if ((round[0] + round[1]) % 2 == 0)
|
||||
{
|
||||
event.currentTarget.style.background = 'url("imgs/icons/' + red + '.png") red no-repeat';
|
||||
event.currentTarget.style.backgroundSize = "86px 86px";
|
||||
p[x][y] = 1;
|
||||
console.log("round: " + round[1] + " red");
|
||||
}
|
||||
console.log("step: " + x + " " + y);
|
||||
check();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function check() {
|
||||
var temp = 0;
|
||||
for (i=0;i<3;i++)
|
||||
{
|
||||
temp = p[i][0];
|
||||
if (temp == p[i][1] && temp == p[i][2] && temp !=0)
|
||||
{
|
||||
gameover(temp);
|
||||
}
|
||||
temp = p[0][i];
|
||||
if (temp == p[1][i] && temp == p[2][i] && temp != 0)
|
||||
{
|
||||
gameover(temp);
|
||||
}
|
||||
}
|
||||
temp = p[0][0];
|
||||
if (temp == p[1][1] && temp == p[2][2] && temp != 0)
|
||||
{
|
||||
gameover(temp);
|
||||
}
|
||||
temp = p[0][2];
|
||||
if (temp == p[1][1] && temp == p[2][0] && temp != 0)
|
||||
{
|
||||
gameover(temp);
|
||||
}
|
||||
if (round[1] == 9 && g == true)
|
||||
{
|
||||
gameover(0);
|
||||
}
|
||||
}
|
||||
|
||||
function gameover(w) {
|
||||
g = false;
|
||||
console.log("victory: " + w);
|
||||
if (w == -1)
|
||||
{
|
||||
document.getElementById("bluegameover").innerHTML = "Victory!";
|
||||
document.getElementById("bluegameover").style.color = "yellow";
|
||||
document.getElementById("redgameover").innerHTML = "Defeat!";
|
||||
document.getElementById("redgameover").style.color = "red";
|
||||
bluescore++;
|
||||
document.getElementById("score").innerHTML = bluescore + " - " + redscore;
|
||||
document.getElementById("score").style.color = "yellow";
|
||||
}
|
||||
if (w == 1)
|
||||
{
|
||||
document.getElementById("redgameover").innerHTML = "Victory!";
|
||||
document.getElementById("redgameover").style.color = "yellow";
|
||||
document.getElementById("bluegameover").innerHTML = "Defeat!";
|
||||
document.getElementById("bluegameover").style.color = "red";
|
||||
redscore++;
|
||||
document.getElementById("score").innerHTML = bluescore + " - " + redscore;
|
||||
document.getElementById("score").style.color = "yellow";
|
||||
}
|
||||
if (w == 0)
|
||||
{
|
||||
document.getElementById("score").innerHTML = "Draw!";
|
||||
document.getElementById("score").style.color = "orange";
|
||||
}
|
||||
}
|
||||
|
||||
function selectedblue(event) {
|
||||
if (blue == "")
|
||||
{
|
||||
a = String(event.currentTarget.id).split("-");
|
||||
blue = a[1];
|
||||
console.log("blue: " + blue);
|
||||
document.getElementById("blueheroselect").classList.remove("d-block");
|
||||
document.getElementById("blueheroselect").classList.add("d-none");
|
||||
document.getElementById("bluegameover").classList.remove("d-none");
|
||||
document.getElementById("bluegameover").classList.add("d-block");
|
||||
document.getElementById("bluegameover").style.backgroundImage = 'url("imgs/heroes/' + blue + '.png")';
|
||||
startgame();
|
||||
}
|
||||
}
|
||||
|
||||
function selectedred(event) {
|
||||
if (red == "")
|
||||
{
|
||||
a = String(event.currentTarget.id).split("-");
|
||||
red = a[1];
|
||||
console.log("red: " + red);
|
||||
document.getElementById("redheroselect").classList.remove("d-block");
|
||||
document.getElementById("redheroselect").classList.add("d-none");
|
||||
document.getElementById("redgameover").classList.remove("d-none");
|
||||
document.getElementById("redgameover").classList.add("d-block");
|
||||
document.getElementById("redgameover").style.backgroundImage = 'url("imgs/heroes/' + red + '.png")';
|
||||
startgame();
|
||||
}
|
||||
}
|
||||
|
||||
function startgame() {
|
||||
if ((red != "") && (blue != ""))
|
||||
{
|
||||
g = true;
|
||||
}
|
||||
}
|
||||
|
||||
function newgame() {
|
||||
round[0]++;
|
||||
console.log("match: " + round[0]);
|
||||
round[1] = 0;
|
||||
document.getElementById("bluegameover").innerHTML = "";
|
||||
document.getElementById("redgameover").innerHTML = "";
|
||||
document.getElementById("score").innerHTML = bluescore + " - " + redscore;
|
||||
document.getElementById("score").style.color = "yellow";
|
||||
for (i=0;i<3;i++)
|
||||
{
|
||||
for(j=0;j<3;j++)
|
||||
{
|
||||
p[i][j] = 0;
|
||||
document.getElementById("p" + String(i) + String(j)).style.backgroundImage = "none";
|
||||
document.getElementById("p" + String(i) + String(j)).style.backgroundColor = "white";
|
||||
}
|
||||
}
|
||||
g = true;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user