|
Życie Wieczne
|
Zobacz poprzedni temat :: Zobacz następny temat |
Autor |
Wiadomość |
Piotr-246
Gość
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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ść
|
Wysł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 |
|
|
|
|
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
|