Forum Życie Wieczne Strona Główna Życie Wieczne

 
 FAQFAQ   SzukajSzukaj   UżytkownicyUżytkownicy   GrupyGrupy   GalerieGalerie   RejestracjaRejestracja 
 ProfilProfil   Zaloguj się, by sprawdzić wiadomościZaloguj się, by sprawdzić wiadomości   ZalogujZaloguj 

Javascript

 
Napisz nowy temat   Odpowiedz do tematu    Forum Życie Wieczne Strona Główna -> Offtopic
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Czw 19:47, 28 Sty 2021    Temat postu: Javascript

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czerne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);

// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(tekst, 10, 60);

// funkcja klawisza spacji:

document.body.onkeyup = function(e){
var i=100; // uwaga: var powoduje że zmienna ma zasięg całej funkcji, let ma zasieg od klamry do klamry

if(e.keyCode == 32){

// napis

txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// kolorowy kwadrat

red = Math.random() * 256
green = Math.random() * 256
blue = Math.random() * 256

const rgb = `rgb(${red}, ${green}, ${blue})`;
ctx.fillStyle = rgb;

xp = Math.random()*2000;
yp = Math.random()*1000;
ctx.fillRect(xp, yp, 100, 100);
}
}

</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Czw 19:52, 28 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czerne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);

labirynt1='@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@';
labirynt2='@...................................................@';
labirynt3='@......................@@@..........................@';
labirynt4='@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@';

// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt3, 10, 60);

// funkcja klawisza spacji:

document.body.onkeyup = function(e){
var i=100; // uwaga: var powoduje że zmienna ma zasięg całej funkcji, let ma zasieg od klamry do klamry

if(e.keyCode == 32){

// napis

txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// kolorowy kwadrat

red = Math.random() * 256
green = Math.random() * 256
blue = Math.random() * 256

const rgb = `rgb(${red}, ${green}, ${blue})`;
ctx.fillStyle = rgb;

xp = Math.random()*2000;
yp = Math.random()*1000;
ctx.fillRect(xp, yp, 100, 100);
}
}

</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Czw 20:24, 28 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czerne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);

labirynt1='@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@';
labirynt2='@...................................................@';
labirynt3='@......................@@@..........................@';
labirynt4='@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@';

// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt3, 10, 60);

// funkcja klawisza spacji:

