How can I make a "board of tiles" for this game?-CodePudding

How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?How can I make a "board of tiles" for this game?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!-- 1. Change Title Text -->
  <title>Concentration – A Test of Memory</title>

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

<body>
  <!-- 2. Delete <h1> -->

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
  <script src="js/main.js" charset="utf-8"></script>
</body>
</html>

CodePudding user response：

There are many steps to achieve the wanted result. Normally I wouldn't code this on SO. I just did it because I had fun it it. For the feature dont expect others to code a whole game for you for free!

See the comments within HTML, CSS and JS for furtehr info.

You have to create your color to pick from. The smartest solution IMHO is the use of radio-buttons. The Radio button will even without a script only allow the selection of one choice:
<input type="radio" name="color" value="color-name" id="color-name">
To not break the game you should always have one color selected. To ensure that on start one color is already selected you add the checked-attribtue to one color such as:
<input type="radio" ... checked>
Next you have to hide the checkboxes to be invisible and not cunsumign any space which you do through CSS:
input { display: none; }
Then you have to add the color as visual box by adding a <label>. That has the advantage that you can click on the label and it will select the correct radio button:
<label for="color-name">
After that you color the label with the color you want. While you do that, you can also set a CSS-Class to the same color in the same instance to allow the painting with that color:

label[for=color-name],
.color-name {
  background-color: color-name;
}

Finally you have to create a grid. You can do that easily through JS or hardcode it to HTML. Sicne I dont want to explain you on how to do it correctly through JS (which would cost me another 30 minutes of my lifetime) I will hardcode it through HTML. In my case I used a grid-container: <div >. Then I added 25x child elements: <div ></div>. To make the grid 5x5 dimensions I used CSS on the Grid-Container to create 5 columns:

.game-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

As said already in the comments, you don't need buttons to be clickable for JS. The label of the radio buttons are clickable already (as they are labels). You can run a script even when not being clickable by simply usign the EventListener to check for a click-event by using JS:

element.addEventListener('click', e => {
  // statements
});

To only select the grid-cards and not the container itself or possibel other content you can check if the element that was clicked on contains a specific class:

if (e.target.classList.contains('card')) {
  // statements
}

In case that grid-card already has a color as CSS-Class applied to, we have to remove all potencial classes that would prevent the CSS to work correctly (it would only show the color of the class that is listed last in CSS):
e.target.className = ''
Unfortunatly the last step also removed the card class and as such we have to re-add this class:
e.target.classList.add('card');
Once we did that, we use a switch-case-statement which is cleaner then writing tons of if/else-statements. You can google guides and tutorials on your own. That switch-statement now checks what radio-button is checked and applies a class to the element you clicked on that adds the background-color: e.target.classList.add('color-name');

EDIT

To include a counter you can use the JS lenght-statement: document.querySelectorAll('.game-board .color-name').length. this statement will count the ammount of elements that contain a specific class.
Then simply use innerHTML-statement to display the count:
element.innerHTML = document.querySelectorAll('.game-board .color-name').length

var board = document.querySelector('.game-board')

// eventListener to listen to click events on the game board
board.addEventListener('click', e => {
  console.clear();
  // checks if a card and not the agme baord itself was clicked on
  if (e.target.classList.contains('card')) {
    const card = e.target.classList;
    // checks which color has been selected
    var color = document.querySelector('.color-picker input:checked').value;
    
    // removes all classes from the clicked on element to allow re-painting
    e.target.className = '';
    // re-adds the "card" class to the clicked element
    card.add('card');
    
    // switch statement to add the class with the selected color to paint the grid-card
    switch (color) {
      case "red":
        card.add('red');
        break;
      case "blue":
        card.add('blue');
        break;
      case "green":
        card.add('green');
        break;
      case "yellow":
        card.add('yellow');
        break;
      case "gray":
        card.add('gray');
        break;
    }
    
    // color-counter
    var countRed = document.querySelectorAll('.game-board .red').length,
        countBlue = document.querySelectorAll('.game-board .blue').length,
        countGreen = document.querySelectorAll('.game-board .green').length,
        countYellow = document.querySelectorAll('.game-board .yellow').length,
        countGray = document.querySelectorAll('.game-board .gray').length;
        
    // displaying the counter
    var labelRed = document.querySelector('#count-red span'),
        labelBlue = document.querySelector('#count-blue span'),
        labelGreen = document.querySelector('#count-green span'),
        labelYellow = document.querySelector('#count-yellow span'),
        labelGray = document.querySelector('#count-gray span');
    labelRed.innerHTML = countRed;
    labelBlue.innerHTML = countBlue;
    labelGreen.innerHTML = countGreen;
    labelYellow.innerHTML = countYellow;
    labelGray.innerHTML = countGray;    
  }
});

