React Javascript gra 2048

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)
      }
    }
  }
}