React Javascript gra 2048

Question

Witam, uczę się programować w JavaScript a dokładniej w reakcie, próbuje zrobić grę 2048, zrobiłem już wygląd w html i css a teraz próbuje zrobić funkcję, na start stwierdziłem że zrobię funkcję by po kliknięciu przesuwały się liczby w odpowiednim kierunku i dodawaniu do siebie problem polega na tym że wykonuje się tylko dla jednego rzędu i nie wiem jak to naprawić, w jakiś sposób ify psują program,  wysyłam kod najpierw cały a potem jeszcze raz konkretną funkcję http://www.fotosik.pl/zdjecie/4c4f52353e54aae4
 http://www.fotosik.pl/zdjecie/pelne/c2b8d7af36bcecfc

import React, { Component } from 'react';


class Game extends Component {
 constructor() {
  super()
  this.state={
    score: "",
    high_score: ""
  }
 }
roll_r() {
  for(var i=1; i<=4; i++) {  
    for(var j=4; j>1; j--) {
      for(var x=1; j-x>=0; x++) { 
        if(document.getElementById(i*10+j).innerHTML == false) {
          document.getElementById(i*10+j).innerHTML=document.getElementById(i*10+(j-x)).innerHTML;
          document.getElementById(i*10+(j-x)).innerHTML=null;
          console.log("if zrobiony");
        }
         else if(document.getElementById(i*10+j).innerHTML == document.getElementById(i*10+j-x).innerHTML) {
            document.getElementById(i*10+j).innerHTML=parseInt(document.getElementById(i*10+j-x).innerHTML)*2;
            this.setState ({
              score: parseInt(this.state.score+document.getElementById(i*10+j).innerHTML)
            })
            
            document.getElementById(i*10+j-x).innerHTML=null;
            break;
            console.log("if 2 zrobiony");
          }
        if(this.state.high_score<this.state.score) {
              this.setState ({
                high_score: this.state.score
              })
            }
        console.log(i,j,x)
      }  
    }  
  }
}
  render() {
    return (
    <div>
      <div className="Conteiner">
        <div className="TopConteiner">
        	<div className="Header">
        		<div className="Name">2048</div>
        		<div className="Score">Score <br /> {this.state.score}</div>
        		<div className="Score">High Score <br /> {this.state.high_score}</div>
        		<div className="Clear"></div>
        	</div>
        	<div className="Tools">

        	</div>
        </div>
        <div className="BottomConteiner">
		    <div className="Block" id="11">8</div>
		    <div className="Block" id="12">2</div>
		    <div className="Block" id="13">2</div>
		    <div className="Block" id="14">2</div>
		    <div className="Clear"></div>
		    <div className="Block" id="21">2</div>
		    <div className="Block" id="22">2</div>
		    <div className="Block" id="23">2</div>
		    <div className="Block" id="24">2</div>
		    <div className="Clear"></div>
		    <div className="Block" id="31">31</div>
		    <div className="Block" id="32">32</div>
		    <div className="Block" id="33">33</div>
		    <div className="Block" id="34">34</div>
		    <div className="Clear"></div>
		    <div className="Block" id="41">41</div>
		    <div className="Block" id="42">42</div>
		    <div className="Block" id="43">43</div>
		    <div className="Block" id="44">44</div>
        </div>
      </div>
      <div className="Control">
      	<div className="Arrow_u" onClick={()=>  this.roll_u()}></div>
      	<div className="Arrow_l" onClick={()=>  this.roll_l()}></div>
      	<div className="Arrow_r" onClick={()=>  this.roll_r()}></div>
      	<div className="Arrow_d" onClick={()=>  this.roll_d()}></div>
      </div>
    </div>
    );
  }
}

export default Game;

 

roll_r() {
  for(var i=1; i<=4; i++) {  
    for(var j=4; j>1; j--) {
      for(var x=1; j-x>=0; x++) { 
        if(document.getElementById(i*10+j).innerHTML == false) {
          document.getElementById(i*10+j).innerHTML=document.getElementById(i*10+(j-x)).innerHTML;
          document.getElementById(i*10+(j-x)).innerHTML=null;
          console.log("if zrobiony");
        }
         else if(document.getElementById(i*10+j).innerHTML == document.getElementById(i*10+j-x).innerHTML) {
            document.getElementById(i*10+j).innerHTML=parseInt(document.getElementById(i*10+j-x).innerHTML)*2;
            this.setState ({
              score: parseInt(this.state.score+document.getElementById(i*10+j).innerHTML)
            })
            
            document.getElementById(i*10+j-x).innerHTML=null;
            break;
            console.log("if 2 zrobiony");
          }
        if(this.state.high_score<this.state.score) {
              this.setState ({
                high_score: this.state.score
              })
            }
        console.log(i,j,x)
      }  
    }  
  }
}

 

 

Comments

Przerzuć to na gita, bo to tutaj jest słabo czytelne.

---

https://github.com/paweldyl/2048/blob/master/Game.js

---

Ok, przed wszystkim rozdziel sobie for 3 pętel bo to jest złożoność obliczeniowa n^3 (i to w najlepszym przypadku). Zastosuj metodę dziel i rządż.

Stwórz sobie 6 kontrolerów + kierownika.

3 Do sprawdzania w poziomie.

3 Do sprawdzania w pionie.

Kierownik (decydent) koniec gry, kontyujemy itd.

Po drugie rozdziel event na 4 eventy. Prawo, w lewo itd. Bądz sprawdzaj, tam gdzie zmienia się stan obiektu (this.state).  Używasz Reacta, więc pewnie wiesz jak to zrobić.

Pamiętaj, że kierownik sprawdza stan gry! Kontroler reaguje na zdarzenie!

Bo narazie ten kod jest nieczytelny. Jeden for iteruje, gdy odejmuje, a trzeci jeszcze ma dziwną właściwość j-x>0?

Porozdzielaj to na jakieś sensowne metody nikomu będzie się chciało głowić co to jest i*10+j-x.

I rozdziel sobie komponenty!

Btw. To się gra na klawiaturze, obsłuż zdarzenie keyEvent.

Jak zrobisz to, że stanie się to czytelne, bo to będzie łatwiej znależć błąd.

---

i*10+j to jest poprostu id diva którego chce sprawdzić, by wszystko dało się sprawdzić za pomocą pętli nadałem divom w ktorych będą dwe cyfry, 1 oznacza który rząd w pionie, druga który rząd w poziomie, dzięki temu najpierw i=1 a j się zmienia, potem i=2 itd. a nie miałem pojęcia jak to napisać inaczej niż i*10+j, gdy już dostaniemy się do konkretnego diva to zaczyna się wykonywać pętla z X która sprawdza wszystkie liczby na lewo od danego diva, więc gdy j jest mniejsze to powinna się mniej razy wykonywać, stąd j-x>0, a całość rozdziele na 4 różne funkcje, ta ma tylko przesuwać w prawo.

 problem jest chyba w tym że program nie chce działać w momencie gdy ma przeczytać diva któremu prędzej nadałem wartość null, wtedy pentla się przerywa, tyle że nie wiem jak inaczej to zrobić tak żeby wyczyścić danego diva niż przez nadanie mu null :/

---

Użyj data-type.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Po prostu wstaw mu wartość null.