document.body.onkeyup = function(e){
var i=100; // uwaga: var powoduje że zmienna ma zasięg całej funkcji, let ma zasieg od klamry do klamry

if(e.keyCode == 32){

// napis

txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// kolorowy kwadrat

red = Math.random() * 256
green = Math.random() * 256
blue = Math.random() * 256

const rgb = `rgb(${red}, ${green}, ${blue})`;
ctx.fillStyle = rgb;

xp = Math.random()*2000;
yp = Math.random()*1000;
ctx.fillRect(xp, yp, 100, 100);
}
}
/*
QuickBasic:

DEF SEG = 0: REM Ustawienie segmentu pamieci dla instrukcji Peek i Poke
SCREEN 13

REM Nowy typ powstal aby zebrac dane o punktach badanych podczas
REM badania ich widocznosci oraz natepnych ich danych

TYPE rekord
znak AS INTEGER: REM ascii znaku jaki wystepuje w tablicy labiryntu
poczatek AS INTEGER: REM poczatek wystepowania tego znaku gdy wystepuje wielokrotnie
koniec AS INTEGER: REM koniec wystepowania tego znaku gdy wystepuje wielokrotnie
xwtabl AS INTEGER: REM wspolrzedna x tego znaku w tablicy labiryntu
ywtabl AS INTEGER: REM wspolrzedna y tego znaku tablicy labiryntu
wysokosc AS INTEGER
END TYPE
DIM elementy(0 TO 310) AS rekord

REM deklaracje tablic, zwykle pierwszy element o indeksie 0

DIM t$(0 TO 99)
DIM labi(0 TO 160, 0 TO 15) AS INTEGER

REM deklaracje tych zmiennych maja na celu ograniczenie ich wielkosci
REM czyli zwiekszenia predkosci

DIM xgracza, ygracza, n, ktora AS INTEGER
DIM ii, jj, przes, pozp, pozk, xp, xk, r, wys AS INTEGER
DIM i, xpxejj, xpxejj1, jjprzes AS INTEGER

REM przelicznik stopni na radiany to xrad=(pi*xstop)/180
CONST pi = 3.14159: REM przelicznik stopni...
CONST rad = pi / 180: REM ...na radiany to xrad=(pi*xstop)/180

REM przelicznik optyczny dla obliczenia wysokosci sciany
REM wrazenie dali razy wysokosc sciany
CONST optyka! = 50 * 7

REM przelicznik stosunku wysokosci wierszy obrazka do ilosci wierszy
CONST bitekran! = 2 * 1 / 32

REM **********************************************************
REM Mapa geometrii labiryntu.
REM znaki wyznaczaja POLA a nie punkty
REM Litery zarezerwowane beda dla obrazkow na scianach
REM A - sciana pozioma
REM B - sciana pionowa
REM C - krawedz, bloczek widoczny
REM D - krawedz, bloczek niewidoczny
REM kropka, "-", przecinek,"+" ,"*" oznaczaja punkty
REM oddalone od scian i pozwalaja na skok wektora badania o kilka pozycji
REM znak @ - bezwzgledny mur

t$(0) = "@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@"
t$(1) = "@DAAAAAAAAAAAAAAAAD@@@DAAAAAAAAAAAAAAAAAAAAAAAD@"
t$(2) = "@B................B@@@B.......................B@"
t$(3) = "@B.--------------.B@@@B.---------------------.B@"
t$(4) = "@B....-,,,,,,,,,-.CAAAC.-,,,,,,,,,,,,,,,,-....B@"
t$(5) = "@DAAC.-,+++++++,-.......-,++++++++++++++,-.CAAD@"
t$(6) = "@@@@B.-,+*+++++,---------,,,,,,,,,,,,,,,,-.Q@@@@"
t$(7) = "@@@@B.-,+*+,--------,,,,,,----------------.R@@@@"
t$(8) = "@DAAC.-,+++,-......-,++++,-.......--.......S@@@@"
t$(9) = "@B....-,,,,,-.CAAC.-,,,,,,-.CAAAC.--.CAAAAAD@@@@"
t$(10) = "@B.----------.B@@B.--------.B@@@B.--.B@@@@@@@@@@"
t$(11) = "@B............B@@B..........B@@@B....B@@@@@@@@@@"
t$(12) = "@DAAAAAAAAAAAAD@@DAAAAAAAAAAD@@@DAAAAD@@@@@@@@@@"
t$(13) = "@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@"

REM Przetworzenie ciagow znakowych labiryntu na tablice znakowa
REM PRINT LEN(t$(13)); "..."
FOR yy = 0 TO 13
FOR xx = 0 TO 48
pom$ = MID$(t$(yy), xx + 1, 1)
IF pom$ = "" THEN pom$ = "@"
labi(xx, yy) = ASC(pom$)
NEXT xx
t$(yy) = "": REM czyszczenie pamieci
NEXT yy

GOSUB zaladujobraz

REM **************************** dane startowe

kier = 0: REM kierunek patrzenia gracza ustawiony na 0 stopni
xgracza% = 7: REM wspolrzedne gracza w tablicy labiryntu
ygracza% = 6

REM ************************************* petla glowna

REM ********** PETLA FOR - BADANIE KOLEJNYCH KATOW
REM t1, t2 i dalsze - pomiar predkosci
REM petla for liczona jest w stopniach
REM zmienna k bezposrednio wyznacza tutaj takze wspolrzedna ekranu
REM kier - kierunek gracza, kat - kierunek badania widocznosci
REM xb, yb - wspolrzedne badanych punktow
REM zostana zaokraglone do xbint =int(xb+0.5)
REM zaokraglone, a nie obciete

REM miejsce powrotu po kolejnym ruchu gracza
POWTORZ:

ktora% = -1: REM ustawienie pozycji zapisania elementu w tablicach ekranowych
t1% = PEEK(1132)

FOR K = -150 TO 150 STEP 4

ktora% = ktora% + 1
kat = (K / 10) + kier
IF kat < 0 THEN kat = 360 + kat
IF kat > 359.9 THEN kat = kat - 360

xb! = xgracza%
yb! = ygracza%

s = SIN(kat * rad)
c = COS(kat * rad)

petla:
xb! = xb! + c
yb! = yb! + s
xbint% = xb!
ybint% = yb!
znak% = labi(xbint%, ybint%)
skok% = 0
REM kropka to ASCII 46 - brak skoku
IF znak% < 46 THEN skok% = 46 - znak%
IF skok% > 0 THEN
xb! = xb! + c * skok%
yb! = yb! + s * skok%

xbint% = xb!
ybint% = yb!

znak% = labi(xbint%, ybint%)
END IF

IF skok% = 0 AND znak% <> ASC(".") THEN

elementy(ktora).xwtabl = xbint%: REM musza byc przed gosub
elementy(ktora).ywtabl = ybint%

GOSUB przeciecie

REM wpis danych elementu do tablicy ekranowej
elementy(ktora).znak = znak%
elementy(ktora).wysokosc = wys%

GOTO wyjscie
END IF

GOTO petla

REM koniec petli badania daego kierunku

wyjscie:

NEXT K
REM koniec badania pola widzenia

t2% = PEEK(1132)

GOSUB dotablicy
t3% = PEEK(1132)

GOSUB linia
t4% = PEEK(1132)

i% = -1
GOSUB petlarysowania

REM koniec rysowania planszy

COLOR 15: LOCATE 1, 1:
PRINT "bad.wid="; t2% - t1%
PRINT "przetw="; t3% - t2%
PRINT "rys="; t4% - t3%

REM ********************************************************
REM ************* gracz ma wplyw na kolejny ruch
REM ********************************************************

czekaj:
i$ = INKEY$
IF i$ = CHR$(27) THEN END
IF i$ = "" THEN GOTO czekaj
POKE 1050, PEEK(1052): REM czyszczenie bufora klawiatury

IF i$ = CHR$(0) + "K" THEN kier = kier - 5
IF i$ = CHR$(0) + "M" THEN kier = kier + 5

IF kier < 0 THEN kier = 360 + kier: REM plus czyli tutaj minus
IF kier > 359.9 THEN kier = kier - 360

IF i$ = CHR$(0) + "H" THEN GOSUB WPRZOD
IF i$ = CHR$(0) + "P" THEN GOSUB wtyl

GOTO POWTORZ

REM ************************** GOSUB-RETURN dla ruchu wprzod

WPRZOD:
xs = xgracza%
ys = ygracza%

REM krok wprzod gracza nastepuje po linii kata wiedzenia
s = SIN(kier * rad)
c = COS(kier * rad)

xgracza% = xgracza% + 2 * c
ygracza% = ygracza% + 2 * s


REM ****************** zakaz wchodzenia na mur
znak% = labi(xgracza%, ygracza%)

IF znak% <> ASC(".") AND znak% <> ASC("-") AND znak% <> ASC(",") AND znak% <> ASC("+") AND znak% <> ASC("*") THEN xgracza% = xs: ygracza% = ys
RETURN

REM *********************** GOSUB-RETURN dla ruchu w tyl
wtyl:
xs = xgracza%
ys = ygracza%
s = SIN(kier * rad)
c = COS(kier * rad)

xgracza% = xgracza% - 2 * c
ygracza% = ygracza% - 2 * s

REM ****************** zakaz wchodzenia na mur
znak% = labi(xgracza%, ygracza%)

IF znak% <> ASC(".") AND znak% <> ASC("-") AND znak% <> ASC(",") AND znak% <> ASC("+") AND znak% <> ASC("*") THEN xgracza% = xs: ygracza% = ys
RETURN


REM ****************************************************************
REM ***** GOSUB RETURN - przetworzenie danych tablicy ekranowej
REM ****************************************************************
dotablicy:

n% = ktora%: REM n to liczba elementow tablic ekranowych

REM badanie poczatku wystepowania elementu - znaku, ale
REM zgadzac musza sie tez jego wspolrzedne w tablicy labiryntu

FOR i = 0 TO n%
IF i = 0 THEN elementy(0).poczatek = 0: GOTO konczpetle
IF elementy(i).znak = elementy(i - 1).znak AND elementy(i).xwtabl = elementy(i - 1).xwtabl AND elementy(i).ywtabl = elementy(i - 1).ywtabl THEN elementy(i).poczatek = elementy(i - 1).poczatek: GOTO konczpetle
elementy(i).poczatek = i
konczpetle:
NEXT i

REM w odwrotna strone - badanie konca wystepowanie elementu

FOR i = n% TO 0 STEP -1
IF i = n% THEN elementy(i).koniec = n%: GOTO konczpetle2
IF elementy(i).znak = elementy(i + 1).znak AND elementy(i).xwtabl = elementy(i + 1).xwtabl AND elementy(i).ywtabl = elementy(i + 1).ywtabl THEN elementy(i).koniec = elementy(i + 1).koniec: GOTO konczpetle2
elementy(i).koniec = i
konczpetle2:
NEXT i

RETURN

REM ******************************************************************
REM *************** GOSUN RETURN dla rysowania zwyklych linii
REM *************** rysowanie odbywa sie z tablicy
REM n% - ustalony wczesniej rozmiar tablic ekranowych


linia:

FOR i = 0 TO n%

ktory = i - elementy(i).poczatek
wys = elementy(i).wysokosc
znak% = elementy(i).znak

COLOR 28
IF znak% = 65 THEN COLOR 26
IF znak% = 66 THEN COLOR 30

pomoc1 = i * 4
pomoc2 = i * 4 + 3

IF znak% >= 81 THEN GOTO nierysuj: REM obrazki nie rysowane tutaj

IF wys <= 0 THEN wys = 0: GOTO nierysuj
IF wys > 120 THEN wys = 120

LINE (pomoc1, 0)-(pomoc2, 120 - wys - 1), 150, BF
LINE (pomoc1, 120 + wys + 1)-(pomoc2, 200), 20, BF


REM zwykla linia
LINE (pomoc1, 120 - wys)-(pomoc2, 120 + wys), , BF
nierysuj:
NEXT i


RETURN

REM *************************************************************
REM obliczenie punktow przeciecia
REM wspolrzedna badania cofane o 0.1 sinusa i cosinusa

przeciecie:
xb! = xb! - .1 * c
yb! = yb! - .1 * s
xbint% = xb!
ybint% = yb!
back% = labi(xbint%, ybint%)
IF back% < 64 THEN GOTO znalazlem
GOTO przeciecie

znalazlem:
dx! = xgracza% - xb!
dy! = ygracza% - yb!
odleglosc! = SQR(dx! * dx! + dy! * dy!)
wys% = optyka! / odleglosc!
RETURN


REM *************************************************************
REM ******* Od tego miejsca beda umieszczane procedury
REM ******* zwiazane z naklejaniem obrazkow

zaladujobraz:
DIM obraz(0 TO 23, 0 TO 31) AS INTEGER
DIM a$(0 TO 31)

REM 24x32

a$(0) = "0F0F0F0F0F0F0101010101010101010101010101010E0E0E"
a$(1) = "0F0F0F0F0F010101010202020202020201010101010E0E0E"
a$(2) = "0F0F0F0F0101010102020202020202020201010101010E0E"
a$(3) = "010101010101010202020602020202020202010101010101"
a$(4) = "010101010101020202020602020202060202020101010101"
a$(5) = "010101010102020202020602020202060202020201010101"
a$(6) = "010101010102020202020602020206020202020201010101"
a$(7) = "010101010102020602020602020206020206020201010101"
a$(8) = "010101010102020602020206020206020206020201010101"
a$(9) = "010101010102020206020206020602020602020201010101"
a$(10) = "010101010102020206020206020602020602020201010101"
a$(11) = "010101010102020202060206020602020602020201010101"
a$(12) = "010101010102020202060206060602060202020201010101"
a$(13) = "010101010102020202020606060606020202020201010101"
a$(14) = "010101010102020602020206060602020206020201010101"
a$(15) = "010101010101020206020206060602020602020101010101"
a$(16) = "080808080808080202060206060602060202080808080808"
a$(17) = "080808080808080802020606060606020208080808080808"
a$(18) = "080808080808080808020206060602020808080808080808"
a$(19) = "080808080808080808080806060608080808080808080808"
a$(20) = "080808080808080808080806060608080808080808080808"
a$(21) = "070707070707070707070706060607070707070707070707"
a$(22) = "070707070707070707070706060607070707070707070707"
a$(23) = "070707070707070707070706060607070707070707070707"
a$(24) = "070707070707070707070706060607070707070707070707"
a$(25) = "070707070707070707070706060607070707070707070707"
a$(26) = "070707070707070707070706060607070707070707070707"
a$(27) = "070707070707050707070706060607070507070705070707"
a$(28) = "070707070707020707070706060607070207070702070707"
a$(29) = "020202020202020202020606060606020202020202020202"
a$(30) = "020202020202020202060606060606060202020202020202"
a$(31) = "020202020202020202020202020202020202020202020202"

FOR y% = 0 TO 31
FOR x% = 0 TO 23
obraz(x%, y%) = VAL("&H" + MID$(a$(y%), x% * 2 + 1, 2))
NEXT x%
a$(y%) = "": REM czyszczenie pamieci
NEXT y%
RETURN

REM **************************************************
REM ******************** Rysowanie znakow Q,R,S
REM **************************************************

REM zbadaj czy Q,R,S znajduja sie w kolejnych kolumnach tablicy ekranowej

REM DAWNIEJ FOR I = 0 TO n - Nie stosowac petli FOR
REM bo bedzie migac, czyli kilka razy to samo sprawdzac.
REM Lepiej aby prostokaty zachodzily na siebie niz aby byla jakas luka.

REM wczesniej jest i = -1
petlarysowania:

i% = i% + 1

xp% = elementy(i%).poczatek * 4
xk% = elementy(i%).koniec * 4 + 3

wysp% = elementy(elementy(i%).poczatek).wysokosc
wysk% = elementy(elementy(i%).koniec).wysokosc

r% = xk% - xp% + 1
dxe! = r% / 8

rh% = wysk% - wysp%
dw! = rh% / 8


IF elementy(i%).znak = 81 THEN przes% = 0: GOTO rysujmatryce
IF elementy(i%).znak = 82 THEN przes% = 8: GOTO rysujmatryce
IF elementy(i%).znak = 83 THEN przes% = 16: GOTO rysujmatryce

REM *************************************

IF i% < n% GOTO petlarysowania
COLOR 0: LINE (304, 0)-(304, 200)

RETURN


REM ------------------- wskok przez GOTO i powrot przez GOTO
REM jj% - petla kolumnowa, ii% - petla wierszowa
REM wys% - wysokokosc czyli gorny pulap danej kolumny
REM pozp%, pozk-wysokosc gornej i dolnek krawedzi piksela

rysujmatryce:

FOR jj% = 0 TO 7

wys% = wysp% + dw! * jj%
dh! = wys% * bitekran!

dxejj% = dxe! * jj%
dxejj1% = dxe! * (jj% + 1)

jjprzes% = jj% + przes%

xpdxejj% = xp% + dxejj%
xpdxejj1% = xp% + dxejj1%

LINE (xpdxejj%, 0)-(xpdxejj1%, 120 - wys%), 150, BF
LINE (xpdxejj%, 120 + wys% + dw! * 8 - 1)-(xpdxejj1%, 200), 20, BF

FOR ii% = 0 TO 31
pozp% = 120 - wys% + ii% * dh!: REM wysokosc gornej krawedzi piksela obrazka
pozk% = pozp% + dh!: REM wysokosc dolnej krawedzi piksela obrazka

LINE (xpdxejj%, pozp%)-(xpdxejj1%, pozk%), obraz(jjprzes%, ii%), BF
NEXT ii%
NEXT jj%
i% = elementy(i%).koniec: REM pominiecie badania tych samych znakow w tablicy ekranowej

GOTO petlarysowania

*/


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Czw 20:38, 28 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czerne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);

