<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fun Truth or Dare Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Welcome to Fun Truth or Dare!</h1>
<p>Enter the number of players:</p>
<input type="number" id="numPlayers" min="1" max="10">
<button class="btn start-btn" onclick="startGame()">Start Game</button>
</div>
<div id="gameArea" class="container" style="display: none;">
<h2 id="playerTurn"></h2>
<p>Choose Truth or Dare:</p>
<button class="btn truth-btn" onclick="chooseTruth()">Truth</button>
<button class="btn dare-btn" onclick="chooseDare()">Dare</button>
<p id="output"></p>
<button class="btn next-btn" onclick="nextTurn()">Next Player</button>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
background-color: #ffd700; /* Golden yellow background */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #ffffff; /* White background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 320px;
}
h1 {
color: #ff1493; /* Deep pink */
margin-bottom: 20px;
}
.btn {
margin: 10px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.start-btn {
background-color: #4CAF50; /* Green */
color: white;
}
.start-btn:hover {
background-color: #45a049; /* Darker green on hover */
}
.truth-btn {
background-color: #ff6347; /* Tomato red */
color: white;
}
.truth-btn:hover {
background-color: #e74c3c; /* Darker red on hover */
}
.dare-btn {
background-color: #4169e1; /* Royal blue */
color: white;
}
.dare-btn:hover {
background-color: #34495e; /* Darker blue on hover */
}
.next-btn {
background-color: #ffa500; /* Orange */
color: white;
}
.next-btn:hover {
background-color: #e67e22; /* Darker orange on hover */
}
#output {
font-size: 20px;
margin-top: 20px;
color: #333;
}
let players = [];
let currentPlayerIndex = 0;
function startGame() {
const numPlayers = document.getElementById('numPlayers').value;
if (numPlayers < 1 || numPlayers > 10) {
alert('Please enter a number between 1 and 10.');
return;
}
players = [];
for (let i = 1; i <= numPlayers; i++) {
const playerName = prompt(`Enter name for player ${i}:`);
if (playerName) {
players.push(playerName);
} else {
alert('Please enter a name for each player.');
return;
}
}
document.getElementById('gameArea').style.display = 'block';
showCurrentPlayer();
}
function showCurrentPlayer() {
document.getElementById('playerTurn').innerText = `${players[currentPlayerIndex]}'s turn`;
}
function chooseTruth() {
const truths = [
"What is the most embarrassing thing that has happened to you in public?",
"If you could switch lives with someone for a day, who would it be and why?",
"What is your biggest fear?",
"Have you ever cheated on a test?",
"What is the craziest thing you've done while drunk?",
"If you had to delete all but three apps from your smartphone, which ones would you keep?",
"What is the weirdest dream you've ever had?",
"What is your most irrational fear?",
"What is something you've done to try to be 'cool' that makes you cringe now?",
"What is the worst haircut you've ever had?",
"What is the most childish thing you still do?",
"What is the most embarrassing nickname you've ever had?",
"What is your guilty pleasure movie?",
"Have you ever been caught picking your nose?",
"What is the most illegal thing you've ever done?",
"If you could be invisible for a day, what would you do?",
"What is your most awkward moment from middle school?",
"Have you ever pretended to like a gift? What was it and who gave it to you?",
"What is the dumbest way you've been injured?",
"What is the most embarrassing thing your parents have caught you doing?",
"If you could know one truth about yourself, history, or the universe, what would it be?",
// Additional truths can be added here
];
const randomTruth = truths[Math.floor(Math.random() * truths.length)];
document.getElementById('output').innerText = randomTruth;
}
function chooseDare() {
const dares = [
"Do your best impression of someone in the room.",
"Sing 'Twinkle, Twinkle, Little Star' as if you were performing in an opera.",
"Do 20 jumping jacks.",
"Eat a spoonful of mustard (if available).",
"Text someone and tell them you just drank a full glass of raw egg whites.",
"Do your best impression of a baby being born.",
"Act like a monkey until your next turn.",
"Sing everything you say for the next 10 minutes.",
"Let the person to your right draw a silly face on your face with washable marker.",
"Call a random number and sing 'Happy Birthday' to whoever picks up.",
"Let the group choose an embarrassing photo of you to post on social media.",
"Speak in an accent for the next 3 rounds.",
"Wear your clothes backward for the next hour.",
"Do your best breakdance move right now.",
"Stand in the corner for the next two rounds like you've been put in 'time out'.",
"Put an ice cube down your shirt and let it melt.",
"Do an impression of your favorite celebrity.",
"Sing a song in a language you don't speak.",
"Let the group wrap you in toilet paper like a mummy.",
"Do your best impression of a news anchor delivering breaking news about the death of a fly.",
// Additional dares can be added here
];
const randomDare = dares[Math.floor(Math.random() * dares.length)];
document.getElementById('output').innerText = randomDare;
}
function nextTurn() {
currentPlayerIndex = (currentPlayerIndex + 1) % players.length;
showCurrentPlayer();
document.getElementById('output').innerText = '';
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.