Designing HTML+CSS for 23 toothpicks game

[shivajikobardan]

Homework Statement

Designing HTML+CSS for 23 toothpicks game

Relevant Equations

None

The project is a game of 23 toothpicks.

The game of “23” is a two-player game that begins with a pile of 23 toothpicks. Players take turns, withdrawing either 1,2, or 3 toothpicks at a time. The player to withdraw the last toothpick loses the game. Write a human vs. computer program that plays “23”. The human should always move first. When it is the computer’s turn, it should play according the following rules:

a. If there are more than 4 toothpicks left, the computer should withdraw 4 – X toothpicks, where X is the number of toothpicks the human withdrew on the previous turn.
b. If there are 2 to 4 toothpicks left, the computer should withdraw enough toothpicks to lave 1.
c. If there is 1 toothpick left, the computer has to take it and loses.

When the human player enters the number of toothpicks to withdraw, the program should perform input validation. Make sure the entered number is between 1 and 3 and that the player is not trying to withdraw more toothpicks than exist in the pile.
I have written the code for it using console.log. But I want to convert it into a full fledged application just for the kick and dopamine.

let total_toothpicks = 23;
let pass_toothpick_to_computer;
let counter = 0;
let currentPlayer = "human";
function switchPlayer(currentPlayer) {
  return (currentPlayer = currentPlayer === "human" ? "computer" : "human"); //added a return statement here
}
function playGame(currentPlayer) {
  if (currentPlayer === "human") {
    counter++;
    console.log(counter + "human iteration");
    let user_choosed_toothpicks = Number(
      prompt("Pick 1,2 or 3 toothpicks at a time")
    );
    total_toothpicks -= user_choosed_toothpicks;
    console.log("Human choosed" + user_choosed_toothpicks + "toothpicks");
    console.log("total number of toothpicks=", total_toothpicks);
    pass_toothpick_to_computer = user_choosed_toothpicks;
    if (total_toothpicks === 0) {
      console.log("Human loses the game");
    }
    currentPlayer = "computer";
  }
  if (currentPlayer === "computer") {
    counter++;
    console.log(counter + "computer iteration");
    if (total_toothpicks > 4) {
      total_toothpicks = total_toothpicks - 4 + pass_toothpick_to_computer;
      console.log(
        "Computer takes" + Number(4 - pass_toothpick_to_computer) + "toothpicks"
      );
      console.log("total number of toothpicks=", total_toothpicks);
    } else if (total_toothpicks >= 2 && total_toothpicks <= 4) {
      switch (total_toothpicks) {
        case 2:
          total_toothpicks -= 1;
          console.log("Computer takes 1 toothpicks");
          console.log("total number of toothpicks=", total_toothpicks);
          break;
        case 3:
          total_toothpicks -= 2;
          console.log("Computer takes 2 toothpicks");
          console.log("total number of toothpicks=", total_toothpicks);
          break;
        case 4:
          total_toothpicks -= 3;
          console.log("Computer takes 3 toothpicks");
          console.log("total number of toothpicks=", total_toothpicks);
          break;
        default:
          break;
      }
      if (total_toothpicks === 0) {
        total_toothpicks -= 1;
        console.log("Computer loses the game");
      }
    }
    currentPlayer = "human";
  }
}
while (total_toothpicks > 0) {
  playGame(currentPlayer);
}

I'm unable to plan CSS for this. Can you suggest me some ideas? Like how should I design my css? I mean something like how should the UI look?

 

[.Scott]

I think the css will only play a supporting role.
I would set up a table of 23 columns and 1 row. And I would make the borders wide and perhaps 25 pixels wide and the cells would be brown, about 15 pixels wide, and about 60 pixels high - sort of like brown vertical sticks.
Then I would used "onClick" to allow the player to click on the last stick of the group of 1, 2, or 3 that he wanted to pick. The "onClick" function would make his sticks disappear and would show your program picking the next set.

 

[shivajikobardan]

I think the css will only play a supporting role.
I would set up a table of 23 columns and 1 row. And I would make the borders wide and perhaps 25 pixels wide and the cells would be brown, about 15 pixels wide, and about 60 pixels high - sort of like brown vertical sticks.
Then I would used "onClick" to allow the player to click on the last stick of the group of 1, 2, or 3 that he wanted to pick. The "onClick" function would make his sticks disappear and would show your program picking the next set.

I want the user to not know what computer has picked. Only remaining sticks should be known to user. Do you think this makes sense? If user knows what computer picked, he might cheat his way out. But IDK if this makes sense as I'm showing available toothpicks lol.

 

[.Scott]

I'm not sure I understand you.
Perhaps you should have the user click each stick he wants to pick, then click "done".
Then the computer could "slowly" (say 1 per second) show a stick change color and then disappear.
In that way, the sticks would not disappear left to right. If I understand you, that is what you want to avoid.

So, would that solve the problem?

Clearly, the player needs to see the computer picking up some sticks when it is the computers turn.

You could also have a box showing either "your turn", "my turn", "you win" or "I win".

 

[DrJohn]

Or you can just display the number of sticks left, and a dropdown selection box to choose 1 or 2 o 3 or 4 sticks and a button labelled Do It, which subtracts that number for the current number, shows the new current number left, but not the drop down selection box or Do It button, and then two or three seconds later, says the computer removed X sticks, your turn now, and shows number of sticks left, the selection box and the do it button. When the number of sticks left equals zero the player who won is announce " You won" or "I won" and "play again?" or "exit".
A prompt of your turn or computer's turn would help

CSS, just colour the background of the page and the current number of sticks left in a different colour, leave the dropdown selection box as white, and the Do it button as grey until the selection is made, then make it green to be clicked.

That should get you started. As only the number of sticks changes, the player will always know how many the computer removed as the previous number left - the new number left. To reduce the brain strain on remembering numbers, you should just say "computer removed two sticks" or whatever, with the number it took in red.

Unless you were asked to make a fancy animated display with sticks drifting away to the side or falling to the bottom. Then you have a trickier problem.

I've written this in a hurry, but you get the idea. Use colours sparingly, don't waste time on complex animations if the game is not working yet. I always work from the concept of "make it work, then make it pretty". In your case, pretty colours and nothing happening scores you zero as a grade, but game working and plain colours will score you something.