When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have so far:
var colors = ["red", "blue", "yellow", "white", "black", "green", "orange", "magenta"];
function generateSecretCode() {
var pickedColors = [];
while (pickedColors.length < 4) {
var index = parseInt(Math.random() * colors.length, 0);
var c = colors[index];
if (pickedColors.indexOf(c) == -1) {
pickedColors.push(c);
}
}
return pickedColors;
}
$(function() {
var secretCode = generateSecretCode();
console.log(secretCode);
var indices = [];
$('.pickcolor').on('click', function(e) {
var index = indices[e.target.id] ? indices[e.target.id] : 0;
var currentColor = colors[index];
$(e.target).css('background-color', currentColor)
.data('data-color', currentColor);
index = index + 1 >= colors.length ? 0 : index + 1;
indices[e.target.id] = index;
});
$('#checkButton').on('click', function() {
var selectedColors = [
$('#choosecolor0').data('data-color'),
$('#choosecolor1').data('data-color'),
$('#choosecolor2').data('data-color'),
$('#choosecolor3').data('data-color')
];
if (selectedColors.indexOf(undefined) > -1) {
alert('You haven't chosen four colors yet');
return;
}
});
});body {
overflow: auto;
background-color: lightgrey;
height: 99%;
width: 99%;
}
/* CSS styles continue... */ <!-- HTML content continues... -->My goal is to copy color values from the "choosecolor" divs to the "space" divs inside the board in column order from left to right, without overlapping turns over the first column and leaving the other columns empty. I also want to ensure that there are no duplicate colors in the generated code. Additionally, I plan to implement functionality to check if the input code corresponds with the computer-generated one.
I acknowledge that verifying the input code and displaying pins corresponding to the correctness will be a separate challenge, but it's something I look forward to tackling in the future. Any tips or guidance on how to solve these issues would be highly appreciated!
Thank you in advance, Sincerely, A coding enthusiast :)