Skip to main content
Notice removed Draw attention by CommunityBot
Bounty Ended with sineemore's answer chosen by CommunityBot
Added a link to the revised code
Source Link
deleted 90 characters in body; edited title
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238

Simple dice game - JavascriptJavaScript MVC implementation

Here's the code:

var model = (function() { var diceSet = []; var diceToRemove = 0; var totalDiceRemoved = 0; var selectedDiceVal = 0; var permDiceLength = 0; return { diceSet: diceSet, diceToRemove: diceToRemove, totalDiceRemoved: totalDiceRemoved, selectedDiceVal: selectedDiceVal } })(); var view = (function() { var domElements = { genDiceDOM: document.getElementById("trigger-gen-dice"), rollDiceDOM: document.getElementById("trigger-roll-dice"), diceContainerDOM: document.getElementById("dice-container"), messageDOM: document.getElementById("message"), genDiceContDOM: document.getElementById("container-init"), mainGameDOM: document.getElementById("container-main-game"), valueSelector: document.getElementById('choose-dice'), gameControllerDOM: document.getElementById('game-controller'), inputNumDice: document.getElementById("input-num-dice"), diceRollingDOM: document.getElementById("rolling-dice-anim") } var diceImages = { dice1: "https://image.ibb.co/mARW6J/dice_1.png", dice2: "https://image.ibb.co/ckY00d/dice_2.png", dice3: "https://image.ibb.co/gJ0DLd/dice_3.png", dice4: "https://image.ibb.co/drDpty/dice_4.png", dice5: "https://image.ibb.co/kqChDy/dice_5.png", dice6: "https://image.ibb.co/duJ00d/dice_6.png" } return { domElements: domElements, displayDiceSet: function(dataSet) { domElements.diceContainerDOM.innerHTML = ""; dataSet.forEach(function(dice) { var diceDOM = document.createElement("div"); var diceNumDOM = document.createElement("span"); diceDOM.className = "dice"; domElements.diceContainerDOM.appendChild(diceDOM); diceDOM.appendChild(diceNumDOM); // console.log("DICE: " + diceImages.dice1); // diceNumDOM.innerHTML = dice.value; diceNumDOM.innerHTML = `<img src="${diceImages["dice" + dice.value]}" width="50">`; if(dice.selected == true) { diceDOM.className += " selected"; } }); } } })(); var controller = (function(viewCont, modelCont) { // Event Handlers viewCont.domElements.genDiceDOM.addEventListener("click", genNumDice); viewCont.domElements.rollDiceDOM.addEventListener("click", rollDice); viewCont.domElements.valueSelector.onclick = getSelectedVal; function Dice(name, value, selected, diceImage) { this.name = name; this.value = value; this.selected = selected; this.diceImage = diceImage; } function getSelectedVal(e) { var target = e.target; for (var i = 0; i < viewCont.domElements.valueSelector.children.length; i++) { // console.log("TEST"); viewCont.domElements.valueSelector.children[i].className = ""; } target.className = "dice-selected"; modelCont.selectedDiceVal = e.target.innerHTML; } function genNumDice() { viewCont.domElements.messageDOM.style.display = "block"; if(viewCont.domElements.inputNumDice.value === "") { viewCont.domElements.messageDOM.innerHTML = `Please enter a number!`; } else { var diceNumDOM = parseInt((view.domElements.inputNumDice).value); viewCont.domElements.messageDOM.innerHTML = `Okay, I've generated ${diceNumDOM} pieces of dice!`; for(i = 0; i < diceNumDOM; i++) { modelCont.diceSet[i] = new Dice("dice" + parseInt(i+1), null, false, null); } modelCont.permDiceLength = modelCont.diceSet.length; viewCont.domElements.genDiceContDOM.style.display = "none"; viewCont.domElements.mainGameDOM.style.display = "block"; } } function rollDice() { viewCont.domElements.messageDOM.style.display = "block"; viewCont.domElements.diceContainerDOM.style.display = "none"; viewCont.domElements.messageDOM.innerHTML = "Rolling the dice..."; viewCont.domElements.diceRollingDOM.style.display = "block"; setTimeout(function(){ viewCont.domElements.diceRollingDOM.style.display = "none"; viewCont.domElements.diceContainerDOM.style.display = "block"; viewCont.domElements.messageDOM.style.display = "block"; modelCont.diceSet.splice(0, modelCont.diceToRemove); modelCont.diceToRemove = 0; var diceValueDOM = parseInt(modelCont.selectedDiceVal); modelCont.diceSet.forEach(function(dice, index) { var randomNum = Math.floor((Math.random() * 6) + 1); dice.value = randomNum; // dice.diceImage = viewCont.diceImages.dice[randomNum].value; if(diceValueDOM === dice.value) { modelCont.diceToRemove++; modelCont.totalDiceRemoved++; dice.selected = true; } else { dice.selected = false; } }); if(modelCont.diceToRemove > 0) { if(modelCont.totalDiceRemoved === modelCont.permDiceLength) { viewCont.domElements.messageDOM.innerHTML = `I bet you drank a ton! No worries, you got it! Game has ended.`; viewCont.domElements.gameControllerDOM.style.display = "none"; } else { viewCont.domElements.messageDOM.innerHTML = `Good guess! There's a "${ diceValueDOM }" in the set!`; } } else { viewCont.domElements.messageDOM.innerHTML = `There's no "${ diceValueDOM }" in the set. Drink, drink, drink!`; } viewCont.displayDiceSet(model.diceSet); }, 1000); } })(view, model); 

I'd appreciate any helpful review on my code in any area possible.

var model = (function() { var diceSet = []; var diceToRemove = 0; var totalDiceRemoved = 0; var selectedDiceVal = 0; var permDiceLength = 0; return { diceSet: diceSet, diceToRemove: diceToRemove, totalDiceRemoved: totalDiceRemoved, selectedDiceVal: selectedDiceVal } })(); var view = (function() { var domElements = { genDiceDOM: document.getElementById("trigger-gen-dice"), rollDiceDOM: document.getElementById("trigger-roll-dice"), diceContainerDOM: document.getElementById("dice-container"), messageDOM: document.getElementById("message"), genDiceContDOM: document.getElementById("container-init"), mainGameDOM: document.getElementById("container-main-game"), valueSelector: document.getElementById('choose-dice'), gameControllerDOM: document.getElementById('game-controller'), inputNumDice: document.getElementById("input-num-dice"), diceRollingDOM: document.getElementById("rolling-dice-anim") } var diceImages = { dice1: "https://image.ibb.co/mARW6J/dice_1.png", dice2: "https://image.ibb.co/ckY00d/dice_2.png", dice3: "https://image.ibb.co/gJ0DLd/dice_3.png", dice4: "https://image.ibb.co/drDpty/dice_4.png", dice5: "https://image.ibb.co/kqChDy/dice_5.png", dice6: "https://image.ibb.co/duJ00d/dice_6.png" } return { domElements: domElements, displayDiceSet: function(dataSet) { domElements.diceContainerDOM.innerHTML = ""; dataSet.forEach(function(dice) { var diceDOM = document.createElement("div"); var diceNumDOM = document.createElement("span"); diceDOM.className = "dice"; domElements.diceContainerDOM.appendChild(diceDOM); diceDOM.appendChild(diceNumDOM); // console.log("DICE: " + diceImages.dice1); // diceNumDOM.innerHTML = dice.value; diceNumDOM.innerHTML = `<img src="${diceImages["dice" + dice.value]}" width="50">`; if(dice.selected == true) { diceDOM.className += " selected"; } }); } } })(); var controller = (function(viewCont, modelCont) { // Event Handlers viewCont.domElements.genDiceDOM.addEventListener("click", genNumDice); viewCont.domElements.rollDiceDOM.addEventListener("click", rollDice); viewCont.domElements.valueSelector.onclick = getSelectedVal; function Dice(name, value, selected, diceImage) { this.name = name; this.value = value; this.selected = selected; this.diceImage = diceImage; } function getSelectedVal(e) { var target = e.target; for (var i = 0; i < viewCont.domElements.valueSelector.children.length; i++) { // console.log("TEST"); viewCont.domElements.valueSelector.children[i].className = ""; } target.className = "dice-selected"; modelCont.selectedDiceVal = e.target.innerHTML; } function genNumDice() { viewCont.domElements.messageDOM.style.display = "block"; if(viewCont.domElements.inputNumDice.value === "") { viewCont.domElements.messageDOM.innerHTML = `Please enter a number!`; } else { var diceNumDOM = parseInt((view.domElements.inputNumDice).value); viewCont.domElements.messageDOM.innerHTML = `Okay, I've generated ${diceNumDOM} pieces of dice!`; for(i = 0; i < diceNumDOM; i++) { modelCont.diceSet[i] = new Dice("dice" + parseInt(i+1), null, false, null); } modelCont.permDiceLength = modelCont.diceSet.length; viewCont.domElements.genDiceContDOM.style.display = "none"; viewCont.domElements.mainGameDOM.style.display = "block"; } } function rollDice() { viewCont.domElements.messageDOM.style.display = "block"; viewCont.domElements.diceContainerDOM.style.display = "none"; viewCont.domElements.messageDOM.innerHTML = "Rolling the dice..."; viewCont.domElements.diceRollingDOM.style.display = "block"; setTimeout(function(){ viewCont.domElements.diceRollingDOM.style.display = "none"; viewCont.domElements.diceContainerDOM.style.display = "block"; viewCont.domElements.messageDOM.style.display = "block"; modelCont.diceSet.splice(0, modelCont.diceToRemove); modelCont.diceToRemove = 0; var diceValueDOM = parseInt(modelCont.selectedDiceVal); modelCont.diceSet.forEach(function(dice, index) { var randomNum = Math.floor((Math.random() * 6) + 1); dice.value = randomNum; // dice.diceImage = viewCont.diceImages.dice[randomNum].value; if(diceValueDOM === dice.value) { modelCont.diceToRemove++; modelCont.totalDiceRemoved++; dice.selected = true; } else { dice.selected = false; } }); if(modelCont.diceToRemove > 0) { if(modelCont.totalDiceRemoved === modelCont.permDiceLength) { viewCont.domElements.messageDOM.innerHTML = `I bet you drank a ton! No worries, you got it! Game has ended.`; viewCont.domElements.gameControllerDOM.style.display = "none"; } else { viewCont.domElements.messageDOM.innerHTML = `Good guess! There's a "${ diceValueDOM }" in the set!`; } } else { viewCont.domElements.messageDOM.innerHTML = `There's no "${ diceValueDOM }" in the set. Drink, drink, drink!`; } viewCont.displayDiceSet(model.diceSet); }, 1000); } })(view, model); 

Simple dice game - Javascript MVC implementation

Here's the code:

var model = (function() { var diceSet = []; var diceToRemove = 0; var totalDiceRemoved = 0; var selectedDiceVal = 0; var permDiceLength = 0; return { diceSet: diceSet, diceToRemove: diceToRemove, totalDiceRemoved: totalDiceRemoved, selectedDiceVal: selectedDiceVal } })(); var view = (function() { var domElements = { genDiceDOM: document.getElementById("trigger-gen-dice"), rollDiceDOM: document.getElementById("trigger-roll-dice"), diceContainerDOM: document.getElementById("dice-container"), messageDOM: document.getElementById("message"), genDiceContDOM: document.getElementById("container-init"), mainGameDOM: document.getElementById("container-main-game"), valueSelector: document.getElementById('choose-dice'), gameControllerDOM: document.getElementById('game-controller'), inputNumDice: document.getElementById("input-num-dice"), diceRollingDOM: document.getElementById("rolling-dice-anim") } var diceImages = { dice1: "https://image.ibb.co/mARW6J/dice_1.png", dice2: "https://image.ibb.co/ckY00d/dice_2.png", dice3: "https://image.ibb.co/gJ0DLd/dice_3.png", dice4: "https://image.ibb.co/drDpty/dice_4.png", dice5: "https://image.ibb.co/kqChDy/dice_5.png", dice6: "https://image.ibb.co/duJ00d/dice_6.png" } return { domElements: domElements, displayDiceSet: function(dataSet) { domElements.diceContainerDOM.innerHTML = ""; dataSet.forEach(function(dice) { var diceDOM = document.createElement("div"); var diceNumDOM = document.createElement("span"); diceDOM.className = "dice"; domElements.diceContainerDOM.appendChild(diceDOM); diceDOM.appendChild(diceNumDOM); // console.log("DICE: " + diceImages.dice1); // diceNumDOM.innerHTML = dice.value; diceNumDOM.innerHTML = `<img src="${diceImages["dice" + dice.value]}" width="50">`; if(dice.selected == true) { diceDOM.className += " selected"; } }); } } })(); var controller = (function(viewCont, modelCont) { // Event Handlers viewCont.domElements.genDiceDOM.addEventListener("click", genNumDice); viewCont.domElements.rollDiceDOM.addEventListener("click", rollDice); viewCont.domElements.valueSelector.onclick = getSelectedVal; function Dice(name, value, selected, diceImage) { this.name = name; this.value = value; this.selected = selected; this.diceImage = diceImage; } function getSelectedVal(e) { var target = e.target; for (var i = 0; i < viewCont.domElements.valueSelector.children.length; i++) { // console.log("TEST"); viewCont.domElements.valueSelector.children[i].className = ""; } target.className = "dice-selected"; modelCont.selectedDiceVal = e.target.innerHTML; } function genNumDice() { viewCont.domElements.messageDOM.style.display = "block"; if(viewCont.domElements.inputNumDice.value === "") { viewCont.domElements.messageDOM.innerHTML = `Please enter a number!`; } else { var diceNumDOM = parseInt((view.domElements.inputNumDice).value); viewCont.domElements.messageDOM.innerHTML = `Okay, I've generated ${diceNumDOM} pieces of dice!`; for(i = 0; i < diceNumDOM; i++) { modelCont.diceSet[i] = new Dice("dice" + parseInt(i+1), null, false, null); } modelCont.permDiceLength = modelCont.diceSet.length; viewCont.domElements.genDiceContDOM.style.display = "none"; viewCont.domElements.mainGameDOM.style.display = "block"; } } function rollDice() { viewCont.domElements.messageDOM.style.display = "block"; viewCont.domElements.diceContainerDOM.style.display = "none"; viewCont.domElements.messageDOM.innerHTML = "Rolling the dice..."; viewCont.domElements.diceRollingDOM.style.display = "block"; setTimeout(function(){ viewCont.domElements.diceRollingDOM.style.display = "none"; viewCont.domElements.diceContainerDOM.style.display = "block"; viewCont.domElements.messageDOM.style.display = "block"; modelCont.diceSet.splice(0, modelCont.diceToRemove); modelCont.diceToRemove = 0; var diceValueDOM = parseInt(modelCont.selectedDiceVal); modelCont.diceSet.forEach(function(dice, index) { var randomNum = Math.floor((Math.random() * 6) + 1); dice.value = randomNum; // dice.diceImage = viewCont.diceImages.dice[randomNum].value; if(diceValueDOM === dice.value) { modelCont.diceToRemove++; modelCont.totalDiceRemoved++; dice.selected = true; } else { dice.selected = false; } }); if(modelCont.diceToRemove > 0) { if(modelCont.totalDiceRemoved === modelCont.permDiceLength) { viewCont.domElements.messageDOM.innerHTML = `I bet you drank a ton! No worries, you got it! Game has ended.`; viewCont.domElements.gameControllerDOM.style.display = "none"; } else { viewCont.domElements.messageDOM.innerHTML = `Good guess! There's a "${ diceValueDOM }" in the set!`; } } else { viewCont.domElements.messageDOM.innerHTML = `There's no "${ diceValueDOM }" in the set. Drink, drink, drink!`; } viewCont.displayDiceSet(model.diceSet); }, 1000); } })(view, model); 

I'd appreciate any helpful review on my code in any area possible.

Simple dice game - JavaScript MVC implementation

var model = (function() { var diceSet = []; var diceToRemove = 0; var totalDiceRemoved = 0; var selectedDiceVal = 0; var permDiceLength = 0; return { diceSet: diceSet, diceToRemove: diceToRemove, totalDiceRemoved: totalDiceRemoved, selectedDiceVal: selectedDiceVal } })(); var view = (function() { var domElements = { genDiceDOM: document.getElementById("trigger-gen-dice"), rollDiceDOM: document.getElementById("trigger-roll-dice"), diceContainerDOM: document.getElementById("dice-container"), messageDOM: document.getElementById("message"), genDiceContDOM: document.getElementById("container-init"), mainGameDOM: document.getElementById("container-main-game"), valueSelector: document.getElementById('choose-dice'), gameControllerDOM: document.getElementById('game-controller'), inputNumDice: document.getElementById("input-num-dice"), diceRollingDOM: document.getElementById("rolling-dice-anim") } var diceImages = { dice1: "https://image.ibb.co/mARW6J/dice_1.png", dice2: "https://image.ibb.co/ckY00d/dice_2.png", dice3: "https://image.ibb.co/gJ0DLd/dice_3.png", dice4: "https://image.ibb.co/drDpty/dice_4.png", dice5: "https://image.ibb.co/kqChDy/dice_5.png", dice6: "https://image.ibb.co/duJ00d/dice_6.png" } return { domElements: domElements, displayDiceSet: function(dataSet) { domElements.diceContainerDOM.innerHTML = ""; dataSet.forEach(function(dice) { var diceDOM = document.createElement("div"); var diceNumDOM = document.createElement("span"); diceDOM.className = "dice"; domElements.diceContainerDOM.appendChild(diceDOM); diceDOM.appendChild(diceNumDOM); // console.log("DICE: " + diceImages.dice1); // diceNumDOM.innerHTML = dice.value; diceNumDOM.innerHTML = `<img src="${diceImages["dice" + dice.value]}" width="50">`; if(dice.selected == true) { diceDOM.className += " selected"; } }); } } })(); var controller = (function(viewCont, modelCont) { // Event Handlers viewCont.domElements.genDiceDOM.addEventListener("click", genNumDice); viewCont.domElements.rollDiceDOM.addEventListener("click", rollDice); viewCont.domElements.valueSelector.onclick = getSelectedVal; function Dice(name, value, selected, diceImage) { this.name = name; this.value = value; this.selected = selected; this.diceImage = diceImage; } function getSelectedVal(e) { var target = e.target; for (var i = 0; i < viewCont.domElements.valueSelector.children.length; i++) { // console.log("TEST"); viewCont.domElements.valueSelector.children[i].className = ""; } target.className = "dice-selected"; modelCont.selectedDiceVal = e.target.innerHTML; } function genNumDice() { viewCont.domElements.messageDOM.style.display = "block"; if(viewCont.domElements.inputNumDice.value === "") { viewCont.domElements.messageDOM.innerHTML = `Please enter a number!`; } else { var diceNumDOM = parseInt((view.domElements.inputNumDice).value); viewCont.domElements.messageDOM.innerHTML = `Okay, I've generated ${diceNumDOM} pieces of dice!`; for(i = 0; i < diceNumDOM; i++) { modelCont.diceSet[i] = new Dice("dice" + parseInt(i+1), null, false, null); } modelCont.permDiceLength = modelCont.diceSet.length; viewCont.domElements.genDiceContDOM.style.display = "none"; viewCont.domElements.mainGameDOM.style.display = "block"; } } function rollDice() { viewCont.domElements.messageDOM.style.display = "block"; viewCont.domElements.diceContainerDOM.style.display = "none"; viewCont.domElements.messageDOM.innerHTML = "Rolling the dice..."; viewCont.domElements.diceRollingDOM.style.display = "block"; setTimeout(function(){ viewCont.domElements.diceRollingDOM.style.display = "none"; viewCont.domElements.diceContainerDOM.style.display = "block"; viewCont.domElements.messageDOM.style.display = "block"; modelCont.diceSet.splice(0, modelCont.diceToRemove); modelCont.diceToRemove = 0; var diceValueDOM = parseInt(modelCont.selectedDiceVal); modelCont.diceSet.forEach(function(dice, index) { var randomNum = Math.floor((Math.random() * 6) + 1); dice.value = randomNum; // dice.diceImage = viewCont.diceImages.dice[randomNum].value; if(diceValueDOM === dice.value) { modelCont.diceToRemove++; modelCont.totalDiceRemoved++; dice.selected = true; } else { dice.selected = false; } }); if(modelCont.diceToRemove > 0) { if(modelCont.totalDiceRemoved === modelCont.permDiceLength) { viewCont.domElements.messageDOM.innerHTML = `I bet you drank a ton! No worries, you got it! Game has ended.`; viewCont.domElements.gameControllerDOM.style.display = "none"; } else { viewCont.domElements.messageDOM.innerHTML = `Good guess! There's a "${ diceValueDOM }" in the set!`; } } else { viewCont.domElements.messageDOM.innerHTML = `There's no "${ diceValueDOM }" in the set. Drink, drink, drink!`; } viewCont.displayDiceSet(model.diceSet); }, 1000); } })(view, model); 
edited tags
Link
200_success
  • 145.7k
  • 22
  • 191
  • 481
update formatting, add tags
Source Link
Loading
Tweeted twitter.com/StackCodeReview/status/997017921741295616
Notice added Draw attention by catandmouse
Bounty Started worth 50 reputation by catandmouse
added 881 characters in body
Source Link
Loading
Source Link
Loading