Что не так с прилавком?

#javascript

Вопрос:

Я пытаюсь создать игру в блэкджек на javascript, и у меня возникают трудности. иногда, когда я рисую карту, счет меняется. в чем может быть проблема? и как это исправить? также есть сбой , когда вы начинаете новую игру , иногда она считается пустой, я имею в виду, что счетчик является счетчиком , есть нарисованные карты, но их не видно.

 var cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
var images = ["media/cards/AC.jpg", "media/cards/2.jpg", "media/cards/3C.jpg", "media/cards/4C.jpg",
  "media/cards/5C.jpg", "media/cards/6C.jpg", "media/cards/7C.jpg", "media/cards/8C.jpg",
  "media/cards/9C.jpg", "media/cards/10C.jpg", "media/cards/JC.jpg", "media/cards/QC.jpg",
  "media/cards/KC.jpg"
];
var upside = "media/cards/UpsideDown.jpg";
var Check2Cards = 0;
var Check2Cards2 = true;
var checkUserScore = 0;
var newgame = true;
checkDealerScore = 0;
var dealerArray = [];
var UserScore = 0;
var DealerScore = 0;
var Draw = 0;

var SCORE = document.getElementById('score');
SCORE.innerHTML = "<p style='font-size:70pt;font-weight:bold'>User: "   UserScore   " Draw: "   Draw   " Dealer: "   DealerScore   "</p >  ";




function deal() {

  if (newgame) {


    var random = Math.floor((Math.random() * 13));
    var UserCards = document.getElementById('user');
    var card = document.createElement('img');
    card.setAttribute("width", 250);
    card.setAttribute("src", images[random]);
    UserCards.appendChild(card);
    checkUserScore  = cards[random];

    var random2 = Math.floor((Math.random() * 13));
    alert(random2   "this is the dealers numbers");
    //dealerArray[i] = random2;
    var DealerCards = document.getElementById('dealer');
    var Dealercard = document.createElement('img');
    Dealercard.setAttribute("width", 250);
    Dealercard.setAttribute("src", "media/cards/UpsideDown.jpg");
    DealerCards.appendChild(Dealercard);
    checkDealerScore  = random2;
    if (checkUserScore <= 21 amp;amp; checkUserScore > checkDealerScore)
      SCORE.innerHTML = "<p style='font-size:70pt;font-weight:bold'>User: "   (UserScore  )   " Draw: "   Draw   " Dealer: "   DealerScore   "</p >  ";

    if (checkDealerScore <= 21 amp;amp; checkUserScore < checkDealerScore)
      SCORE.innerHTML = "<p style='font-size:70pt;font-weight:bold'>User: "   UserScore   " Draw: "   Draw   " Dealer: "   (DealerScore  )   "</p >  ";

    if (checkUserScore == checkDealerScore)
      SCORE.innerHTML = "<p style='font-size:70pt;font-weight:bold'>User: "   UserScore   " Draw: "   (Draw  )   " Dealer: "   DealerScore   "</p >  ";



    if (checkUserScore > 21 || checkDealerScore > 21) {

      Check2Cards2 = false;
      checkUserScore = 0;
      checkDealerScore = 0;
      //newgame = false;
      UserCards.innerHTML = "";
      document.getElementById('dealer').innerHTML = "";

    }

  }
}

function stop() {
  newgame = false;
  if (checkUserScore > checkDealerScore)
    SCORE.innerHTML = "<p style='font-size:70pt;font-weight:bold'>User: "   (UserScore  )   " Draw: "   Draw   " Dealer: "   DealerScore   "</p >  ";
  if (checkUserScore < checkDealerScore)
    SCORE.innerHTML = "<p style='font-size:70pt;font-weight:bold'>User: "   UserScore   " Draw: "   Draw   " Dealer: "   (DealerScore  )   "</p >  ";
  if (checkUserScore == checkDealerScore)
    SCORE.innerHTML = "<p style='font-size:70pt;font-weight:bold'>User: "   UserScore   " Draw: "   (Draw  )   " Dealer: "   DealerScore   "</p >  ";
  var UserCards = document.getElementById('user');
  var DealerCards = document.getElementById('dealer');
  UserCards.innerHTML = "";
  DealerCards.innerHTML = "";
  alert();
  newgame = true;
} 
 body {
  background-image: url(media/background5.jpg);
  background-size: 100%;
  text-align: center;
}

.hidden {
  display: none;
}

.show {
  display: inline-block;
} 
 <header id="score" style="font-size:100pt"></header>
<table border="1" width="100%" height="100%" style="text-align: center">
  <tr>
    <td style="height:300pt;width:100%;font-size:100pt;color:white">
      <div id="dealer">TOP</div>
    </td>
  </tr>
  <tr>
    <td id="left" onclick="stop();" style="height:400pt;width:50%;font-size:100pt;color:white;float:left">left</td>
    <td style="height:400pt;width:49%;font-size:100pt;color:white;float:right"><button style="font-size:100pt" id="deal" onclick=" deal();">deal</button></td>
  </tr>
  <tr>
    <td style="height:350pt;width:100%;font-size:100pt;color:white">
      <div id="user"></div>
    </td>
  </tr>
</table>