3
\$\begingroup\$

I built this game that I used to play at family get-togethers. I am still working on the final implementation of how to actually play someone in the game. Please critique the main logic of the dice and how I find the values.

var dice1 = new dice(1);
var dice2 = new dice(2);
var dice3 = new dice(3);
var dice4 = new dice(4);
var dice5 = new dice(5);
var diceArray = [dice1, dice2, dice3, dice4, dice5];
var rollButton = document.getElementById('roll_button');
var cargo = 0;
var numOfRolls = 0;
var cargoButton = document.getElementById('cargo');
var canHaveCargo = false;
var playerScore = document.getElementById('firstPlayerScore');



//dice object
function dice(id){
    this.id = id;
    this.currentRoll = 1;
    this.previousRoll = 1;
    this.isSelected = false;
    this.diceImageUrl = "img/dice/dice1.png";
    this.roll = function(){
        this.previousRoll = this.currentRoll;
        this.currentRoll = getRandomRoll(1, 6);
    }
}

//returns an array of all dice that are not currently selected so they can be rolled.
function getRollableDiceList(){
    var tempDiceList = [];
    for(var i = 0; i < diceArray.length; i++){
        if(!diceArray[i].isSelected){
            tempDiceList.push(diceArray[i]);
        }
    }
    return tempDiceList;
}

// gets a random number between min and max (including min and max)
function getRandomRoll(min,max){
    return Math.floor(Math.random() * (max-min + 1) + min);
}

// calls the roll function on each dice
function rollDice(rollableDiceList){
    for(var i = 0; i < rollableDiceList.length; i++){
        rollableDiceList[i].roll();
    }
}

// updates each dice with the new url for the image that corresponds to what their current roll is
function updateDiceImageUrl(){
    for(var i = 0; i < diceArray.length; i++){
        var currentDice = diceArray[i];

        currentDice.diceImageUrl = "http://boomersplayground.com/img/dice/dice" + currentDice.currentRoll + ".png";

        //update div image with img that cooresponds to their current roll
        updateDiceDivImage(currentDice);
    }
}

//Displays the image that matches the roll on each dice
function updateDiceDivImage(currentDice) {
    document.getElementById("dice"+currentDice.id).style.backgroundImage = "url('" + currentDice.diceImageUrl +"')";
}

// returns an array of all
function getNonSelectedDice(){
    var tempArray = [];
    for(var i = 0; i < diceArray.length; i++){
        if(!diceArray[i].isSelected){
            tempArray.push(diceArray[i]);
        }
      tempArray.sort(function(a, b){
        return b.currentRoll - a.currentRoll;
      });
    }
    return tempArray;
}

function getSelectedDice(){
  var selectedDice = [];
  for(var i = 0; i < diceArray.length; i++){
    if(diceArray[i].isSelected){
      selectedDice.push(diceArray[i]);
    }
  }
  return selectedDice;
}

//boolean variables
var shipExist = false;
var captExist = false;
var crewExist = false;

//checks each dice for ship captain and crew. Auto select the first 6, 5 , 4.
function checkForShipCaptCrew(){
    //array of dice that are not marked selected
    var nonSelectedDice = getNonSelectedDice();
  
    for(var i = 0; i < nonSelectedDice.length; i++){
        //temp variable that represents the current dice in the list
      currentDice = nonSelectedDice[i];
      
      if (!shipExist) {
          if (currentDice.currentRoll == 6) {
              shipExist = true;
              currentDice.isSelected = true;
          }
      }
      if (shipExist && !captExist) {
        if (currentDice.currentRoll == 5) {
          captExist = true;
          currentDice.isSelected = true;
        }
      }
      if (shipExist && captExist && !crewExist) {
        if (currentDice.currentRoll == 4) {
            crewExist = true;
            currentDice.isSelected = true;
            canHaveCargo = true;
        }
      }
    }
}

function addGlow(){
  var selectedDice = getSelectedDice();

  for (var i = 0; i < selectedDice.length; i++){
    var addGlowDice = selectedDice[i];
    var element = document.getElementById('dice' + addGlowDice.id);

    element.className = element.className + " glowing";
  }
}


rollButton.addEventListener('click', function(){
        //generate rollable dice list
  
    
    if (numOfRolls < 3) {
       
        var rollableDiceList = getRollableDiceList();

        //roll each dice
        rollDice(rollableDiceList);

        //update dice images
        updateDiceImageUrl();

        getNonSelectedDice();
      
        // //auto select first 6, 5, 4 (in that order)
        checkForShipCaptCrew();

        addGlow();
        // //adds a red glow to each dice that is selected
        numOfRolls++;
    }
});
/* General Document Styles */
body{
	font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
  background-color: green;
}

.clear{
	clear: both;
}

.container{
	position:absolute;
	top:0;
	left:0;
	background-color: green;
}

#game_container {
	height: 100%;

}

