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 

Gra 2D w 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 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>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość
PostWysł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>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość
PostWysł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>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość
PostWysł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>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość
PostWysł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>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość
PostWysł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>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość
PostWysł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>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość
PostWysł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>
Powrót do góry
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
Piotr-246
Gość
PostWysł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>
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
Na skróty:OfftopicOgólna dyskusjaWłasne przemyśleniaNasza twórczośćObjawieniaBibliaInne religie i ateizmKościół rzymsko katolicki