Tworzę grę Click and Clear. Gdy użytkownik kliknie pewną cegły, sąsiednie cegły są sprawdzane na ten sam kolor, a wszystkie te cegły są cegłe, są usuwane jednocześnie.

Są one wyczyszczone za pomocą funkcji ClearRect ().

Teraz pozostawia białą łatę między cegłami a cegłami poniżej, pozostawiając powyższe cegły wiszące.

Teraz chcę przynieść te cegły powyżej w dół. Jak mam to zrobic..? Pomoc plz

2
Ganesh Somani 2 sierpień 2012, 12:37

3 odpowiedzi

Najlepsza odpowiedź

Pytanie jest dość niejasne, ale w oparciu o tytuł, musisz oczyścić płótno, zanim będziesz mógł przerysować. W przeciwnym razie narysowane elementy po prostu stosowałyby się na siebie.

Aby to zrobić, zadzwoń do funkcji clearRect na samej płótnie:

function clear() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 500, 500);
}

Gdzie canvas jest identyfikatorem twojego płótna i {x1}} wymiary. Teraz będziesz miał puste płótno, gdzie można ponownie przerysować ponownie.

Kiedyś stworzyłem Prosta gra na płótnie HTML5 może nauczyć się z kodu źródłowego.

11
MarcoK 2 sierpień 2012, 08:50

Myślę, że rozumiem, o co pytasz. Jeśli tak, chcesz wiedzieć, jak przesunąć bloki, gdy poniższe bloki zostały usunięte.

Jest to tylko kwestia zwiększania pozycji X (pamiętaj, że płótno rozpoczyna się o 0,0) przy każdej iteracji pętli gry.

Jak daleko wzrośnie? Cóż, byłoby to, gdzie jest najwyższa "stała wieża". Tj. Powiedz, że masz kolumnę z 10 żetonów i usuwasz 7. 3 poniżej potrzeba spada na wysokość pozostałych 6 - tak, że byłoby board height - (6*token height)

*
*
*
+ <- remove
* <- 6x token height (and less the board height)
*  
*  
*
*
*
1
Jarrod 2 sierpień 2012, 23:31

Miałem sukces w przerwie płótno HTML przez dom.

    var c = document.getElementsByName("myCanvas")[0];

    if (c != null)
    {
        c.remove();
    }

    var c = document.createElement("canvas");
    c.setAttribute("name", "myCanvas");
    c.setAttribute("width", 900);
    c.setAttribute("height", 600);
    c.setAttribute("style", "border:1px solid #d3d3d3");
0
Russell 26 luty 2020, 18:09