/* Device Owner (current player) Info Styles */
.player_info{
	float: left;
	height: 100%;
}

#device_owner_player_row{
	width: 100%;
	height: 15%;
  padding-top: 25px;
}

#device_owner_player_row h2 {
  color: black;
  font-weight: bold;
  font-size: 2.5em;
}

#device_owner_player_name{
	width: 70%;
}

#device_owner_score{
	width: 30%;

}

.player_info#device_owner_score h1{
	float: right;
}
.player_info h1{
	padding: 0;
	margin: 0;
}

/* Dice Styles */
#dice_row{
	height: 15%;
}

#dice_center{
	width: 100%;
	margin-left: 30%;
	margin-top: 5%;
}

.game_item{
	position: relative;
	float: left;
	margin: 5px;
}

.game-item {
  font-size: 1.5em;
}

.dice{
	width: 5%;
	border-radius: 15px;
	background-image: url("http://www.boomersplayground.com/img/dice/dice1.png");
	background-repeat: no-repeat;
	background-size: cover;
}

/* Button Styles -- some styles come from dice styles */
#roll_button{
	background-color: #337ab7;
	border-color: #2e6da4;
	border-radius: 10px;
	color: #fff;
	text-align: center;
  margin-left: 50px;
}


/*.cargo {
  width: 10%;
  background-color: #337ab7;
  border-color: #2e6da4;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  padding: 10px;
  margin-left: 45%;
  margin-top: 50px;
}*/

.cargoButton {
  margin-top: 50px;
}

.roll-button {
  height: 85px;
  width: 150px;
}

.glowing {
  border: 5px solid blue;
}

/*.jumbotron {
  text-align: center;
  background-color: rgba(250. 250, 250, 0.8);
  width: 400px;
}*/

h1 {
  text-align: center;
  color: black;
}

.dice {
  height: 75px;
  width: 75px;
}
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Ship Captain Crew</title>
    
    
    
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

        <link rel="stylesheet" href="css/style.css">

    
    
    
  </head>

  <body>

    <body>
  <div class="container">
    <div class="row">
      <div class="col-md-7 col-md-offset-4">
        <h1 class='align-center'>Ship, Captain & Crew</h1>
		<div class='row' id="game_container" >
			<div class="col-xs-4 col-xs-offset-4" id="device_owner_player_row">
<h2 id='firstPlayerScore'></h2>
			</div>
			
			<div class="clear"></div>
			
			<div id="dice_row" class='row'>
				<div id="dice_center" class='col-xs-4 col-xs-offset-4'>
					<div class="dice game_item" id="dice1"></div>
					<div class="dice game_item" id="dice2"></div>
					<div class="dice game_item" id="dice3"></div>
					<div class="dice game_item" id="dice4"></div>
					<div class="dice game_item" id="dice5"></div>
<button class='roll-button game-item btn btn-primary btn-lg' id='roll_button'>Roll Dice</button>
				</div>
			</div>
		
      </div>
    </div>  
  </div>
<!--			<div class="clear"></div>
<div class='col-xs-4 col-xs-offset-5 cargoButton'>
<button id='reset' class='game-item btn btn-primary btn-lg'>Reset</button>
</div>-->


	<script src="js/dice.js"></script>
	<script>
	</script>
</body>
</html>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

        <script src="js/index.js"></script>

    
    
    
  </body>
</html>

For those unfamiliar with the game, here are the basics that this section of the game covers:

Each turn consists of three rolls of the dice. The player must roll a 6, 5 and 4 in descending order. So if you roll 5, 4, 3, 1, 1, you have to roll them all again because you haven't rolled a 6 yet. Same if you roll a 6, 4, 2, 2, 1, you keep the 6 but roll the other four dice because you haven't gotten a 5 yet. After you get 6, 5, 4 you then add the final dice up.

\$\endgroup\$
  • \$\begingroup\$ It seems like your code just lest you roll 3 times. Are any of your ruled implemented? \$\endgroup\$ – Neal Apr 14 '16 at 21:38
  • \$\begingroup\$ Yes you get 3 rolls to get 6, 5, 4 in descending order. You need a 6 before you can get a 5 and you need 6 and 5 before you can get a 4. There is nothing wrong with the game it's working as expected this is just my first game and figured let more experienced eyes look at it and guide me to "better" implementations to what I was doing. \$\endgroup\$ – boomer1204 Apr 14 '16 at 21:41
  • \$\begingroup\$ You have an extra </html> tag and other weird junk at the end of your HTML file. Is that part of your code, or did you make a mistake when pasting the code here? \$\endgroup\$ – 200_success Apr 14 '16 at 23:10
  • \$\begingroup\$ Prolly an error when copy and pasting. Again The code is functioning how it's supposed to. It's my first game/project and just want some knowledgeable guys too look at the JavaScript and advise better/alternate ways I could do it \$\endgroup\$ – boomer1204 Apr 14 '16 at 23:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.