 Wysłany: Nie 11:05, 20 Cze 2021 Temat postu: |
|
| <canvas width="1900" height="900" id="canvas">
</canvas> <script> const okienko = document.querySelector("#canvas"); const wokienku = okienko.getContext("2d"); // ****************************************************** animacja postaci // 18x36 przod=[ '000000333330000000', '000003333333000000', '000003666663000000', '000000636360000000', '000000666660000000', '000000863680000000', '000000066600000000', '000000088800000000', '000007111117000000', '000071111111700000', '000011111111100000', '000711111111170000', '000711111111170000', '000711111111170000', '000711111111170000', '000711111111170000', '000711111111170000', '000711111111170000', '000717111117170000', '000713333333170000', '000862222222680000', '000082222222800000', '000002222222000000', '000002220222000000', '000002220222000000', '000002220222000000', '000002220222000000', '000002220222000000', '000002220222000000', '000002220222000000', '000002220222000000', '000002220222000000', '000002220222000000', '000002220222000000', '000003330333000000', '000033300033300000']; prawo1=[ '000000033300000000', '000000333330000000', '000003336660000000', '000003366360000000', '000000366668000000', '000000366660000000', '000000066600000000', '000000088800000000', '000000011100000000', '000000111110000000', '000001111111000000', '000001111111000000', '000001111111000000', '000011111111000000', '000011111111100000', '000011111111100000', '000017111111170000', '000017111111170000', '000017111110680000', '000068333330800000', '000080222220000000', '000002222220000000', '000002222220000000', '000002222222000000', '000002222222000000', '000002220222000000', '000022200222000000', '000022200022200000', '000022200022200000', '000022200022200000', '000222000022200000', '000222000022200000', '000222000002220000', '000222000002220000', '000333000003330000', '000333300003333000']; lewo1=[ '000000033330000000', '000000333333000000', '000000666333000000', '000000636633000000', '000008666633000000', '000000666630000000', '000000066600000000', '000000088800000000', '000000011100000000', '000000111110000000', '000000111111000000', '000001111111000000', '000001111111100000', '000011111111100000', '000011111111100000', '000011111111100000', '000017111117100000', '000717111117100000', '000860111117100000', '000080333338600000', '000000222220800000', '000000222220000000', '000002222222000000', '000002222222000000', '000002222222000000', '000002220222000000', '000002220222200000', '000022200022200000', '000022200022200000', '000022200022200000', '000222000002220000', '000222000002220000', '000222000002220000', '000222000002220000', '000333000003330000', '003333000033330000']; // 0 1 2 3 4 5 6 7 8 rejestr=['#000000','#FF0000','#0055FF','#707070','#000000','#000000','#F7C681','#AA0000','#BB9960']; // **************************************************** rysunek cegiełek // uwaga bit 1 = 1 czerwieni (nieparzysty rejestr czerwieni) oznacza zgodę na poruszanie się. cegla=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFEFFFFF', 'FFEFFFFF', 'FFEFFFFF', 'EEEEEEEE']; for (y=0;y<=7;y++) { pomoc1 = cegla[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#787777'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#AAAAAA'; wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; cegly = wokienku.getImageData(0, 0, 32, 32); wokienku.putImageData(cegly, 300, 300); // *************************************** wzorek tła tlo=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF']; for (y=0;y<=7;y++) { pomoc1 = tlo[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#272828'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#2D2C2C'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; }; }; wzortla = wokienku.getImageData(50, 0, 32, 32); wokienku.putImageData(wzortla, 350, 300); // ******************************************** rozmnożenie cegiełek i tla for (i=0; i<=57;i++) { wokienku.putImageData(cegly, 0+i*32,0); }; for (i=0; i<=57;i++) { wokienku.putImageData(wzortla, 0+i*32,32); }; wokienku.putImageData(cegly, 0 ,32); wokienku.putImageData(cegly, 57*32 ,32); cegly58 = wokienku.getImageData(0, 0, 58*32, 32); cegspc56ceg = wokienku.getImageData(0, 32, 58*32, 32); for (y=0;y<=25;y++) { wokienku.putImageData(cegspc56ceg, 0, y*32); }; wokienku.putImageData(cegly58, 0, 0); wokienku.putImageData(cegly58, 0, 26*32); // ********************************************************** dane startowe x=100; y=100; xs=100; ys=100; // pobranie starego tla tlo = wokienku.getImageData(x, y, x+18*4, y+36*4); // petla główna onkeydown = function(obsluga) { klawisz = obsluga.keyCode; if (klawisz == 39) { // w prawo prawo=1; lewo=0; x+=15; var piksel = wokienku.getImageData(x+(18*4), y, 1, 1).data; if ((piksel[0] &1 ) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 37) { // w lewo prawo=0; lewo=1; x-=15; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 38) { // w górę prawo=0; lewo=0; y-=15; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola y=ys; }; }; if (klawisz == 40) { y+=15; var piksel = wokienku.getImageData(x, y+(34*4), 1, 1).data; if ((piksel[0] & 1)!= 1) { // zakaz przekroczenia pola y=ys; }; }; //odnowienie starego tla wokienku.putImageData(tlo, xs, ys); // pobranie starego tla tlo = wokienku.getImageData(x, y, x+18*4, y+36*4); //rysowanie for (yy=0;yy<=35;yy++) { pomoc2 = przod[yy]; if (prawo==1) { pomoc2=prawo1[yy]; }; if (lewo==1) { pomoc2=lewo1[yy]; }; ysuma=y+yy*4; for (xx=0;xx<=17;xx++) { pomoc3 = pomoc2.substr(xx, 1); rej = rejestr[pomoc3]; wokienku.fillStyle = rej; if (pomoc3>0) { wokienku.fillRect(x+xx*4, ysuma, 4, 4); }; }; }; // zapamiętanie starych pozycji xs=x; ys=y; }; // wyjscie ze zdarzenia klawiatury </script> |
|
| Wysłany: Sob 16:48, 19 Cze 2021 Temat postu: |
|
| <canvas width="1900" height="900" id="canvas">
</canvas> <script> const okienko = document.querySelector("#canvas"); const wokienku = okienko.getContext("2d"); // ****************************************************** animacja postaci // 16x32 przod=[ '0000033333000000', '0000333333300000', '0000366666300000', '0000063636000000', '0000066666000000', '0000086368000000', '0000006660000000', '0000008880000000', '0000711111700000', '0007111111170000', '0001111111110000', '0071111111117000', '0071111111117000', '0071111111117000', '0071111111117000', '0071111111117000', '0071711111717000', '0071333333317000', '0071222222217000', '0086222222268000', '0000222222200000', '0000222022200000', '0000222022200000', '0000222022200000', '0000222022200000', '0000222022200000', '0000222022200000', '0000222022200000', '0000222022200000', '0000222022200000', '0000333033300000', '0003330003330000']; prawo1=[ '0000003330000000', '0000033333000000', '0000333666000000', '0000333636600000', '0000036666000000', '0000086668000000', '0000006660000000', '0000008880000000', '0000001110000000', '0000011111000000', '0000111111100000', '0000111111100000', '0000111111100000', '0001111111110000', '0001711111110000', '0001711111117000', '0001711111017000', '0001733333017000', '0001722222068000', '0006822222000000', '0000222222000000', '0000222222000000', '0000222222200000', '0000222022200000', '0002220022200000', '0002220002220000', '0002220002220000', '0002220002220000', '0002220002220000', '0002220002220000', '0003330003330000', '0003333003333000']; lewo1=[ '0000003333000000', '0000033333300000', '0000066663300000', '0000663663300000', '0000066663300000', '0000086668000000', '0000006660000000', '0000008880000000', '0000001110000000', '0000011111000000', '0000011111100000', '0000111111100000', '0000111111110000', '0001111111110000', '0001711111710000', '0071711111710000', '0071011111710000', '0071033333710000', '0086022222710000', '0000022222860000', '0000022222000000', '0000022222200000', '0000222222200000', '0000222222200000', '0000222022220000', '0000222002220000', '0002220002220000', '0002220002220000', '0002220002220000', '0002220002220000', '0003330003330000', '0033330033330000']; // 0 1 2 3 4 5 6 7 8 rejestr=['#000000','#FF0000','#0055FF','#707070','#000000','#000000','#F4BF70','#AA0000','#BB9960']; // **************************************************** rysunek cegiełek // uwaga bit 1 = 1 czerwieni (nieparzysty rejestr czerwieni) oznacza zgodę na poruszanie się. cegla=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFEFFFFF', 'FFEFFFFF', 'FFEFFFFF', 'EEEEEEEE']; for (y=0;y<=7;y++) { pomoc1 = cegla[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#787777'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#AAAAAA'; wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; cegly = wokienku.getImageData(0, 0, 32, 32); wokienku.putImageData(cegly, 300, 300); // *************************************** wzorek tła tlo=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF']; for (y=0;y<=7;y++) { pomoc1 = tlo[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#272828'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#2D2C2C'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; }; }; wzortla = wokienku.getImageData(50, 0, 32, 32); wokienku.putImageData(wzortla, 350, 300); // ******************************************** rozmnożenie cegiełek i tla for (i=0; i<=57;i++) { wokienku.putImageData(cegly, 0+i*32,0); }; for (i=0; i<=57;i++) { wokienku.putImageData(wzortla, 0+i*32,32); }; wokienku.putImageData(cegly, 0 ,32); wokienku.putImageData(cegly, 57*32 ,32); cegly58 = wokienku.getImageData(0, 0, 58*32, 32); cegspc56ceg = wokienku.getImageData(0, 32, 58*32, 32); for (y=0;y<=25;y++) { wokienku.putImageData(cegspc56ceg, 0, y*32); }; wokienku.putImageData(cegly58, 0, 0); wokienku.putImageData(cegly58, 0, 26*32); // ********************************************************** dane startowe x=100; y=100; xs=100; ys=100; // pobranie starego tla tlo = wokienku.getImageData(x, y, x+16*4, y+32*4); // petla główna onkeydown = function(obsluga) { klawisz = obsluga.keyCode; if (klawisz == 39) { // w prawo prawo=1; lewo=0; x+=15; var piksel = wokienku.getImageData(x+(16*4), y, 1, 1).data; if ((piksel[0] &1 ) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 37) { // w lewo prawo=0; lewo=1; x-=15; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 38) { // w górę prawo=0; lewo=0; y-=15; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola y=ys; }; }; if (klawisz == 40) { y+=15; var piksel = wokienku.getImageData(x, y+(32*4), 1, 1).data; if ((piksel[0] & 1)!= 1) { // zakaz przekroczenia pola y=ys; }; }; //odnowienie starego tla wokienku.putImageData(tlo, xs, ys); // pobranie starego tla tlo = wokienku.getImageData(x, y, x+16*4, y+32*4); //rysowanie for (yy=0;yy<=31;yy++) { pomoc2 = przod[yy]; if (prawo==1) { pomoc2=prawo1[yy]; }; if (lewo==1) { pomoc2=lewo1[yy]; }; for (xx=0;xx<=15;xx++) { pomoc3 = pomoc2.substr(xx, 1); rej = rejestr[pomoc3]; wokienku.fillStyle = rej; if (pomoc3>0) { wokienku.fillRect(x+xx*4, y+yy*4, 4, 4); }; }; }; // zapamiętanie starych pozycji xs=x; ys=y; }; // wyjscie ze zdarzenia klawiatury </script> |
|
| Wysłany: Sob 12:54, 19 Cze 2021 Temat postu: |
|
| <canvas width="1900" height="900" id="canvas">
</canvas> <script> const okienko = document.querySelector("#canvas"); const wokienku = okienko.getContext("2d"); // ****************************************************** animacja postaci przod=[ '000033300000', '000366630000', '000636360000', '000666660000', '000863680000', '000088800000', '007111117000', '071111111700', '011111111100', '711111111170', '717111117170', '710111110170', '710333330170', '860222220680', '000222220000', '000220220000', '000220220000', '000220220000', '000220220000', '000220220000', '000220220000', '000220220000', '000330330000', '003300033000']; prawo1=[ '000033300000', '000336660000', '000336366000', '000366660000', '000866680000', '000088800000', '000011100000', '000111110000', '001111111000', '001111111000', '017111117100', '017111110170', '017333330170', '068222220680', '000222220000', '000220220000', '000220220000', '000220220000', '000220220000', '002200022000', '002200022000', '002200022000', '003320033000', '003330033300']; lewo1=[ '000033330000', '000666633000', '006636633000', '000666633000', '000866680000', '000088800000', '000011100000', '000111110000', '001111111000', '001111111000', '717111117100', '710111117100', '710333337100', '860222228600', '000222220000', '000220220000', '000220220000', '000220220000', '000220220000', '002200022000', '002200022000', '002200022000', '003300033000', '033300333000']; // 0 1 2 3 4 5 6 7 8 rejestr=['#000000','#FF0000','#0000FF','#777777','#000000','#000000','#EECC00','#AA0000','#BBBB00']; // **************************************************** rysunek cegiełek // uwaga bit 1 = 1 czerwieni (nieparzysty rejestr czerwieni) oznacza zgodę na poruszanie się. cegla=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFEFFFFF', 'FFEFFFFF', 'FFEFFFFF', 'EEEEEEEE']; for (y=0;y<=7;y++) { pomoc1 = cegla[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#787777'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#AAAAAA'; wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; cegly = wokienku.getImageData(0, 0, 32, 32); wokienku.putImageData(cegly, 300, 300); // *************************************** wzorek tła tlo=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF']; for (y=0;y<=7;y++) { pomoc1 = tlo[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#272828'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#313030'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; }; }; wzortla = wokienku.getImageData(50, 0, 32, 32); wokienku.putImageData(wzortla, 350, 300); // ******************************************** rozmnożenie cegiełek i tla for (i=0; i<=57;i++) { wokienku.putImageData(cegly, 0+i*32,0); }; for (i=0; i<=57;i++) { wokienku.putImageData(wzortla, 0+i*32,32); }; wokienku.putImageData(cegly, 0 ,32); wokienku.putImageData(cegly, 57*32 ,32); cegly58 = wokienku.getImageData(0, 0, 58*32, 32); cegspc56ceg = wokienku.getImageData(0, 32, 58*32, 32); for (y=0;y<=25;y++) { wokienku.putImageData(cegspc56ceg, 0, y*32); }; wokienku.putImageData(cegly58, 0, 0); wokienku.putImageData(cegly58, 0, 26*32); // ********************************************************** dane startowe x=100; y=100; xs=100; ys=100; // pobranie starego tla tlo = wokienku.getImageData(x, y, x+12*4, y+24*4); // petla główna onkeydown = function(obsluga) { klawisz = obsluga.keyCode; if (klawisz == 39) { // w prawo prawo=1; lewo=0; x+=10; var piksel = wokienku.getImageData(x+(12*4), y, 1, 1).data; if ((piksel[0] &1 ) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 37) { // w lewo prawo=0; lewo=1; x-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 38) { // w górę y-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola y=ys; }; }; if (klawisz == 40) { y+=10; var piksel = wokienku.getImageData(x, y+(24*4), 1, 1).data; if ((piksel[0] & 1)!= 1) { // zakaz przekroczenia pola y=ys; }; }; //odnowienie starego tla wokienku.putImageData(tlo, xs, ys); // pobranie starego tla tlo = wokienku.getImageData(x, y, x+12*4, y+24*4); //rysowanie for (yy=0;yy<=23;yy++) { pomoc2 = przod[yy]; if (prawo==1) { pomoc2=prawo1[yy]; }; if (lewo==1) { pomoc2=lewo1[yy]; }; for (xx=0;xx<=11;xx++) { pomoc3 = pomoc2.substr(xx, 1); rej = rejestr[pomoc3]; wokienku.fillStyle = rej; if (pomoc3>0) { wokienku.fillRect(x+xx*4, y+yy*4, 4, 4); }; }; }; // zapamiętanie starych pozycji xs=x; ys=y; }; // wyjscie ze zdarzenia klawiatury </script> |
|
| Wysłany: Pią 22:20, 18 Cze 2021 Temat postu: |
|
| <canvas width="1900" height="900" id="canvas">
</canvas> <script> const okienko = document.querySelector("#canvas"); const wokienku = okienko.getContext("2d"); // ****************************************************** animacja postaci pomoc=[ '000033300000', '000366630000', '000636360000', '000666660000', '000863680000', '000088800000', '007111117000', '071111111700', '011111111100', '711111111170', '717111117170', '710111110170', '710333330170', '860222220680', '000222220000', '000220220000', '000220220000', '000220220000', '000220220000', '000220220000', '000220220000', '000220220000', '000330330000', '003300033000']; // 0 1 2 3 4 5 6 7 8 rejestr=['#000000','#FF0000','#0000FF','#777777','#000000','#000000','#EECC00','#AA0000','#BBBB00']; for (y=0;y<=23;y++) { pomoc2 = pomoc[y]; for (x=0;x<=11;x++) { pomoc3 = pomoc2.substr(x, 1); rej = rejestr[pomoc3]; wokienku.fillStyle = rej; if (pomoc3>0) { wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; vert1 = wokienku.getImageData(0, 0, 12*4, 24*4); // zamiana czerni na przeźroczystość - meoda nieskuteczna // for (i = 0; i < vert1.data.length; i += 4) { // if (vert1.data[i + 0] + vert1.data[i + 1] + vert1.data[i + 2] == 0) { // vert1.data[i + 3] = 127; // }; // }; // **************************************************** rysunek cegiełek // uwaga bit 1 = 1 czerwieni (nieparzysty rejestr czerwieni) oznacza zgodę na poruszanie się. cegla=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFEFFFFF', 'FFEFFFFF', 'FFEFFFFF', 'EEEEEEEE']; for (y=0;y<=7;y++) { pomoc1 = cegla[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#787777'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#AAAAAA'; wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; cegly = wokienku.getImageData(0, 0, 32, 32); wokienku.putImageData(cegly, 300, 300); // *************************************** wzorek tła tlo=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF']; for (y=0;y<=7;y++) { pomoc1 = tlo[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#272828'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#313030'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; }; }; wzortla = wokienku.getImageData(50, 0, 32, 32); wokienku.putImageData(wzortla, 350, 300); // ******************************************** rozmnożenie cegiełek i tla for (i=0; i<=57;i++) { wokienku.putImageData(cegly, 0+i*32,0); }; for (i=0; i<=57;i++) { wokienku.putImageData(wzortla, 0+i*32,32); }; wokienku.putImageData(cegly, 0 ,32); wokienku.putImageData(cegly, 57*32 ,32); cegly58 = wokienku.getImageData(0, 0, 58*32, 32); cegspc56ceg = wokienku.getImageData(0, 32, 58*32, 32); for (y=0;y<=25;y++) { wokienku.putImageData(cegspc56ceg, 0, y*32); }; wokienku.putImageData(cegly58, 0, 0); wokienku.putImageData(cegly58, 0, 26*32); // ********************************************************** dane startowe x=100; y=100; xs=100; ys=100; // pobranie starego tla tlo = wokienku.getImageData(x, y, x+12*4, y+24*4); onkeydown = function(obsluga) { klawisz = obsluga.keyCode; if (klawisz == 39) { // w prawo x+=10; var piksel = wokienku.getImageData(x+(12*4), y, 1, 1).data; if ((piksel[0] &1 ) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 37) { // w lewo x-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 38) { // w górę y-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola y=ys; }; }; if (klawisz == 40) { y+=10; var piksel = wokienku.getImageData(x, y+(24*4), 1, 1).data; if ((piksel[0] & 1)!= 1) { // zakaz przekroczenia pola y=ys; }; }; //odnowienie starego tla //wokienku.fillStyle = '#010101'; //wokienku.fillRect(xs, ys, 12*4, 24*4); wokienku.putImageData(tlo, xs, ys); // pobranie starego tla tlo = wokienku.getImageData(x, y, x+12*4, y+24*4); //rysowanie for (yy=0;yy<=23;yy++) { pomoc2 = pomoc[yy]; for (xx=0;xx<=11;xx++) { pomoc3 = pomoc2.substr(xx, 1); rej = rejestr[pomoc3]; wokienku.fillStyle = rej; if (pomoc3>0) { wokienku.fillRect(x+xx*4, y+yy*4, 4, 4); }; }; }; // wokienku.putImageData(vert1, x, y); // zapamiętanie starych pozycji xs=x; ys=y; }; // wyjscie ze zdarzenia klawiatury </script> |
|
| Wysłany: Czw 20:36, 04 Lut 2021 Temat postu: |
|
| <canvas width="1900" height="900" id="canvas">
</canvas> <script> const okienko = document.querySelector("#canvas"); const wokienku = okienko.getContext("2d"); // ****************************************************** animacja postaci pomoc=[ '000000003F3F3F0000000000', '0000003F6F6F6F3F00000000', '0000006F3F6F3F6F00000000', '0000006F6F6F6F6F00000000', '0000008F6F3F6F8F00000000', '000000008F8F8F0000000000', '00007F1F1F1F1F1F7F000000', '007F1F1F1F1F1F1F1F7F0000', '001F1F1F1F1F1F1F1F1F0000', '7F1F1F1F1F1F1F1F1F1F7F00', '7F1F7F1F1F1F1F1F7F1F7F00', '7F1F001F1F1F1F1F001F7F00', '7F1F003F3F3F3F3F001F7F00', '8F6F002F2F2F2F2F006F8F00', '0000002F2F2F2F2F00000000', '0000002F2F002F2F00000000', '0000002F2F002F2F00000000', '0000002F2F002F2F00000000', '0000002F2F002F2F00000000', '0000002F2F002F2F00000000', '0000002F2F002F2F00000000', '0000002F2F002F2F00000000', '0000003F3F003F3F00000000', '00003F3F0000003F3F000000']; for (y=0;y<=23;y++) { pomoc2 = pomoc[y]; for (x=0;x<=11;x++) { pomoc3 = pomoc2.substr(x*2, 2); if (pomoc3=='00') { wokienku.fillStyle = '#000000'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc3=='2F') { wokienku.fillStyle = '#0000FF'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc3=='1F') { wokienku.fillStyle = '#FF0000'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc3=='3F') { wokienku.fillStyle = '#777777'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc3=='6F') { wokienku.fillStyle = '#EECC00'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc3=='8F') { wokienku.fillStyle = '#BBBB00'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc3=='7F') { wokienku.fillStyle = '#AA0000'; wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; vert1 = wokienku.getImageData(0, 0, 12*4, 24*4); // **************************************************** rysunek cegiełek // uwaga bit 1 = 1 czerwieni (nieparzysty rejestr czerwieni) oznacza zgodę na poruszanie się. cegla=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFEFFFFF', 'FFEFFFFF', 'FFEFFFFF', 'EEEEEEEE']; for (y=0;y<=7;y++) { pomoc1 = cegla[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#787777'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#AAAAAA'; wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; cegly = wokienku.getImageData(0, 0, 32, 32); wokienku.putImageData(cegly, 300, 300); // *************************************** wzorek tła tlo=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF']; for (y=0;y<=7;y++) { pomoc1 = tlo[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#272828'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#313030'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; }; }; wzortla = wokienku.getImageData(50, 0, 32, 32); wokienku.putImageData(wzortla, 350, 300); // ******************************************** rozmnożenie cegiełek i tla for (i=0; i<=57;i++) { wokienku.putImageData(cegly, 0+i*32,0); }; for (i=0; i<=57;i++) { wokienku.putImageData(wzortla, 0+i*32,32); }; wokienku.putImageData(cegly, 0 ,32); wokienku.putImageData(cegly, 57*32 ,32); cegly58 = wokienku.getImageData(0, 0, 58*32, 32); cegspc56ceg = wokienku.getImageData(0, 32, 58*32, 32); for (y=0;y<=25;y++) { wokienku.putImageData(cegspc56ceg, 0, y*32); }; wokienku.putImageData(cegly58, 0, 0); wokienku.putImageData(cegly58, 0, 26*32); // ********************************************************** dane startowe x=100; y=100; xs=100; ys=100; onkeydown = function(obsluga) { klawisz = obsluga.keyCode; if (klawisz == 39) { // w prawo x+=10; var piksel = wokienku.getImageData(x+(12*4), y, 1, 1).data; if ((piksel[0] &1 ) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 37) { // w lewo x-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 38) { // w górę y-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola y=ys; }; }; if (klawisz == 40) { y+=10; var piksel = wokienku.getImageData(x, y+(24*4), 1, 1).data; if ((piksel[0] & 1)!= 1) { // zakaz przekroczenia pola y=ys; }; }; //czyszczenie starego rysunku wokienku.fillStyle = '#010101'; wokienku.fillRect(xs, ys, 12*4, 24*4); //rysowanie wokienku.putImageData(vert1, x, y); // zapamiętanie starych pozycji xs=x; ys=y; }; // wyjscie ze zdarzenia klawiatury </script> |
|
| Wysłany: Czw 19:18, 04 Lut 2021 Temat postu: |
|
| <canvas width="1900" height="900" id="canvas">
</canvas> <script> const okienko = document.querySelector("#canvas"); const wokienku = okienko.getContext("2d"); // **************************************************** rysunek cegiełek // uwaga bit 1 = 1 czerwieni oznacza zgodę na poruszanie się. cegla=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFEFFFFF', 'FFEFFFFF', 'FFEFFFFF', 'EEEEEEEE']; for (y=0;y<=7;y++) { pomoc1 = cegla[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#787777'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#AAAAAA'; wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; cegly = wokienku.getImageData(0, 0, 32, 32); wokienku.putImageData(cegly, 300, 300); // *************************************** wzorek tła tlo=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF']; for (y=0;y<=7;y++) { pomoc1 = tlo[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#272828'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#313030'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; }; }; wzortla = wokienku.getImageData(50, 0, 32, 32); wokienku.putImageData(wzortla, 350, 300); // ******************************************** rozmnożenie cegiełek i tla for (i=0; i<=57;i++) { wokienku.putImageData(cegly, 0+i*32,0); }; for (i=0; i<=57;i++) { wokienku.putImageData(wzortla, 0+i*32,32); }; wokienku.putImageData(cegly, 0 ,32); wokienku.putImageData(cegly, 57*32 ,32); cegly58 = wokienku.getImageData(0, 0, 58*32, 32); cegspc56ceg = wokienku.getImageData(0, 32, 58*32, 32); for (y=0;y<=25;y++) { wokienku.putImageData(cegspc56ceg, 0, y*32); }; wokienku.putImageData(cegly58, 0, 0); wokienku.putImageData(cegly58, 0, 26*32); // ********************************************************** dane startowe x=100; y=100; xs=100; ys=100; onkeydown = function(obsluga) { klawisz = obsluga.keyCode; if (klawisz == 39) { // w prawo x+=10; var piksel = wokienku.getImageData(x+20, y, 1, 1).data; if ((piksel[0] &1 ) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 37) { // w lewo x-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 38) { // w górę y-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if ((piksel[0] & 1) != 1) { // zakaz przekroczenia pola y=ys; }; }; if (klawisz == 40) { y+=10; var piksel = wokienku.getImageData(x, y+20, 1, 1).data; if ((piksel[0] & 1)!= 1) { // zakaz przekroczenia pola y=ys; }; }; //rysowanie // wokienku.fillStyle = '#010101'; // wokienku.fillRect(0, 0, 300, 200); wokienku.fillStyle = '#FF0000'; wokienku.fillRect(x, y, 20, 20); // zapamiętanie starych pozycji xs=x; ys=y; }; // wyjscie ze zdarzenia klawiatury </script> |
|
| Wysłany: Czw 17:58, 04 Lut 2021 Temat postu: |
|
| <canvas width="1900" height="900" id="canvas">
</canvas> <script> const okienko = document.querySelector("#canvas"); const wokienku = okienko.getContext("2d"); // **************************************************** rysunek cegiełek cegla=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFEFFFFF', 'FFEFFFFF', 'FFEFFFFF', 'EEEEEEEE']; for (y=0;y<=7;y++) { pomoc1 = cegla[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#777777'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#AAAAAA'; wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; cegly = wokienku.getImageData(0, 0, 32, 32); wokienku.putImageData(cegly, 300, 300); // *************************************** wzorek tła tlo=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF']; for (y=0;y<=7;y++) { pomoc1 = tlo[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#282828'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#303030'; wokienku.fillRect(x*4+50, y*4, 4, 4); }; }; }; wzortla = wokienku.getImageData(50, 0, 32, 32); wokienku.putImageData(wzortla, 350, 300); // ******************************************** rozmnożenie cegiełek i tla for (i=0; i<=57;i++) { wokienku.putImageData(cegly, 0+i*32,0); }; for (i=0; i<=57;i++) { wokienku.putImageData(wzortla, 0+i*32,32); }; wokienku.putImageData(cegly, 0 ,32); wokienku.putImageData(cegly, 57*32 ,32); cegly58 = wokienku.getImageData(0, 0, 58*32, 32); cegspc56ceg = wokienku.getImageData(0, 32, 58*32, 32); for (y=0;y<=25;y++) { wokienku.putImageData(cegspc56ceg, 0, y*32); }; wokienku.putImageData(cegly58, 0, 0); wokienku.putImageData(cegly58, 0, 26*32); // ********************************************************** dane startowe x=10; y=10; xs=10; ys=10; onkeydown = function(obsluga) { klawisz = obsluga.keyCode; if (klawisz == 39) { // w prawo x+=10; var piksel = wokienku.getImageData(x+20, y, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 37) { // w lewo x-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 38) { // w górę y-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola y=ys; }; }; if (klawisz == 40) { y+=10; var piksel = wokienku.getImageData(x, y+20, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola y=ys; }; }; //rysowanie wokienku.fillStyle = '#010101'; wokienku.fillRect(0, 0, 300, 200); wokienku.fillStyle = 'red'; wokienku.fillRect(x, y, 20, 20); // zapamiętanie starych pozycji xs=x; ys=y; }; // wyjscie ze zdarzenia klawiatury </script> |
|
| Wysłany: Czw 15:51, 04 Lut 2021 Temat postu: |
|
| <canvas width="1900" height="900" id="canvas">
</canvas> <script> const okienko = document.querySelector("#canvas"); const wokienku = okienko.getContext("2d"); // **************************************************** rysunek cegiełek cegla=[ 'FFFFFFEF', 'FFFFFFEF', 'FFFFFFEF', 'EEEEEEEE', 'FFEFFFFF', 'FFEFFFFF', 'FFEFFFFF', 'EEEEEEEE']; for (y=0;y<=7;y++) { pomoc1 = cegla[y]; for (x=0;x<=7;x++) { pomoc2 = pomoc1.substr(x, 1); if (pomoc2=='F') { wokienku.fillStyle = '#777777'; wokienku.fillRect(x*4, y*4, 4, 4); }; if (pomoc2=='E') { wokienku.fillStyle = '#AAAAAA'; wokienku.fillRect(x*4, y*4, 4, 4); }; }; }; document.write('tu jestem'); obrazek = wokienku.getImageData(0, 0, 32, 32); document.write('teraz tutaj'); wokienku.putImageData(obrazek, 300, 300); document.write('koniec'); // rozmnożenie cegiełek for (i=0; i<=60;i++) { wokienku.putImageData(obrazek, 0+i*32,0); }; // dane startowe x=10; y=10; xs=10; ys=10; onkeydown = function(obsluga) { klawisz = obsluga.keyCode; if (klawisz == 39) { // w prawo x+=10; var piksel = wokienku.getImageData(x+20, y, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 37) { // w lewo x-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 38) { // w górę y-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola y=ys; }; }; if (klawisz == 40) { y+=10; var piksel = wokienku.getImageData(x, y+20, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola y=ys; }; }; //rysowanie wokienku.fillStyle = '#010101'; wokienku.fillRect(0, 0, 300, 200); wokienku.fillStyle = 'red'; wokienku.fillRect(x, y, 20, 20); // zapamiętanie starych pozycji xs=x; ys=y; }; // wyjscie ze zdarzenia klawiatury </script> |
|
| Wysłany: Czw 11:26, 04 Lut 2021 Temat postu: Gra 2D w Javascript |
|
| Gra 2D w Javascript
<canvas width="1900" height="900" id="canvas"> </canvas> <script> const okienko = document.querySelector("#canvas"); const wokienku = okienko.getContext("2d"); x=10; y=10; xs=10; ys=10; onkeydown = function(obsluga) { klawisz = obsluga.keyCode; if (klawisz == 39) { // w prawo x+=10; var piksel = wokienku.getImageData(x+20, y, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 37) { // w lewo x-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola x=xs; }; }; if (klawisz == 38) { // w górę y-=10; var piksel = wokienku.getImageData(x, y, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola y=ys; }; }; if (klawisz == 40) { y+=10; var piksel = wokienku.getImageData(x, y+20, 1, 1).data; if (piksel[0] != 1) { // zakaz przekroczenia pola y=ys; }; }; //rysowanie wokienku.fillStyle = '#010101'; wokienku.fillRect(0, 0, 300, 200); wokienku.fillStyle = 'red'; wokienku.fillRect(x, y, 20, 20); // zapamiętanie starych pozycji xs=x; ys=y; }; // wyjscie ze zdarzenia klawiatury </script> |
|