# Designing HTML+CSS for 23 toothpicks game

• Comp Sci
• shivajikobardan
In summary, the project is a game of 23 toothpicks. The human should always move first. When it is the computer’s turn, it should play according the following rules: 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. If there are 2 to 4 toothpicks left, the computer should withdraw enough toothpicks to leave 1. If there is 1 toothpick left, the computer has to take it and loses.
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.

JavaScript:
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?

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.

.Scott said:
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.

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".

shivajikobardan
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.

## What is the 23 toothpicks game and how does it work?

The 23 toothpicks game is a simple two-player strategy game. Players take turns removing 1, 2, or 3 toothpicks from a pile of 23. The player forced to take the last toothpick loses the game. The objective is to force your opponent into a position where they have to pick the last toothpick.

## How do I create a basic HTML structure for the 23 toothpicks game?

To create a basic HTML structure for the 23 toothpicks game, you need to start with a basic HTML template. This includes a DOCTYPE declaration, a head section where you can include your CSS, and a body section where you will place your game elements such as buttons and displays for the number of toothpicks.

## What CSS techniques can I use to style the toothpicks and game interface?

You can use various CSS techniques to style the toothpicks and game interface. For example, you can use flexbox to align the toothpicks in a row or grid, use background images or colors to represent the toothpicks, and style buttons with CSS properties like border-radius, box-shadow, and hover effects to make the game visually appealing and interactive.

## How can I use JavaScript to manage the game logic for the 23 toothpicks game?

JavaScript can be used to manage the game logic by keeping track of the number of toothpicks remaining, handling player turns, and determining the winner. You can use event listeners to respond to button clicks, update the display of remaining toothpicks, and implement the rules of the game to ensure players can only remove 1, 2, or 3 toothpicks per turn.

## How can I ensure my HTML+CSS design is responsive and works on different devices?

To ensure your HTML+CSS design is responsive, you can use media queries to adjust the layout and styles based on the screen size. Additionally, using flexible units like percentages, ems, and rems instead of fixed units like pixels can help make your design more adaptable. Employing a mobile-first approach, where you design for the smallest screen first and then enhance the design for larger screens, can also improve responsiveness.

Replies
8
Views
2K
Replies
1
Views
851
Replies
7
Views
1K
Replies
1
Views
4K
Replies
14
Views
1K
Replies
2
Views
2K
Replies
4
Views
1K
Replies
2
Views
1K
Replies
8
Views
1K
Replies
9
Views
3K