• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Gra przeglądarkowa w HTML/CSS/JS - (zapewne nieprawidłowo napisana funckja)

Object Storage Arubacloud
0 głosów
485 wizyt
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

+1 głos
odpowiedź 21 maja 2021 przez Wiciorny Ekspert (272,390 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ś

4
komentarz 21 maja 2021 przez Comandeer Guru (602,560 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.

+1 głos
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>

 

1
komentarz 24 maja 2021 przez Comandeer Guru (602,560 p.)

Taka mała uwaga: zdarzenie nazywa się loadon… 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.

Podobne pytania

+7 głosów
2 odpowiedzi 815 wizyt
pytanie zadane 9 lutego 2017 w Nasze projekty przez lapa19904 Stary wyjadacz (11,560 p.)
0 głosów
2 odpowiedzi 424 wizyt
pytanie zadane 22 sierpnia 2018 w JavaScript przez Maciej Sadowski Nowicjusz (160 p.)
0 głosów
2 odpowiedzi 257 wizyt
pytanie zadane 8 września 2019 w HTML i CSS przez Jakub Chomicz 1 Użytkownik (840 p.)

92,693 zapytań

141,606 odpowiedzi

320,106 komentarzy

62,051 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...