const labirynt=['@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@',
'@...................................................@',
'@...................................................@',
'@...................................................@',
'@......................@@@..........................@',
'@......................@@@..........................@',
'@......................@@@..........................@',
'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'];


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);

// funkcja klawisza spacji:

document.body.onkeyup = function(e){
var i=100; // uwaga: var powoduje że zmienna ma zasięg całej funkcji, let ma zasieg od klamry do klamry

if(e.keyCode == 32){

// napis

txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// kolorowy kwadrat

red = Math.random() * 256
green = Math.random() * 256
blue = Math.random() * 256

const rgb = `rgb(${red}, ${green}, ${blue})`;
ctx.fillStyle = rgb;

xp = Math.random()*2000;
yp = Math.random()*1000;
ctx.fillRect(xp, yp, 100, 100);
}
}


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Czw 20:51, 28 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czerne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);

const labirynt=['@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@',
'@...................................................@',
'@...................................................@',
'@...................................................@',
'@......................@@@..........................@',
'@......................@@@..........................@',
'@......................@@@..........................@',
'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'];


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

const xgracza=3;
const ygracza=3;
const kier=0;

// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;

s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);

// tutaj kod
};




// funkcja klawisza spacji:

document.body.onkeyup = function(e){
var i=100; // uwaga: var powoduje że zmienna ma zasięg całej funkcji, let ma zasieg od klamry do klamry

if(e.keyCode == 32){

// napis

txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// kolorowy kwadrat

red = Math.random() * 256
green = Math.random() * 256
blue = Math.random() * 256

const rgb = `rgb(${red}, ${green}, ${blue})`;
ctx.fillStyle = rgb;

xp = Math.random()*2000;
yp = Math.random()*1000;
ctx.fillRect(xp, yp, 100, 100);
}
}


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Czw 21:01, 28 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czerne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);

