Mastermind

Developer
Mnicpt
Size
5,601 Kb
Views
38,456
  1. Mastermind Previews
  2. Mastermind HTML Codes
  3. Mastermind CSS Codes
  4. Mastermind JS Codes

How do I make an mastermind?

What is a mastermind? How do you make a mastermind? This script and codes were developed by Mnicpt on 30 July 2022, Saturday.

Mastermind Previews
IQ Test

Mastermind - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mastermind</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main"> <div class="header">Mastermind <span>&reg;</span> </div> <div class="solution"> <div class="marble hidden">?</div> <div class="marble hidden">?</div> <div class="marble hidden">?</div> <div class="marble hidden">?</div> <div class="restart"> <button class="restartBtn">Restart</button> </div> </div> <div class="game"> <!-- 10 guess rows --> </div> <div class="marbles"> <!-- marbles --> </div> </div> <!-- row template --> <div class="row template" style="display:none;"> <div class="guess"> <div class="marble"></div> <div class="marble"></div> <div class="marble"></div> <div class="marble"></div> </div> <div class="hints"> <div class="pin"></div> <div class="pin"></div> <div class="pin"></div> <div class="pin"></div> </div> <div class="checkBtn"> <button class="solveBtn">Check</button> </div> </div> <!-- marble template --> <div class="marble template" draggable="true" style="display:none;"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine-html.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/boot.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mastermind - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { background-color: #222; height: 100%;
}
.header { height: 70px; text-align: center; line-height: 70px; font-size: 40px; font-family: sans-serif; border-bottom: 1px solid black;
}
.header span { position: relative; font-size: 20px; bottom: 16px;
}
.main { position: relative; border: none; width: 320px; margin: 5% auto; background: #e5e1d0;
}
.main .solution,
.main .game,
.main .marbles { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; padding: 5px; border: none;
}
.main .solution { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; height: 60px; -ms-flex-pack: distribute; justify-content: space-around; border-bottom: 1px solid black;
}
.main .solution .marble { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 10.5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.main .solution .marble.hidden { background: #444; color: white;
}
.main .solution .restart { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; border-left: 1px solid black;
}
.main .solution .restart .restartBtn { width: 80px; height: 30px; border-radius: 4px; border: none; background-color: #1182c0; color: white;
}
.main .solution .restart .restartBtn:hover { cursor: pointer;
}
.main .game { -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-line-pack: start; align-content: flex-start;
}
.main .game .row { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 5px; border: none; border-bottom: 1px solid black;
}
.main .game .row.current .checkBtn .solveBtn { visibility: visible;
}
.main .game .row .guess,
.main .game .row .hints,
.main .game .row .checkBtn { border: none; height: 40px;
}
.main .game .row .guess { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 4; -ms-flex: 4; flex: 4;
}
.main .game .row .hints { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-left: 1px solid black;
}
.main .game .row .hints .pin { width: 10px; height: 10px; border: 1px solid #222; border-radius: 5px; margin: 5px; background: #444;
}
.main .game .row .hints .pin.red { background: red;
}
.main .game .row .hints .pin.white { background: white;
}
.main .game .row .hints .pin:nth-child(3), .main .game .row .hints .pin:nth-child(4) { margin-top: 0;
}
.main .game .row .checkBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.main .game .row .checkBtn .solveBtn { height: 20px; color: white; background-color: rgba(27, 147, 76, 0.8); border-radius: 4px; border-color: none; border: 0; visibility: hidden;
}
.main .game .row .checkBtn .solveBtn:hover { cursor: pointer; background-color: #1b934c;
}
.main .marbles { height: 50px;
}
.main .marble { width: 30px; height: 30px; border: 1px solid #222; border-radius: 15px; background-color: #444;
}
.main .marble:hover { cursor: pointer;
}
.main .marble.red { background: red;
}
.main .marble.blue { background: blue;
}
.main .marble.yellow { background: yellow;
}
.main .marble.orange { background: orange;
}
.main .marble.green { background: limegreen;
}
.main .marble.brown { background: tan;
}
.main .marble.white { background: white;
}
.main .marble.black { background: black;
}

Mastermind - Script Codes JS Codes

(function() { var current_row = 9; var solution = []; var solution_marbles = document.querySelectorAll(".solution .marble"); var game = document.querySelector(".game"); var row_template = document.querySelector(".row.template"); var rows = document.querySelectorAll(".row"); var colors = ["red", "blue", "yellow", "orange", "green", "brown", "white", "black"]; var marbleContainer = document.querySelector(".marbles"); var marbleTemplate = document.querySelector(".marble.template"); var marbles = document.querySelectorAll(".marbles .marble"); var current_marbles = document.querySelectorAll(".current .guess .marble"); var check_buttons = document.querySelectorAll(".solveBtn"); var hints = document.querySelectorAll(".current.row .hints .pin"); function init() { generateSolution(); current_marbles = generateGuessRows(); marbles = generateMarbles(); configureDragStartEvents(); configureDragOverDropEvents(); rows = document.querySelectorAll(".row"); check_buttons = document.querySelectorAll(".solveBtn"); hints = document.querySelectorAll(".current.row .hints .pin"); configureCheckButton(); } function generateSolution() { solution = shuffle(colors).slice(0, 4); for (var i = 0; i < solution_marbles.length; i++) { solution_marbles[i].className = "marble " +solution[i]+ " hidden"; } } function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex, shuffledArray = array.slice(0); // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = shuffledArray[currentIndex]; shuffledArray[currentIndex] = shuffledArray[randomIndex]; shuffledArray[randomIndex] = temporaryValue; } return shuffledArray; } function generateGuessRows() { for (var i = 0; i < 10; i++) { var clonedRow = row_template.cloneNode(true); clonedRow.style.display = "flex"; if (i === current_row) { clonedRow.className = "row current"; } game.appendChild(clonedRow); } return document.querySelectorAll(".current .guess .marble"); } function generateMarbles() { for (var i = 0; i < colors.length; i++) { var newMarble = marbleTemplate.cloneNode(true); newMarble.style.display = "block"; newMarble.className = "marble " + colors[i]; marbleContainer.appendChild(newMarble); } return document.querySelectorAll(".marbles .marble"); } function configureDragStartEvents() { for (var i = 0; i < marbles.length; i++) { marbles[i].addEventListener("dragstart", dragstart); } } function dragstart(e) { e.dataTransfer.setData("marble", e.target.className.split(" ")[1]); } function dragover(e) { e.preventDefault(); } function drop(e) { e.preventDefault(); var marbleColor = e.dataTransfer.getData("marble"); // get all marble in current row and validate duplicates var foundSimilar = false; for (var i = 0; i < current_marbles.length; i++) { var marble = current_marbles[i]; if (marble.className.indexOf(marbleColor) !== -1) { foundSimilar = true; break; } } if (!foundSimilar) { e.target.className = "marble " + marbleColor; } } function configureDragOverDropEvents() { current_marbles = document.querySelectorAll(".current .guess .marble"); for (var i = 0; i < current_marbles.length; i++) { current_marbles[i].addEventListener("dragover", dragover); current_marbles[i].addEventListener("drop", drop); } } function configureCheckButton() { for (var i = 0; i < check_buttons.length; i++) { check_buttons[i].addEventListener("click", clickCheckBtn); } } function clickCheckBtn(e) { validateChoice(e); } function validateChoice(e) { // validate all slots chosen for (var i = 0; i < current_marbles.length; i++) { if (current_marbles[i].className.split(" ").length === 1) { e.preventDefault(); return; } } var current_hints = { red: 0, white: 0 }; // validate against solution for (var i = 0; i < current_marbles.length; i++) { if (current_marbles[i].className.split(" ")[1] === solution[i]) { current_hints.red += 1; } else if (solution.includes(current_marbles[i].className.split(" ")[1])) { current_hints.white += 1; } } // render hints hints = document.querySelectorAll(".current.row .hints .pin"); for (var i = 0; i < current_hints.red; i++) { hints[i].className = "pin red"; } for (var j = current_hints.red; j < (current_hints.red + current_hints.white); j++) { hints[j].className = "pin white"; } // determine solved if(current_hints.red === 4) { showSolution(); alert("You win!"); return; } else if(current_row === 0) { showSolution(); alert("Sorry, try again."); return; } // move to next guess for (var i = 0; i < current_marbles.length; i++) { current_marbles[i].removeEventListener("dragover", dragover); current_marbles[i].removeEventListener("drop", drop); } current_row--; changeCurrentRow(); configureDragOverDropEvents(); } function showSolution() { for(var i = 0; i < solution_marbles.length; i++) { solution_marbles[i].className = "marble " +solution_marbles[i].className.split(" ")[1]; } } function changeCurrentRow() { for (var i = 0; i < rows.length; i++) { rows[i].className = "row"; } rows[current_row].className = "row current"; } init();
})();
describe("Mastermind", function() { var rows, choices, dropEvent, checkBtn, colors, solution; beforeEach(function() { colors = ["red", "blue", "yellow", "orange", "green", "brown", "white", "black"]; solution = document.querySelectorAll(".solution .marble"); rows = document.querySelectorAll(".row"); choices = document.querySelectorAll(".current .guess .marble"); checkBtn = document.querySelector(".current .solveBtn"); dropEvent = document.createEvent("HTMLEvents"); dropEvent.initEvent("drop", true, true); dropEvent.eventName = "ondrop"; dropEvent.dataTransfer = { "marble": "red" }; }); it("should generate a solution at start of game", function() { expect(solution[0].className.split(" ")[1]).not.toContain("red"); expect(solution.length).toEqual(4); }); it("should not allow duplicate colors", function() { choices[0].dispatchEvent(dropEvent); choices[1].dispatchEvent(dropEvent); expect(choices[1].className).toEqual("marble"); }); it("should validate all choices have been made before checking", function() { choices[0].dispatchEvent(dropEvent); choices[1].dispatchEvent(dropEvent); checkBtn.click(); expect(rows[9].className).toEqual("row current"); }); it("should display hints after valid check", function() { });
});
Mastermind - Script Codes
Mastermind - Script Codes
Home Page Home
Developer Mnicpt
Username mnicpt
Uploaded July 30, 2022
Rating 3
Size 5,601 Kb
Views 38,456
Do you need developer help for Mastermind?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mnicpt (mnicpt) Script Codes
Name
Angular Calculator
Move Cell in Grid
Model View Sync
Simple Grid
Graph API
Flipboard
SerializedAsyncQueue
Quick Sort
First 100 Prime Numbers
Fading Divider
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!