<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cricket Prediction Game</title>
<style>
body {
background-color: #f9fbe7; /* Light pastel background */
font-family: Arial, sans-serif;
color: #333;
text-align: center;
padding: 20px;
transition: background-color 0.5s ease;
}
h1 {
font-size: 3em;
color: #1976d2;
margin-bottom: 20px;
}
.team {
font-size: 1.5em;
margin-top: 20px;
font-weight: bold;
}
.team-name {
color: #0288d1;
text-decoration: underline;
}
.player {
font-style: italic;
color: #1976d2;
}
.btn {
padding: 15px 30px;
font-size: 1.3em;
margin: 10px;
border: none;
background-color: #0288d1;
color: white;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s, background-color 0.2s ease;
}
.btn:hover {
background-color: #01579b;
}
.btn:active {
transform: scale(0.95);
}
.error {
color: red;
font-size: 1.2em;
margin-top: 20px;
}
#result {
font-size: 1.5em;
margin-top: 20px;
font-weight: bold;
}
#celebration {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.balloon {
position: absolute;
animation: floatBalloon 5s infinite;
top: 100%;
left: 50%;
width: 50px;
height: 70px;
background-color: #ff6347;
border-radius: 50%;
}
@keyframes floatBalloon {
0% { top: 100%; opacity: 1; }
50% { top: 30%; opacity: 1; }
100% { top: -10%; opacity: 0; }
}
.ribbon {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 5px;
background-color: #ff69b4;
transform: rotate(45deg);
animation: ribbonAnim 2s ease-in-out infinite;
}
@keyframes ribbonAnim {
0% { left: -50%; opacity: 0; }
50% { left: 50%; opacity: 1; }
100% { left: 150%; opacity: 0; }
}
.next-ball-btn {
margin-top: 20px;
background-color: #81c784;
}
</style>
</head>
<body>
<h1>Cricket Prediction Game</h1>
<!-- Display randomly generated teams -->
<p class="team" id="team1"></p>
<p class="team" id="team2"></p>
<!-- Display selected batters and bowler -->
<p id="batters"></p>
<p id="bowler"></p>
<!-- Buttons for predicting events -->
<p>Predict the outcome of the ball!</p>
<button class="btn" onclick="predictOutcome('Single')">Single</button>
<button class="btn" onclick="predictOutcome('Double')">Double</button>
<button class="btn" onclick="predictOutcome('Triple')">Triple</button>
<!-- Wicket prediction buttons -->
<p>Predict the wicket type!</p>
<button class="btn" onclick="predictOutcome('Bowled')">Bowled</button>
<button class="btn" onclick="predictOutcome('Caught')">Caught</button>
<button class="btn" onclick="predictOutcome('LBW')">LBW</button>
<button class="btn" onclick="predictOutcome('Run Out')">Run Out</button>
<!-- Display result -->
<p id="result"></p>
<!-- Next Ball Button -->
<button class="btn next-ball-btn" onclick="nextBall()">Next Ball</button>
<!-- Celebration (balloons and ribbons) -->
<div id="celebration">
<div class="balloon" style="animation-delay: 0s;"></div>
<div class="balloon" style="animation-delay: 1s;"></div>
<div class="balloon" style="animation-delay: 2s;"></div>
<div class="ribbon" style="animation-delay: 0.5s;"></div>
<div class="ribbon" style="animation-delay: 1s;"></div>
</div>
<script>
// List of cricket teams and players including Nepal
const teams = [
{ name: "India", players: ["Virat Kohli", "Rohit Sharma", "KL Rahul",
"Jasprit Bumrah", "Rishabh Pant"] },
{ name: "Australia", players: ["Steve Smith", "David Warner", "Pat
Cummins", "Glenn Maxwell", "Mitchell Starc"] },
{ name: "England", players: ["Joe Root", "Ben Stokes", "Jofra Archer",
"Eoin Morgan", "Jonny Bairstow"] },
{ name: "Pakistan", players: ["Babar Azam", "Shaheen Afridi", "Fakhar
Zaman", "Mohammad Rizwan", "Shadab Khan"] },
{ name: "Nepal", players: ["Paras Khadka", "Sandeep Lamichhane", "Aarif
Sheikh", "Gyanendra Malla", "Sharneesh Karki"] } // Nepal added here
];
// Store the current match status
let currentMatch = null;
let predicted = false; // Flag to check if user has predicted the current ball
// Function to randomly generate teams and players
function generateTeams() {
const team1 = teams[Math.floor(Math.random() * teams.length)];
let team2 = teams[Math.floor(Math.random() * teams.length)];
while (team1 === team2) { // Ensure teams are not the same
team2 = teams[Math.floor(Math.random() * teams.length)];
}
// Randomly select 2 batters from team1 and 1 bowler from team2
const batter1 = team1.players[Math.floor(Math.random() *
team1.players.length)];
const batter2 = team1.players[Math.floor(Math.random() *
team1.players.length)];
const bowler = team2.players[Math.floor(Math.random() *
team2.players.length)];
document.getElementById('team1').innerHTML = `<span class="team-name">$
{team1.name}</span>`;
document.getElementById('team2').innerHTML = `<span class="team-name">$
{team2.name}</span>`;
document.getElementById('batters').innerHTML = `Batters: <span
class="player">${batter1}</span>, <span class="player">${batter2}</span>`;
document.getElementById('bowler').innerHTML = `Bowler: <span
class="player">${bowler}</span>`;
return { batter1, batter2, bowler, team1, team2 };
}
// Possible outcomes
const outcomes = {
'Single': ['1 run', 'Single overthrows'],
'Double': ['2 runs'],
'Triple': ['3 runs'],
'Bowled': ['Bowled Out'],
'Caught': ['Caught Out'],
'LBW': ['LBW Out'],
'Run Out': ['Run Out']
};
// Store generated data for reference
currentMatch = generateTeams();
// Predict outcome and display result
function predictOutcome(event) {
if (predicted) {
alert("You have already predicted the current ball.");
return;
}
if (!outcomes[event]) {
document.getElementById('error').innerText = 'Invalid input. Please
select a cricket event.';
return;
}
const result = outcomes[event][Math.floor(Math.random() *
outcomes[event].length)];
// Display the result immediately on the screen
document.getElementById('result').innerText = `Predicted outcome: $
{result}`;
// Trigger celebration or show incorrect message
checkGuess(result, event);
predicted = true; // Mark the ball as predicted
}
// Check if the result matches and trigger celebration
function checkGuess(result, event) {
if (result.toLowerCase().includes(event.toLowerCase())) {
triggerCelebration();
document.getElementById('result').innerText += " - Congratulations,
Correct Prediction!";
} else {
document.getElementById('result').innerText += " - Incorrect
Prediction. Try Again!";
}
}
// Trigger celebration animation for correct guess
function triggerCelebration() {
document.getElementById('celebration').style.display = 'block';
setTimeout(() => {
document.getElementById('celebration').style.display = 'none';
}, 5000); // Hide celebration after 5 seconds
}
// Handle next ball prediction
function nextBall() {
if (!predicted) {
document.getElementById('error').innerText = 'Please predict the
current ball before moving to the next one.';
return;
}
// Reset for next ball
predicted = false;
currentMatch = generateTeams();
document.getElementById('result').innerText = '';
document.getElementById('error').innerText = '';
}
</script>
</body>
</html>
