Skip to content
Advertisement

Connect Four Game Randomly Not Placing First Puck For Each Column

My problem is that I have been testing placement for the first puck on each position.

But when I go in a row to the left the last three columns don’t place anything

Meaning they have children, even though I don’t really think they do.

My code:

var redCheckBox = document.getElementById('redColor');
var yellowCheckBox = document.getElementById('yellowColor');
var easyComputerModeCheckBox = document.getElementById('easy');
var mediumComputerModeCheckBox = document.getElementById('medium');
var hardComputerModeCheckBox = document.getElementById('hard');
var goFirstCheckBox = document.getElementById('first');
var goSecondCheckBox = document.getElementById('goSecond');
var setup = document.getElementById('setup');
var gameBoard = document.getElementById('gameBoard');
var playerDot = document.getElementById('playerDot');
var circleBase = document.getElementsByClassName('circleBase');
var playerColor = '';

function createRedPlayer() {
  playerDot.style.backgroundColor = 'red';
  $(circleBase).hover(function() {
    $(this).css("background-color", "red");
  }, function() {
    $(this).css("background-color", "lightgreen");
  });
}

function createYellowPlayer() {
  playerDot.style.backgroundColor = 'yellow';
  $(circleBase).hover(function() {
    $(this).css("background-color", "yellow");
  }, function() {
    $(this).css("background-color", "lightgreen");
  });
}


function getGameUp() {
  setup.style.display = 'none';
  gameBoard.style.display = 'block';
}

function placeOneForPlayer(x /*where to put it */ ) {
  var node = document.createElement("div");
  node.classList.add("circleBase");
  node.classList.add("type1");
  var randomIdNumber = Math.floor(Math.random() * 2000);
  var idName = "id" + randomIdNumber;
  node.setAttribute("id", idName);
  node.style.backgroundColor = playerDot.style.backgroundColor;
  document.getElementById(x).appendChild(node);
}

function placeOneForEnemy(x /*where to put it */ ) {
  var node = document.createElement("div");
  node.classList.add("circleBase");
  node.classList.add("type1");
  var randomIdNumber = Math.floor(Math.random() * 2000);
  var idName = "id" + randomIdNumber;
  node.setAttribute("id", idName);
  node.style.backgroundColor = enemyDot.style.backgroundColor;
  document.getElementById(x).appendChild(node);
}

function placeColumnOne() {
  if (rowSixOne.hasChildNodes()) {
    console.log('has child');
  } else {
    placeOneForPlayer('rowSixOne');
  }
}

function placeColumnTwo() {
  if (rowSixTwo.hasChildNodes()) {
    console.log('has child');
  } else {
    placeOneForPlayer('rowSixTwo');
  }
}

function placeColumnThree() {
  if (rowSixThree.hasChildNodes()) {
    console.log('has child');
  } else {
    placeOneForPlayer('rowSixThree');
  }
}

function placeColumnFour() {
  if (rowSixFour.hasChildNodes()) {
    console.log('has child');
  } else {
    placeOneForPlayer('rowSixFour');
  }
}

function placeColumnFive() {
  if (rowSixFour.hasChildNodes()) {
    console.log('has child');
  } else {
    placeOneForPlayer('rowSixFive');
  }
}

function placeColumnSix() {
  if (rowSixFour.hasChildNodes()) {
    console.log('has child');
  } else {
    placeOneForPlayer('rowSixSix');
  }
}

function placeColumnSeven() {
  if (rowSixFour.hasChildNodes()) {
    console.log('has child');
  } else {
    placeOneForPlayer('rowSixSeven');
  }
}
#setup {
  background-color: white;
  height: 90vh;
  width: 80vw;
}

body {
  background-color: grey;
}

#playerDot {
  height: 50px;
  width: 50px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  visibility: hidden;
}

#enemyDot {
  height: 50px;
  width: 50px;
  background-color: yellow;
  border-radius: 50%;
  display: inline-block;
  visibility: hidden;
}

#gameBoard {
  width: 75vw;
  height: 60vh;
  display: none;
}

#placementArea {
  width: 80vw;
  height: 15vh;
  background-color: lightgreen;
  border: 2px black solid;
  display: flex;
}

#rowOne {
  width: 80vw;
  height: 15vh;
  border: 2px black solid;
  display: flex;
  background-color: white;
}

#rowTwo {
  width: 80vw;
  height: 15vh;
  border: 2px black solid;
  display: flex;
  background-color: white;
}

#rowThree {
  width: 80vw;
  height: 15vh;
  border: 2px black solid;
  display: flex;
  background-color: white;
}

#rowFour {
  width: 80vw;
  height: 15vh;
  border: 2px black solid;
  display: flex;
  background-color: white;
}

#rowFive {
  width: 80vw;
  height: 15vh;
  border: 2px black solid;
  display: flex;
  background-color: white;
}

#rowSix {
  width: 80vw;
  height: 15vh;
  border: 2px black solid;
  display: flex;
  background-color: white;
}

#rowOneOne {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowOneTwo {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowOneThree {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowOneFour {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowOneFive {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowOneSix {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowOneSeven {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowTwoOne {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowTwoTwo {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowTwoThree {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowTwoFour {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowTwoFive {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowTwoSix {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowTwoSeven {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowThreeOne {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowThreeTwo {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowThreeThree {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowThreeFour {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowThreeFive {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowThreeSix {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowThreeSeven {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFourOne {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFourTwo {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFourThree {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFourFour {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFourFive {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFourSix {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFourSeven {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFiveOne {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFiveTwo {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFiveThree {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFiveFour {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFiveFive {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFiveSix {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowFiveSeven {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowSixOne {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowSixTwo {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowSixThree {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowSixFour {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowSixFive {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowSixSix {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

