JS - (zapewne nieprawidłowo napisana funckja)

pytanie zadane 21 maja 2021 w HTML i CSS przez informatyk123 Nowicjusz (120 p.)

Dzień dobry,

od kilku dni uczę się webdeveloperki. W poradniku komputerświata odnalazłem ciekawy projekt umożliwiający zrobienie prostej gry przeglądarkowej, zacząłem od platform, niestety gdzieś jest jakiś błąd i platformy się nie rysują, od kilku godzin próbuję dość co jest nie tak, prosiłbym o wskazówki. Z góry dziękuję. Oto kod:

<!DOCTYPE html>
<html>

<head>
<meta charset= "utf-8">
<title> gra </title>
<style>
canvas
{
background: lightblue;
display: block;
margin: 0 auto;
}

h1
{
text-align: center;
}
</style>

<script>
var can = document.GetElementById('gra');
var ctx = can.getContext('2d');
var GrafikaPlatformy = new Image();
GrafikaPlatformy.src = 'platforma.jpg'
var plat = [];
plat[0] = new Platforma(0,500, 750, 80);

function Platforma (px, py, pszer, pwys)
{
  this.x=px;
  this.y=py;
  this.szer=pszer;
  this.wys=pwys;
}

function rysujplatformy()
{
for (var i = 0;i<plat.length;i++)
{
   ctx.drawImage(GrafikaPlatformy, plat[i].x, plat[i].y, plat[i].szer, plat[i].wys);
}

}


function rysuj()
{
  ctx.clearRect(0,0, can.width, can.height);
  rysujplatformy();
}

setInterval(rysuj,10);

</script>
</head>

<body>
</body>
  <h1> gra </h1>
  <canvas id="gra" width = "1280px" height = "580px"> </canvas>


</html>

2 odpowiedzi

odpowiedź 21 maja 2021 przez Wiciorny Ekspert (269,710 p.)
edycja 21 maja 2021 przez Wiciorny

Zacznijmy od błędu.

var can = document.GetElementById('gra');
var ctx = can.getContext('2d');

GetElementById nie ma takiej funkcji jest natomiast getElementById
wielkość liter ma znaczenie, patrz w błędy konsoli .

 <h1> gra </h1>
  <canvas id="gra" width = "1280px" height = "580px"> </canvas>

znajduje się po za tagiem </body> to błąd, nie ma takiego elementu w dokumencie, wiec nie jest on odnaleziony stąd wykonanie funkcji getContext- jest nieprawidłowe . Popraw kod i wrzuc jeszcze w odpowiednie bloczki, np html.
Uzywaj konsoli do poprawek, bo tutaj jest ogromna liczba błędów...

komentarz 21 maja 2021 przez informatyk123 Nowicjusz (120 p.)

Dziękuję za pomoc. Poprawiłem, sprawdziłem w konsolce w Visual Studio Code i pokazuje mi tylko jeden błąd Cannot read property 'getContext' of null, co dalej uniemożliwia poprawne działanie

komentarz 21 maja 2021 przez ITshnyk Obywatel (1,800 p.)

Niech Pan przeczyta to https://kursjs.pl/kurs/debuger/debuger.php

Dużo lepszy kurs od kś

komentarz 21 maja 2021 przez Comandeer Guru (600,810 p.)

znajduje się po za tagiem </body> to błąd, nie ma takiego elementu w dokumencie, wiec nie jest on odnaleziony stąd wykonanie funkcji getContext- jest nieprawidłowe .

Nieprawda. Zgodnie z regułami parsowania HTML-a, takie elementy i tak zostaną włączone do body. Poza tym dokument rozciąga się także poza body, więc każdy element na stronie jest de facto dzieckiem głównego dokumentu.

Problemem jest tutaj odwoływanie się do tego elementu w kodzie JS przed tym elementem – a zatem w chwili, gdy nie został jeszcze stworzony.

odpowiedź 21 maja 2021 przez wuza8 Początkujący (280 p.)

Jak napisał Commandeer Guru w komentarzu, kolejnym problemem jest to, że kiedy wykonuje się linia

var can = document.getElementById('gra');

element 'gra' jeszcze nie został zainicjowany, ponieważ przeglądarka czyta każdą stronę, którą napiszesz od góry do dołu i kiedy widzi kod JavaScriptu, od razu zaczyna go wykonywać, a w tym wypadku będzie go wykonywać przed zadeklarowaniem jeszcze obiektu 'gra' w HTML, czyli tego canvasa

<canvas id="gra" width = "1280px" height = "580px"> </canvas>

Aby naprawić ten problem, można obudować cały kod JavaScriptu w funkcję i wywołać tą funkcję dopiero wtedy, kiedy nasz element <body> się załaduje do końca

function kiedyElementBodySieZaladuje(){
    //twoj kod JavaScript
}
...

<body onLoad="kiedyElementBodySieZaladuje()">
...

Tutaj używamy tzw. zdarzeń po angielsku "Eventów", którym to jest ewent onLoad - kiedy element się załaduje. Ale co to ma znaczyć? Przecież element body załaduje się przed elementem 'gra'... no właśnie nie, bo element body to specjalny element, który opakowuje wszystkie inne elementy, które zostaną znalezione w pliku. Chociaż ten kod, który napisałeś działa, to takie użycie tagu <body> jest nieintuicyjne, dlatego dobrą praktyką jest zawieranie w tagu <body> wszystkich elementów graficznych strony, tak jak przeglądarka zreinterpretowałaby ten kod.

<body onLoad="kiedyElementBodySieZaladuje()">
  <h1> gra </h1>
  <canvas id="gra" width = "1280px" height = "580px"> </canvas>
</body>

Gdybyś odpalił swój stary kod i włączył inspektor obiektów to właśnie taki kod byś zobaczył, a nie ten, który ty napisałeś, ponieważ przeglądarka musiała "zmodyfikować" twój kod w taki sposób, aby zgadzał się on z jej oczekiwaniami - wszystkie elementy strony w tagu <body>. No i tutaj algorytm, który interpretuje twój kod może się pomylić, a wtedy będzie bardzo trudno znaleźć błąd, który przecież może nie być błędem w kodzie, a błędem w algorytmie przeglądarki.

Całość po tych poprawkach wyglądałaby tak:

<!DOCTYPE html>
<html>
 
<head>
<meta charset= "utf-8">
<title> gra </title>
<style>
canvas
{
background: lightblue;
display: block;
margin: 0 auto;
}
 
h1
{
text-align: center;
}
</style>
 
<script>
function kiedyElementBodySieZaladuje()
{
    var can = document.getElementById('gra');
    var ctx = can.getContext('2d');
    var GrafikaPlatformy = new Image();
    GrafikaPlatformy.src = 'platforma.jpg'
    var plat = [];
    plat[0] = new Platforma(0,500, 750, 80);
 
    function Platforma (px, py, pszer, pwys)
    {
      this.x=px;
      this.y=py;
      this.szer=pszer;
      this.wys=pwys;
    }
 
    function rysujplatformy()
    {
        for (var i = 0;i<plat.length;i++)
        {
           ctx.drawImage(GrafikaPlatformy, plat[i].x, plat[i].y, plat[i].szer, plat[i].wys);
        }
 
    }
 
 
    function rysuj()
    {
      ctx.clearRect(0,0, can.width, can.height);
      rysujplatformy();
    }
 
    setInterval(rysuj,10);
}
 
</script>
</head>
 
<body onLoad="kiedyElementBodySieZaladuje()">
  <h1> gra </h1>
  <canvas id="gra" width = "1280px" height = "580px"> </canvas>
</body>
 
</html>

komentarz 21 maja 2021 przez VBService Ekspert (252,740 p.)

Describe the page rendering process in a browser?

How browser rendering works — behind the scenes

1	komentarz 24 maja 2021 przez Comandeer Guru (600,810 p.) Taka mała uwaga: zdarzenie nazywa się load, on… po prostu wskazuje, że dodajemy listener do niego ("what should happen on load event?"). No i bardziej elegancko byłoby je przypiąć przy pomocy addEventListener.