const labirynt=['@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@',
'@...................................................@',
'@...................................................@',
'@...................................................@',
'@......................@@@..........................@',
'@......................@@@..........................@',
'@......................@@@..........................@',
'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'];


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

const xgracza=3;
const ygracza=3;
const kier=0;

// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;

s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);

petla:
xb = xb + c;
yb = yb + s;
xbint = Math.round(xb);
ybint = Math.round(yb);


};




// funkcja klawisza spacji:

document.body.onkeyup = function(e){
var i=100; // uwaga: var powoduje że zmienna ma zasięg całej funkcji, let ma zasieg od klamry do klamry

if(e.keyCode == 32){

// napis

txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// kolorowy kwadrat

red = Math.random() * 256
green = Math.random() * 256
blue = Math.random() * 256

const rgb = `rgb(${red}, ${green}, ${blue})`;
ctx.fillStyle = rgb;

xp = Math.random()*2000;
yp = Math.random()*1000;
ctx.fillRect(xp, yp, 100, 100);
}
}


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Czw 21:39, 28 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czarne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);

const labirynt=['@@@@@@@@@@@@@@@@',
'@..............@',
'@..............@',
'@..............@',
'@.......@@.....@',
'@.......@@.....@',
'@.......@@.....@',
'@@@@@@@@@@@@@@@@'];
var x;
var y;

