Slot Machine Matching
HTML
<p>
<span>Result 1:</span>
<span class="result" id="result1"></span>
</p>
<p>
<span>Result 2:</span>
<span class="result" id="result2"></span>
</p>
CSS
span {
font-weight: bold;
}
span.result {
font-weight: normal;
}
JavaScript
var options = [
"slot-2",
"slot-3",
"slot-5",
"slot-5",
"slot-4",
"slot-3",
"slot-1",
"slot-4",
"slot-1",
"slot-2",
"slot-2",
"slot-4",
"slot-5",
"slot-1",
"slot-4"
];
// convert selections to usable values and filter unique elements
function buildResults (arr) {
return arr.map(function (index) {
return options[index];
}).filter(function (value, i, arr) {
return arr.indexOf(value) === i;
});
}
// if array has been reduced to the length of 1 it is a winner
function checkResults (results) {
if (results.length === 1) return true;
if (results.length !== 1) return false;
}
var result1 = checkResults(buildResults([0, 2, 3])),
result2 = checkResults(buildResults([12, 2, 3]));;
document.querySelector('#result1').innerHTML = result1;
document.querySelector('#result2').innerHTML = result2;