/* aligning the color picker and game board next to each other */
body {
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  min-height: 100vh;
}


/* box for the color */
.color-picker {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  padding: 5px 30px;
  gap: 10px;
}

/* hides the radio button */
.color-picker > input {
  display: none;
}

/* creatign a visual border to see what color has been selected */
input:checked   label {
  border: 3px solid black;
}

/* setting a "color-box" to the radio-button */
.color-picker > label {
  display: block;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  min-width: 50px;
}

/* settign the color of the color picker and classes for painting */
label[for=red],
.red {
  background-color: red;
}

label[for=blue],
.blue {
  background-color: blue;
}

label[for=green],
.green {
  background-color: green;
}

label[for=yellow],
.yellow {
  background-color: yellow;
}

label[for=gray],
.gray {
  background-color: gray;
}

/* game board that creates a board of 5x5 with equal dimensions */
.game-board {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
}

/* Setting the grid-cards to be squares */
.game-board > .card {
  aspect-ratio: 1 / 1;
  border: 1px solid red;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* To make the grid-cards and label appear like buttons on hover */
.color-picker > label:hover,
.card:hover {
  cursor: pointer;
}

<!-- Letting you select the color -->
<div >
  <input type="radio" name="color" value="red" id="red" checked>
  <label for="red"></label>
  <div id="count-red">Count: <span>0</span></div>
  <input type="radio" name="color" value="blue" id="blue">
  <label for="blue"></label>
  <div id="count-blue">Count: <span>0</span></div>
  <input type="radio" name="color" value="green" id="green">
  <label for="green"></label>
  <div id="count-green">Count: <span>0</span></div>
  <input type="radio" name="color" value="yellow" id="yellow">
  <label for="yellow"></label>
  <div id="count-yellow">Count: <span>0</span></div>
  <input type="radio" name="color" value="gray" id="gray">
  <label for="gray"></label>
  <div id="count-gray">Count: <span>0</span></div>
</div>

<!-- The game board as a grid -->
<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Keeping it simple

Using the browser's color picker, rather than buttons, would simplify the problem. In fact, the JavaScript in this example is entirely optional. We create rows of input type=color which are styled as boxes. And the player clicks on them to select a color.

You could also add a datalist to limit the color selection to some predefined palette. See SO question: How to add predefined colors?

Also see: Browser Compatibility

Run the snippet to play

// Optional JavaScript to create random colour boxes

document.querySelectorAll("input[type=color]").forEach(box => {
    box.value = "#"   Math.floor(Math.random() * 16777215).toString(16);
});

body {
  font-family: sans-serif;
}
.board {
  border: 1px solid dimgray;
  padding: 0.2em;
  display: inline-block;
  background-color: whitesmoke;
  box-shadow: 5px 5px 10px black;
}

input[type=color] {
  width: 50px;
  height: 50px;
  border: none;
  margin: 0;
  padding: 0;
}

<div>Click a box to set color</div>
<div >
  <div>
    <input type="color">
    <input type="color">
    <input type="color">
  </div>
  <div>
    <input type="color">
    <input type="color">
    <input type="color">
  </div>
  <div>
    <input type="color">
    <input type="color">
    <input type="color">
  </div>
</div>