var labi = [];
//najpierw musi być deklaracja pierwszego wymiaru tablicy
for (x = 0; x < 16; x++) {
labi[x] = [];
};

for (y = 0; y < 8; y++) {
pomoc=labirynt[y];
for (x = 0; x < 16; x++) {
labi[x][y] = pomoc.substr(x, 1);
// document.write(x,y,labi[x][y]);
};
// document.write('<br>');
};


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

const xgracza=3;
const ygracza=3;
const kier=0;

// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;

s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);

petla:
xb = xb + c;
yb = yb + s;
xbint = Math.round(xb);
ybint = Math.round(yb);
znak= labi[xbint][ybint];

if (znak !='.') {
dx = xgracza - xb;
dy = ygracza - yb;
}

};// koniec petli for k




// funkcja klawisza spacji:

document.body.onkeyup = function(e){
var i=100; // uwaga: var powoduje że zmienna ma zasięg całej funkcji, let ma zasieg od klamry do klamry

if(e.keyCode == 32){

// napis

txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// kolorowy kwadrat

red = Math.random() * 256
green = Math.random() * 256
blue = Math.random() * 256

const rgb = `rgb(${red}, ${green}, ${blue})`;
ctx.fillStyle = rgb;

xp = Math.random()*2000;
yp = Math.random()*1000;
ctx.fillRect(xp, yp, 100, 100);
}
}


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Czw 23:19, 28 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czarne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


// przelicznik optyczny dla obliczenia wysokosci sciany
// wrazenie dali razy wysokosc sciany
const optyka = 150 * 7;


const labirynt=['@@@@@@@@@@@@@@@@',
'@..........@@@@@',
'@............@@@',
'@.............@@',
'@.......@@.....@',
'@.......@@.....@',
'@.......@@.....@',
'@@@@@@@@@@@@@@@@'];
var x;
var y;

var labi = [];
//najpierw musi być deklaracja pierwszego wymiaru tablicy
for (x = 0; x < 16; x++) {
labi[x] = [];
};

for (y = 0; y < 8; y++) {
pomoc=labirynt[y];
for (x = 0; x < 16; x++) {
labi[x][y] = pomoc.substr(x, 1);
// document.write(x,y,labi[x][y]);
};
// document.write('<br>');
};


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

const xgracza=3;
const ygracza=3;
const kier=0;

// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;

s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);


znam = 0;
// document.write(znam);

while(znam==0) {
xb += c;
yb += s;
xbint = Math.round(xb);
ybint = Math.round(yb);
znak = labi[xbint][ybint];
// document.write(znak);

if (znak !=".") {
// document.write('znak nie kropka');
dx = xgracza - xb;
dy = ygracza - yb;
dxdx=dx*dx;
dydy=dy*dy;

odleglosc = Math.sqrt(dxdx+dydy);

wys = optyka / odleglosc;
znam=1;

}; // koniec if
}; // koniec petli while
// document.write('wyjscie?');
// document.write(znam);