#rowSixSeven {
  width: 11.42vw;
  height: 15vh;
  border: 2px black solid;
}

.circleBase {
  border-radius: 50%;
  behavior: url(PIE.htc);
  border: 2px black solid;
}

.type1 {
  width: 11.42vw;
  height: 14.5vh;
  background-color: lightgreen;
}
<center>
  <div id='setup'>
    Hey! Welcome to my Connect Four game! Please choose some settings below!
    <br>
    <h3>Player:</h3>
    Do you want to be Red?
    <input type='checkbox' id='redColor' value='red' onclick='createRedPlayer()'> 
    &nbsp; &nbsp; Or do you want to be Yellow?
    <input type='checkbox' id='yellowColor' value='yellow' onchange='createYellowPlayer()'>
    <h3>Opponent AI Level:</h3>
    Easy
    <input type='checkbox' id='easy' value='easyMode' onclick='compEasyModeSetup()'> 
    &nbsp; &nbsp; Medium (Coming Soon)
    <input type='checkbox' id='medium' value='mediumMode' onclick='compMediumModeSetup()'> 
    &nbsp; &nbsp; Hard (Coming Soon)
    <input type='checkbox' id='hard' value='hardMode' onclick='compHardModeSetup()'>
    <br>
    <h4>Do you want to go first, or have the computer go first?</h4>
    First
    <input type='checkbox' id='goFirst' value='first' onclick='orderFunctionFirst()'> 
    &nbsp; &nbsp Second
    <input type='checkbox' id='goSecond' value='second' onclick='orderFunctionSecond()'>
    <br>
    <br>
    <br>
    <button id='confirm' onclick='getGameUp()'>Confirm</button>
  </div>
</center>

<span id='playerDot'></span>
<span id='enemyDot'></span>

<center>
  <div id='gameBoard'>
    <div id='placementArea'>
      <div class="circleBase type1" id='firstPlacement' onclick='placeColumnOne()' ;></div>
      <div class="circleBase type1" id='secondPlacement' onclick='placeColumnTwo()'></div>
      <div class="circleBase type1" id='thirdPlacement' onclick='placeColumnThree()'></div>
      <div class="circleBase type1" id='fourthPlacement' onclick='placeColumnFour()'></div>
      <div class="circleBase type1" id='fifthPlacement' onclick='placeColumnFive()'></div>
      <div class="circleBase type1" id='sixthPlacement' onclick='placeColumnSix()'></div>
      <div class="circleBase type1" id='seventhPlacement' onclick='placeColumnSeven()'></div>
    </div>
    <div id='rowOne'>
      <div id='rowOneOne'></div>
      <div id='rowOneTwo'></div>
      <div id='rowOneThree'></div>
      <div id='rowOneFour'></div>
      <div id='rowOneFive'> </div>
      <div id='rowOneSix'></div>
      <div id='rowOneSeven'></div>
    </div>
    <div id='rowTwo'>
      <div id='rowTwoOne'></div>
      <div id='rowTwoTwo'></div>
      <div id='rowTwoThree'></div>
      <div id='rowTwoFour'></div>
      <div id='rowTwoFive'></div>
      <div id='rowTwoSix'></div>
      <div id='rowTwoSeven'></div>
    </div>
    <div id='rowThree'>
      <div id='rowThreeOne'></div>
      <div id='rowThreeTwo'></div>
      <div id='rowThreeThree'></div>
      <div id='rowThreeFour'></div>
      <div id='rowThreeFive'></div>
      <div id='rowThreeSix'></div>
      <div id='rowThreeSeven'></div>
    </div>
    <div id='rowFour'>
      <div id='rowFourOne'></div>
      <div id='rowFourTwo'></div>
      <div id='rowFourThree'></div>
      <div id='rowFourFour'></div>
      <div id='rowFourFive'></div>
      <div id='rowFourSix'></div>
      <div id='rowFourSeven'></div>
    </div>
    <div id='rowFive'>
      <div id='rowFiveOne'></div>
      <div id='rowFiveTwo'></div>
      <div id='rowFiveThree'></div>
      <div id='rowFiveFour'></div>
      <div id='rowFiveFive'></div>
      <div id='rowFiveSix'></div>
      <div id='rowFiveSeven'></div>
    </div>
    <div id='rowSix'>
      <div id='rowSixOne'></div>
      <div id='rowSixTwo'></div>
      <div id='rowSixThree'></div>
      <div id='rowSixFour'></div>
      <div id='rowSixFive'></div>
      <div id='rowSixSix'></div>
      <div id='rowSixSeven'></div>
    </div>
  </div>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Advertisement

Answer

I see your problem, in your functions for placeColumnFive(), placeColumnSix(), and placeColumnSeven(), they all are comparing to column 4, when they should be comparing to column 5, 6, and 7 respectively.. All three functions have: if(rowSixFour.hasChildNodes()) .. notice the rowSixFour.hasChildNodes in all three functions.. They should be rowSixFive.hasChildNodes, rowSixSix.hasChildNodes, and rowSixSeven.hasChildNodes.

In other words: Change your placeColumnFive(), placeColumnSix(), and placeColumnSeven() functions to this:

function placeColumnFive(){
  if(rowSixFive.hasChildNodes()){
    console.log('has child');
  }else{
    placeOneForPlayer('rowSixFive');
  }
}

function placeColumnSix(){
  if(rowSixSix.hasChildNodes()){
    console.log('has child');
  }else{
    placeOneForPlayer('rowSixSix');
  }
}

function placeColumnSeven(){
  if(rowSixSeven.hasChildNodes()){
    console.log('has child');
  }else{
    placeOneForPlayer('rowSixSeven');
  }
}
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement