<iframe
src="https://yourdomain.com/wp-content/uploads/jumpgame/index.html"
width="800" height="400"
style="border: none;">
</iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The Racers</title>
<style>
body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
.hidden { display: none; }
.winner { color: green; font-weight: bold; }
input[type="text"] { width: 60%; padding: 8px; margin: 10px 0; }
button { padding: 10px 20px; font-size: 16px; margin-top: 10px; }
.toggle-btn { background-color: #eee; }
/* WPM Circle */
#wpmCircle {
position: fixed;
top: 20px;
right: 20px;
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Race Track */
#raceTrack {
margin-top: 50px;
position: relative;
width: 100%;
height: 50px;
background-color: #ddd;
border-radius: 25px;
}
.playerProgress {
height: 100%;
position: absolute;
top: 0;
border-radius: 25px;
transition: width 0.1s ease-in-out;
}
#player1Progress {
background-color: #3498db; /* Blue for player 1 */
}
#player2Progress {
background-color: #e74c3c; /* Red for player 2 */
}
</style>
</head>
<body>
<!-- Screen 1: Mode Selection -->
<div id="screen1">
<h1>🏁 Welcome to The Racers</h1>
<p>Select the game mode:</p>
<button id="offlineModeBtn" class="toggle-btn">Offline Mode</button>
<button id="onlineModeBtn" class="toggle-btn">Online Mode</button>
<br><br>
<!-- This section will hide after a mode is selected and take you to the name input -->
</div>
<!-- Screen 2: Enter Player Names -->
<div id="screen2" class="hidden">
<h1>Enter Player Names</h1>
<p>Player 1 Name:</p>
<input type="text" id="player1Name" placeholder="Player 1">
<p>Player 2 Name:</p>
<input type="text" id="player2Name" placeholder="Player 2">
<br>
<button id="continueBtn">Continue</button>
</div>
<!-- Screen 3: Start Race -->
<div id="screen3" class="hidden">
<h2>Ready to race, <span id="p1Display"></span> and <span id="p2Display"></span>?</h2>
<button id="startRaceBtn">Start Race</button>
</div>
<!-- Screen 4: Race -->
<div id="screen4" class="hidden">
<h2>🚦 The Race Is On!</h2>
<p><strong>Race Sentence:</strong></p>
<p id="raceSentence" style="font-size:18px;"></p>
<div class="player">
<label id="label1">Player 1: </label>
<input type="text" id="player1Input" oninput="checkWinner(player1Name, this)">
</div>
<div class="player">
<label id="label2">Player 2: </label>
<input type="text" id="player2Input" oninput="checkWinner(player2Name, this)">
</div>
<p id="winnerMessage"></p>
<button id="raceAgainBtn" class="hidden">Race Again</button>
<!-- Race Track -->
<div id="raceTrack">
<div id="player1Progress" class="playerProgress"></div>
<div id="player2Progress" class="playerProgress"></div>
</div>
</div>
<!-- WPM Tracker Circle -->
<div id="wpmCircle" class="hidden">0 WPM</div>
<script>
let player1Name = '';
let player2Name = '';
let sentence = '';
let raceOver = false;
let gameMode = 'offline'; // Default mode is offline
let startTime = 0;
let wordsTyped1 = 0;
let wordsTyped2 = 0;
let totalWords = 0; // To track the total words in the sentence
const sentences = [
"The quick brown fox jumps over the lazy dog.",
"Typing fast is a superpower you can train.",
"JavaScript makes the web come alive.",
"Practice makes perfect when it comes to racing.",
"Friends who type together, stay together."
];
document.addEventListener("DOMContentLoaded", () => {
const continueBtn = document.getElementById("continueBtn");
const startRaceBtn = document.getElementById("startRaceBtn");
const raceAgainBtn = document.getElementById("raceAgainBtn");
// Mode toggle buttons
const offlineModeBtn = document.getElementById("offlineModeBtn");
const onlineModeBtn = document.getElementById("onlineModeBtn");
// Mode selection
offlineModeBtn.addEventListener("click", () => {
gameMode = 'offline';
alert("You have selected Offline Mode.");
showNameInputScreen();
});
onlineModeBtn.addEventListener("click", () => {
gameMode = 'online';
alert("You have selected Online Mode.");
showNameInputScreen();
});
// Continue button to move to race screen after name input
continueBtn.addEventListener("click", () => {
const p1Input = document.getElementById('player1Name');
const p2Input = document.getElementById('player2Name');
if (p1Input.value.trim() === '' || p2Input.value.trim() === '') {
alert('Please enter both player names!');
return;
}
player1Name = p1Input.value.trim();
player2Name = p2Input.value.trim();
document.getElementById('p1Display').textContent = player1Name;
document.getElementById('p2Display').textContent = player2Name;
document.getElementById('label1').textContent = player1Name + ': ';
document.getElementById('label2').textContent = player2Name + ': ';
document.getElementById('screen2').classList.add('hidden');
document.getElementById('screen3').classList.remove('hidden');
});
startRaceBtn.addEventListener("click", () => {
startNewRace();
document.getElementById('screen3').classList.add('hidden');
document.getElementById('screen4').classList.remove('hidden');
document.getElementById('wpmCircle').classList.remove('hidden'); // Show WPM circle when race starts
});
raceAgainBtn.addEventListener("click", () => {
startNewRace();
});
});
function showNameInputScreen() {
// Hide mode selection screen and show name input screen
document.getElementById('screen1').classList.add('hidden');
document.getElementById('screen2').classList.remove('hidden');
}
function startNewRace() {
sentence = sentences[Math.floor(Math.random() * sentences.length)];
totalWords = sentence.split(' ').length; // Calculate total words
document.getElementById('raceSentence').textContent = `"${sentence}"`;
raceOver = false;
document.getElementById('player1Input').value = '';
document.getElementById('player2Input').value = '';
document.getElementById('player1Input').style.border = '';
document.getElementById('player2Input').style.border = '';
document.getElementById('winnerMessage').textContent = '';
document.getElementById('raceAgainBtn').classList.add('hidden');
// Reset progress bar
document.getElementById('player1Progress').style.width = '0%';
document.getElementById('player2Progress').style.width = '0%';
// Start the timer when the race begins
startTime = new Date().getTime();
wordsTyped1 = 0;
wordsTyped2 = 0;
updateRaceTrack();
}
function updateRaceTrack() {
const progress1 = (wordsTyped1 / totalWords) * 100;
const progress