// document.write('wys=',wys,'-----');


// rysowanie

if (wys > 0) {
ctx.fillStyle = 'blue';
ctx.fillRect(150+k*11, 400-wys, 1, 2*wys);
// document.write('wysokosc');
};

};// koniec petli for k

// document.write('wyjscie z petli for');


// funkcja klawisza spacji:

document.body.onkeyup = function(e){
var i=100; // uwaga: var powoduje że zmienna ma zasięg całej funkcji, let ma zasieg od klamry do klamry

if(e.keyCode == 32){

// napis

txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// kolorowy kwadrat

red = Math.random() * 256
green = Math.random() * 256
blue = Math.random() * 256

const rgb = `rgb(${red}, ${green}, ${blue})`;
ctx.fillStyle = rgb;

xp = Math.random()*2000;
yp = Math.random()*1000;
ctx.fillRect(xp, yp, 100, 100);
}
}


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Czw 23:51, 28 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czarne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


// przelicznik optyczny dla obliczenia wysokosci sciany
// wrazenie dali razy wysokosc sciany
const optyka = 150 * 7;


const labirynt=['@@@@@@@@@@@@@@@@',
'@..........@@@@@',
'@............@@@',
'@.............@@',
'@.......@@.....@',
'@.......@@.....@',
'@.......@@.....@',
'@@@@@@@@@@@@@@@@'];
var x;
var y;

var labi = [];
//najpierw musi być deklaracja pierwszego wymiaru tablicy
for (x = 0; x < 16; x++) {
labi[x] = [];
};

for (y = 0; y < 8; y++) {
pomoc=labirynt[y];
for (x = 0; x < 16; x++) {
labi[x][y] = pomoc.substr(x, 1);
// document.write(x,y,labi[x][y]);
};
// document.write('<br>');
};


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

const xgracza=3;
const ygracza=3;
const kier=50;



// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;
s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);

znam = 0;
// document.write(znam);

while(znam==0) {
xb += c;
yb += s;
xbint = Math.round(xb);
ybint = Math.round(yb);
znak = labi[xbint][ybint];
// document.write(znak);

if (znak !=".") {
// document.write('znak nie kropka');
dx = xgracza - xb;
dy = ygracza - yb;
dxdx=dx*dx;
dydy=dy*dy;
odleglosc = Math.sqrt(dxdx+dydy);
wys = optyka / odleglosc;
znam=1;
}; // koniec if
}; // koniec petli while

// rysowanie

if (wys > 0) {
ctx.fillStyle = 'blue';
ctx.fillRect(150+k*11, 400-wys, 1, 2*wys);
// document.write('wysokosc');
};
}; // koniec petli for k






</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Pią 0:08, 29 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czarne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


// przelicznik optyczny dla obliczenia wysokosci sciany
// wrazenie dali razy wysokosc sciany
const optyka = 150 * 7;


const labirynt=['@BBBBBBBBBBBBD@@',
'A............A@@',
'A............A@@',
'A............CB@',
'A......CAC.....A',
'A......A@A.....A',
'A......A@A.....A',
'@BBBBBBD@@BBBBB@'];
var x;
var y;

var labi = [];
//najpierw musi być deklaracja pierwszego wymiaru tablicy
for (x = 0; x < 16; x++) {
labi[x] = [];
};

for (y = 0; y < 8; y++) {
pomoc=labirynt[y];
for (x = 0; x < 16; x++) {
labi[x][y] = pomoc.substr(x, 1);
// document.write(x,y,labi[x][y]);
};
// document.write('<br>');
};


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

const xgracza=3;
const ygracza=3;
const kier=0;



document.body.onkeyup = function(e){


if (e.keyCode == 32){




txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;
s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);

znam = 0;
// document.write(znam);

while(znam==0) {
xb += c;
yb += s;
xbint = Math.round(xb);
ybint = Math.round(yb);
znak = labi[xbint][ybint];
// document.write(znak);

if (znak !=".") {
// document.write('znak nie kropka');
dx = xgracza - xb;
dy = ygracza - yb;
dxdx=dx*dx;
dydy=dy*dy;
odleglosc = Math.sqrt(dxdx+dydy);
wys = optyka / odleglosc;
znam=1;
}; // koniec if
}; // koniec petli while

// rysowanie

if (wys > 0) {
ctx.fillStyle = 'blue';
if (znak=='A') {
ctx.fillStyle = 'blue';
};
if (znak=='B') {
ctx.fillStyle = 'red';
};
ctx.fillRect(150+k*11, 400-wys, 1, 2*wys);
// document.write('wysokosc');
};
}; // koniec petli for k


}; //
}; // wyjscie z warunku esc


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Pią 0:17, 29 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czarne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


// przelicznik optyczny dla obliczenia wysokosci sciany
// wrazenie dali razy wysokosc sciany
const optyka = 150 * 7;


const labirynt=['@BBBBBBBBBBBBBBBBBD@@',
'A.................A@@',
'A.................A@@',
'A.................CB@',
'A......CAC..........A',
'A......A@A..........A',
'A......A@A..........A',
'@BBBBBBD@@BBBBBBBBBB@'];
var x;
var y;

var labi = [];
//najpierw musi być deklaracja pierwszego wymiaru tablicy
for (x = 0; x < 21; x++) {
labi[x] = [];
};

for (y = 0; y < 8; y++) {
pomoc=labirynt[y];
for (x = 0; x < 21; x++) {
labi[x][y] = pomoc.substr(x, 1);
// document.write(x,y,labi[x][y]);
};
// document.write('<br>');
};


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

const xgracza=3;
const ygracza=3;
var kier=0;



document.body.onkeyup = function(e){


if (e.keyCode == 32){
kier+=5


// Czyszczenie pola

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;
s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);

znam = 0;
// document.write(znam);

while(znam==0) {
xb += c;
yb += s;
xbint = Math.round(xb);
ybint = Math.round(yb);
znak = labi[xbint][ybint];
// document.write(znak);

if (znak !=".") {
// document.write('znak nie kropka');
dx = xgracza - xb;
dy = ygracza - yb;
dxdx=dx*dx;
dydy=dy*dy;
odleglosc = Math.sqrt(dxdx+dydy);
wys = optyka / odleglosc;
znam=1;
}; // koniec if
}; // koniec petli while

// rysowanie

if (wys > 0) {
ctx.fillStyle = 'blue';
if (znak=='A') {
ctx.fillStyle = 'blue';
};
if (znak=='B') {
ctx.fillStyle = 'red';
};
ctx.fillRect(900+k*3, 400-wys, 1, 2*wys);
// document.write('wysokosc');
};
}; // koniec petli for k


}; //
}; // wyjscie z warunku esc


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Pią 0:28, 29 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czarne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


// przelicznik optyczny dla obliczenia wysokosci sciany
// wrazenie dali razy wysokosc sciany
const optyka = 150 * 7;


const labirynt=['@BBBBBBBBBBBBBBBBBD@@',
'A.................A@@',
'A.................A@@',
'A.................CB@',
'A......CAC..........A',
'A......A@A..........A',
'A......A@A..........A',
'@BBBBBBD@@BBBBBBBBBB@'];
var x;
var y;

var labi = [];
//najpierw musi być deklaracja pierwszego wymiaru tablicy
for (x = 0; x < 21; x++) {
labi[x] = [];
};

for (y = 0; y < 8; y++) {
pomoc=labirynt[y];
for (x = 0; x < 21; x++) {
labi[x][y] = pomoc.substr(x, 1);
// document.write(x,y,labi[x][y]);
};
// document.write('<br>');
};


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

const xgracza=3;
const ygracza=3;
var kier=0;



document.body.onkeyup = function(e){


if (e.keyCode == 32){
kier+=5


// Czyszczenie pola

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


txt = "SPACJA";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;
s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);

znam = 0;
// document.write(znam);

while(znam==0) {
xb += c;
yb += s;
xbint = Math.round(xb);
ybint = Math.round(yb);
znak = labi[xbint][ybint];
// document.write(znak);

if (znak !=".") {
// document.write('znak nie kropka');
dx = xgracza - xb;
dy = ygracza - yb;
dxdx=dx*dx;
dydy=dy*dy;
odleglosc = Math.sqrt(dxdx+dydy);
wys = optyka / odleglosc;
znam=1;
}; // koniec if
}; // koniec petli while

// rysowanie

if (wys > 0) {
ctx.fillStyle = '#DDDDDD';
if (znak=='A') {
ctx.fillStyle = '#BBBBBB';
};
if (znak=='B') {
ctx.fillStyle = '#FFFFFF';
};
ctx.fillRect(900+k*3, 400-wys, 1, 2*wys);
// document.write('wysokosc');
};
}; // koniec petli for k


}; //
}; // wyjscie z warunku esc


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Pią 6:56, 29 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czarne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


// przelicznik optyczny dla obliczenia wysokosci sciany
// wrazenie dali razy wysokosc sciany
const optyka = 150 * 7;


const labirynt=['@BBBBBBBBBBBBBBBBBD@@',
'A.................A@@',
'A.................A@@',
'A.................CB@',
'A......CAC..........A',
'A......A@A..........A',
'A......A@A..........A',
'@BBBBBBD@@BBBBBBBBBB@'];
var x;
var y;

var labi = [];
//najpierw musi być deklaracja pierwszego wymiaru tablicy
for (x = 0; x < 21; x++) {
labi[x] = [];
};

for (y = 0; y < 8; y++) {
pomoc=labirynt[y];
for (x = 0; x < 21; x++) {
labi[x][y] = pomoc.substr(x, 1);
// document.write(x,y,labi[x][y]);
};
// document.write('<br>');
};


// napis

tekst = "Naciśnij spację" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

const xgracza=3;
const ygracza=3;
var kier=0;



document.body.onkeyup = function(e){


if (e.keyCode == 39){
kier+=5;
};

if (e.keyCode == 37){
kier-=5;
};

// Czyszczenie pola

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


txt = "klawisz";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;
s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);

znam = 0;
// document.write(znam);

while(znam==0) {
xb += c;
yb += s;
xbint = Math.round(xb);
ybint = Math.round(yb);
znak = labi[xbint][ybint];
// document.write(znak);

if (znak !=".") {
// document.write('znak nie kropka');
dx = xgracza - xb;
dy = ygracza - yb;
dxdx=dx*dx;
dydy=dy*dy;
odleglosc = Math.sqrt(dxdx+dydy);
wys = optyka / odleglosc;
znam=1;
}; // koniec if
}; // koniec petli while

// rysowanie

if (wys > 0) {
ctx.fillStyle = '#DDDDDD';
if (znak=='A') {
ctx.fillStyle = '#BBBBBB';
};
if (znak=='B') {
ctx.fillStyle = '#FFFFFF';
};
ctx.fillRect(900+k*3, 400-wys, 1, 2*wys);
// document.write('wysokosc');
};
}; // koniec petli for k


}; // wyjscie ze zdarzenia klawiatury


</script>
</canvas>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość






PostWysłany: Pią 7:34, 29 Sty 2021    Temat postu:

<canvas width="1900" height="900" id="canvas">
</canvas>


<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// Czarne prostokątne tło

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


// przelicznik optyczny dla obliczenia wysokosci sciany
// wrazenie dali razy wysokosc sciany
const optyka = 150 * 7;


const labirynt=['@BBBBBBBBBBBBBBBBBD@@',
'A.................A@@',
'A.................A@@',
'A.................CB@',
'A......CAC..........A',
'A......A@A..........A',
'A......A@A..........A',
'@BBBBBBD@@BBBBBBBBBB@'];
var x;
var y;

var labi = [];
//najpierw musi być deklaracja pierwszego wymiaru tablicy
for (x = 0; x < 21; x++) {
labi[x] = [];
};

for (y = 0; y < 8; y++) {
pomoc=labirynt[y];
for (x = 0; x < 21; x++) {
labi[x][y] = pomoc.substr(x, 1);
// document.write(x,y,labi[x][y]);
};
// document.write('<br>');
};


// napis

tekst = "Naciśnij klawisz" + " aby wykonać kolejny ruch";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(labirynt[6], 10, 60);
ctx.fillText(tekst, 10, 120);


// dane startowe

var xgracza=3;
var ygracza=3;
var kier=0;

// ******************************* pętla klawiszy

document.body.onkeyup = function(e){

key = e.keyCode;

if (key == 39){
kier+=5;
if (kier > 359.9) {
kier = kier - 360;
};
};

if (key == 37){
kier-=5;
if (kier < 0) {
kier = 360 + kier; // plus czyli tutaj minus
};
};

if (key == 38){ // do przodu
xs = xgracza;
ys = ygracza;
// krok wprzód gracza następuje po linii kąta widzenia
s = Math.sin(Math.PI * kier / 180);
c = Math.cos(Math.PI * kier / 180);
xgracza += (2 * c);
ygracza += (2 * s);
znak = labi[xgracza][ygracza];
if (znak !='.') { //zakaz wchodzenia na mur
xgracza = xs;
ygracza = ys;
//document.write('zakaz');
};
};

if (key == 40) { //do tylu
xs = xgracza;
ys = ygracza;
s = Math.sin(Math.PI * kier / 180);
c = Math.cos(Math.PI * kier / 180);
xgracza -= (2 * c);
ygracza -= (2 * s);
znak = labi[xgracza][ygracza];
if (znak !='.') { //zakaz wchodzenia na mur
xgracza = xs;
ygracza = ys;
//document.write('zakaz');
};

};



// Czyszczenie pola

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 1900, 900);


txt = "klawisz";
ctx.fillStyle = 'white';
ctx.font = "italic bold 50px Arial";
ctx.fillText(txt, 10 + Math.random()*1700, 200 + Math.random()*600);


// petla badania

for (k = -150; k <= 150; k++) {
kat=(k/10)+kier;
xb=xgracza;
yb=ygracza;
s=Math.sin(Math.PI * kat / 180);
c=Math.cos(Math.PI * kat / 180);

znam = 0;
// document.write(znam);

while(znam==0) {
xb += c;
yb += s;
xbint = Math.round(xb);
ybint = Math.round(yb);
znak = labi[xbint][ybint];
// document.write(znak);

if (znak !=".") {
// document.write('znak nie kropka');
dx = xgracza - xb;
dy = ygracza - yb;
dxdx=dx*dx;
dydy=dy*dy;
odleglosc = Math.sqrt(dxdx+dydy);
wys = optyka / odleglosc;
znam=1;
}; // koniec if
}; // koniec petli while

// rysowanie

if (wys > 0) {
ctx.fillStyle = '#DDDDDD';
if (znak=='A') {
ctx.fillStyle = '#BBBBBB';
};
if (znak=='B') {
ctx.fillStyle = '#FFFFFF';
};
ctx.fillRect(900+k*3, 400-wys, 1, 2*wys);
// document.write('wysokosc');
};
}; // koniec petli for k


}; // wyjscie ze zdarzenia klawiatury


</script>
</canvas>
Powrót do góry
Wyświetl posty z ostatnich:   
Napisz nowy temat   Odpowiedz do tematu    Forum Życie Wieczne Strona Główna -> Offtopic Wszystkie czasy w strefie EET (Europa)
Strona 1 z 1

 
Skocz do:  
Możesz pisać nowe tematy
Możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach

fora.pl - załóż własne forum dyskusyjne za darmo
Powered by phpBB © 2001, 2005 phpBB Group
Regulamin