WhatsApp Group
Join Now
Single Page Game Website क्या होती है?
Single Page Game Website एक ऐसी वेबसाइट होती है जो सिर्फ एक ही पेज पर पूरा गेम चलाती है। इसमें अलग-अलग पेज या रूट नहीं होते। पूरा गेम, डिजाइन और फंक्शन एक HTML फाइल के अंदर ही लोड होता है।
इसका फायदा ये होता है कि वेबसाइट तेज़ लोड होती है, कम सर्वर खर्च लगता है और यूजर को स्मूद गेमिंग अनुभव मिलता है।
Single Page Game Website क्यों बनानी चाहिए?
- Fast Loading Time:
सिर्फ एक HTML पेज होने की वजह से वेबसाइट तेजी से खुलती है। - Low Maintenance:
कई पेज मैनेज करने की ज़रूरत नहीं — सबकुछ एक ही जगह। - Offline Work करने की क्षमता:
PWA (Progressive Web App) बनाकर इसे ऑफलाइन भी चलाया जा सकता है। - Ad Integration आसान:
एक पेज पर Google AdSense या Affiliate Ads लगाना आसान होता है। - Portfolio के लिए Perfect:
अगर आप एक डेवलपर हैं, तो यह आपके काम को दिखाने का बेहतरीन तरीका है।
Single Page Game Website बनाने के लिए जरूरी चीज़ें
| Tool | Purpose |
|---|---|
| HTML | Structure तैयार करने के लिए |
| CSS | Design और Layout के लिए |
| JavaScript | गेम लॉजिक और इंटरैक्शन के लिए |
| Code Editor (VS Code, Sublime) | कोड लिखने के लिए |
| Browser (Chrome/Edge) | Testing के लिए |
| Hosting (GitHub Pages, Netlify, Vercel) | Website को Publish करने के लिए |
Step-by-Step Process – Single Page Game Website Kaise Banaye
Step 1: Basic Structure तैयार करें
सबसे पहले एक HTML फाइल बनाएं — जैसे index.html
उसमें नीचे जैसा बेसिक स्ट्रक्चर रखें
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Match Game</title>
<style>
body { margin:0; text-align:center; background:#0a192f; color:white; }
h1 { font-family: 'Poppins', sans-serif; margin-top:50px; }
</style>
</head>
<body>
<h1>Color Match Game</h1>
<button onclick="startGame()">Start Game</button>
<script src="game.js"></script>
</body>
</html>
Step 2: CSS से Design करें
गेम का लुक इम्प्रेसिव बनाने के लिए CSS का इस्तेमाल करें।
जैसे Background, Buttons, Animation आदि जोड़ें।
button {
padding: 15px 30px;
font-size: 1.2rem;
border: none;
border-radius: 10px;
background: linear-gradient(45deg, #ff6f00, #ff9100);
color: white;
cursor: pointer;
transition: 0.3s;
}
button:hover {
transform: scale(1.1);
background: linear-gradient(45deg, #ff9100, #ff6f00);
}
Step 3: JavaScript से Game Logic जोड़ें
function startGame() {
alert("Game Started!");
// यहां आप अपना गेम लॉजिक डाल सकते हैं
// जैसे कलर मैच, पॉइंट सिस्टम, टाइमर आदि
}
Step 4: Responsive Design बनाएं
CSS में @media queries का उपयोग करें ताकि गेम मोबाइल और टैबलेट पर भी सही दिखे।
@media (max-width: 600px) {
h1 { font-size: 1.5rem; }
button { padding: 10px 20px; font-size: 1rem; }
}
Step 5: Game को Test और Optimize करें
अपने गेम को Chrome या Firefox में चलाकर टेस्ट करें।
अगर वेबसाइट धीमी लग रही है तो:
- Image को Compress करें
- JavaScript को Minify करें
- CDN (जैसे jsDelivr या Cloudflare) का इस्तेमाल करें।
Step 6: Hosting और Domain जोड़ें
अब अपने गेम को ऑनलाइन लाने के लिए Hosting करें —
Free Options:
- GitHub Pages
- Netlify
- Vercel
अगर आप Professional Look चाहते हैं तो Domain खरीदें जैसे:colormatchgame.in या funzoneplay.com
Bonus Tips for SEO Optimization
- Main Keyword: “Single Page Game Website Kaise Banaye”
- Long-tail Keywords:
- “Single page HTML game tutorial”
- “JavaScript game website in Hindi”
- “One page gaming site for beginners”
- Image Alt Tags जोड़ें:
- Example:
<img src="game.jpg" alt="Single Page Game Website Example">
- Example:
- Meta Tags और Schema का उपयोग करें:
<meta name="description" content="Learn how to create a single page game website using HTML, CSS, and JavaScript in Hindi. Step-by-step guide for beginners.">
Free Game Script Code
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>कलर मैच - प्रोफेशनल गेम</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #4361ee;
--secondary: #3a0ca3;
--accent: #7209b7;
--success: #4cc9f0;
--danger: #f72585;
--light: #f8f9fa;
--dark: #212529;
--card-bg: rgba(255, 255, 255, 0.1);
--card-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
color: var(--light);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
position: relative;
overflow-x: hidden;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" opacity="0.05"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
pointer-events: none;
z-index: -1;
}
.container {
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
width: 100%;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 10px;
}
.logo i {
font-size: 2.5rem;
color: var(--success);
filter: drop-shadow(0 0 10px rgba(76, 201, 240, 0.5));
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
background: linear-gradient(to right, var(--light), var(--success));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
.tagline {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.game-content {
display: flex;
flex-wrap: wrap;
gap: 30px;
width: 100%;
justify-content: center;
margin-bottom: 30px;
}
.game-panel {
flex: 1;
min-width: 300px;
max-width: 500px;
background: var(--card-bg);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
box-shadow: var(--card-shadow);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.game-info {
display: flex;
justify-content: space-between;
margin-bottom: 25px;
background: rgba(0, 0, 0, 0.2);
padding: 20px;
border-radius: 15px;
}
.info-box {
text-align: center;
flex: 1;
}
.info-label {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.info-value {
font-size: 1.8rem;
font-weight: bold;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.game-area {
display: flex;
flex-direction: column;
align-items: center;
}
.target-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 25px;
}
.target-label {
font-size: 1.1rem;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.target-color {
width: 180px;
height: 180px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
border: 4px solid white;
transition: var(--transition);
}
.target-color:hover {
transform: scale(1.03);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.color-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 25px;
width: 100%;
}
.color-option {
aspect-ratio: 1;
border-radius: 12px;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border: 3px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.color-option::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: var(--transition);
}
.color-option:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.7);
}
.color-option:hover::before {
opacity: 1;
}
.controls {
display: flex;
gap: 15px;
margin-bottom: 20px;
width: 100%;
justify-content: center;
}
button {
padding: 14px 28px;
border: none;
border-radius: 50px;
color: white;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1;
max-width: 200px;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
button:active {
transform: translateY(0);
}
#startBtn {
background: linear-gradient(to right, var(--success), #4895ef);
}
#startBtn:hover {
background: linear-gradient(to right, #4895ef, var(--success));
}
#resetBtn {
background: linear-gradient(to right, var(--danger), #b5179e);
}
#resetBtn:hover {
background: linear-gradient(to right, #b5179e, var(--danger));
}
.message {
font-size: 1.2rem;
height: 40px;
margin-bottom: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 8px 15px;
border-radius: 50px;
width: 100%;
max-width: 400px;
transition: var(--transition);
}
.instructions-panel {
flex: 1;
min-width: 300px;
max-width: 500px;
background: var(--card-bg);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
box-shadow: var(--card-shadow);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.instructions h2 {
margin-bottom: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--success);
}
.instructions ul {
list-style-type: none;
}
.instructions li {
margin-bottom: 15px;
padding-left: 30px;
position: relative;
line-height: 1.5;
}
.instructions li::before {
content: '•';
color: var(--success);
font-size: 1.5rem;
position: absolute;
left: 0;
top: -3px;
}
.footer {
margin-top: 20px;
text-align: center;
font-size: 0.9rem;
opacity: 0.7;
width: 100%;
padding: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pulse {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@media (max-width: 900px) {
.game-content {
flex-direction: column;
align-items: center;
}
.game-panel, .instructions-panel {
max-width: 100%;
}
}
@media (max-width: 600px) {
h1 {
font-size: 2.2rem;
}
.game-info {
flex-direction: column;
gap: 15px;
}
.color-options {
grid-template-columns: repeat(2, 1fr);
}
.controls {
flex-direction: column;
align-items: center;
}
button {
max-width: 100%;
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<i class="fas fa-palette"></i>
<h1>कलर मैच प्रो</h1>
</div>
<p class="tagline">अपनी रंग पहचान कौशल का परीक्षण करें और उच्चतम स्कोर प्राप्त करें!</p>
</header>
<div class="game-content">
<div class="game-panel">
<div class="game-info">
<div class="info-box">
<div class="info-label"><i class="fas fa-star"></i> स्कोर</div>
<div id="score" class="info-value">0</div>
</div>
<div class="info-box">
<div class="info-label"><i class="fas fa-clock"></i> समय</div>
<div id="timer" class="info-value">60</div>
</div>
<div class="info-box">
<div class="info-label"><i class="fas fa-trophy"></i> उच्चतम स्कोर</div>
<div id="highScore" class="info-value">0</div>
</div>
</div>
<div class="game-area">
<div class="target-container">
<div class="target-label"><i class="fas fa-bullseye"></i> लक्ष्य रंग</div>
<div class="target-color" id="targetColor"></div>
</div>
<div class="message" id="message"></div>
<div class="color-options" id="colorOptions">
<!-- Color options will be generated by JavaScript -->
</div>
<div class="controls">
<button id="startBtn"><i class="fas fa-play"></i> गेम शुरू करें</button>
<button id="resetBtn"><i class="fas fa-redo"></i> रीसेट करें</button>
</div>
</div>
</div>
<div class="instructions-panel">
<div class="instructions">
<h2><i class="fas fa-info-circle"></i> गेम के नियम</h2>
<ul>
<li>गेम शुरू करने के लिए "गेम शुरू करें" बटन पर क्लिक करें</li>
<li>लक्ष्य रंग के समान रंग वाले वर्ग पर क्लिक करें</li>
<li>सही चयन करने पर आपको 10 अंक मिलेंगे</li>
<li>गलत चयन करने पर 5 अंक काटे जाएंगे</li>
<li>आपके पास 60 सेकंड का समय है</li>
<li>अपने उच्चतम स्कोर को हराने का प्रयास करें!</li>
<li>रंगों के बीच छोटे अंतरों पर ध्यान दें</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<p>कलर मैच प्रो © 2025 | एक मनोरंजक रंग पहचान गेम</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Game elements
const targetColorElement = document.getElementById('targetColor');
const colorOptionsElement = document.getElementById('colorOptions');
const scoreElement = document.getElementById('score');
const timerElement = document.getElementById('timer');
const highScoreElement = document.getElementById('highScore');
const messageElement = document.getElementById('message');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
// Game variables
let score = 0;
let timeLeft = 60;
let highScore = localStorage.getItem('colorMatchHighScore') || 0;
let gameActive = false;
let timer;
let targetColor;
// Initialize high score display
highScoreElement.textContent = highScore;
// Generate a random hex color
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Generate color options
function generateColorOptions() {
colorOptionsElement.innerHTML = '';
// Create the correct color option
targetColor = getRandomColor();
targetColorElement.style.backgroundColor = targetColor;
// Create an array of colors including the target color
const colors = [targetColor];
// Add 5 more random colors
for (let i = 0; i < 5; i++) {
colors.push(getRandomColor());
}
// Shuffle the colors array
shuffleArray(colors);
// Create color option elements
colors.forEach(color => {
const colorOption = document.createElement('div');
colorOption.className = 'color-option';
colorOption.style.backgroundColor = color;
colorOption.dataset.color = color;
colorOption.addEventListener('click', () => {
if (!gameActive) return;
if (color === targetColor) {
// Correct choice
score += 10;
messageElement.textContent = 'सही! +10 अंक';
messageElement.style.background = 'linear-gradient(to right, rgba(76, 201, 240, 0.2), rgba(76, 201, 240, 0.4))';
messageElement.style.color = '#4cc9f0';
messageElement.classList.add('pulse');
setTimeout(() => {
messageElement.classList.remove('pulse');
}, 1000);
} else {
// Wrong choice
score = Math.max(0, score - 5);
messageElement.textContent = 'गलत! -5 अंक';
messageElement.style.background = 'linear-gradient(to right, rgba(247, 37, 133, 0.2), rgba(247, 37, 133, 0.4))';
messageElement.style.color = '#f72585';
messageElement.classList.add('shake');
setTimeout(() => {
messageElement.classList.remove('shake');
}, 500);
}
scoreElement.textContent = score;
generateColorOptions();
});
colorOptionsElement.appendChild(colorOption);
});
}
// Fisher-Yates shuffle algorithm
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Start the game
function startGame() {
if (gameActive) return;
gameActive = true;
score = 0;
timeLeft = 60;
scoreElement.textContent = score;
timerElement.textContent = timeLeft;
messageElement.textContent = '';
messageElement.style.background = 'transparent';
generateColorOptions();
timer = setInterval(() => {
timeLeft--;
timerElement.textContent = timeLeft;
if (timeLeft <= 10) {
timerElement.style.color = '#f72585';
timerElement.classList.add('pulse');
}
if (timeLeft <= 0) {
endGame();
}
}, 1000);
startBtn.disabled = true;
startBtn.innerHTML = '<i class="fas fa-play"></i> गेम चल रहा है...';
startBtn.style.opacity = '0.7';
}
// End the game
function endGame() {
gameActive = false;
clearInterval(timer);
if (score > highScore) {
highScore = score;
highScoreElement.textContent = highScore;
localStorage.setItem('colorMatchHighScore', highScore);
messageElement.textContent = `बधाई! नया उच्चतम स्कोर: ${highScore}!`;
messageElement.style.background = 'linear-gradient(to right, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.4))';
messageElement.style.color = '#ffd700';
messageElement.classList.add('pulse');
} else {
messageElement.textContent = `गेम समाप्त! आपका स्कोर: ${score}`;
messageElement.style.background = 'linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2))';
messageElement.style.color = '#ffffff';
}
startBtn.disabled = false;
startBtn.innerHTML = '<i class="fas fa-play"></i> फिर से खेलें';
startBtn.style.opacity = '1';
timerElement.style.color = '#ffffff';
timerElement.classList.remove('pulse');
}
// Reset the game
function resetGame() {
clearInterval(timer);
gameActive = false;
score = 0;
timeLeft = 60;
scoreElement.textContent = score;
timerElement.textContent = timeLeft;
timerElement.style.color = '#ffffff';
timerElement.classList.remove('pulse');
messageElement.textContent = '';
messageElement.style.background = 'transparent';
startBtn.disabled = false;
startBtn.innerHTML = '<i class="fas fa-play"></i> गेम शुरू करें';
startBtn.style.opacity = '1';
// Reset target color to a neutral color
targetColorElement.style.backgroundColor = '#6a11cb';
// Clear color options
colorOptionsElement.innerHTML = '';
}
// Event listeners
startBtn.addEventListener('click', startGame);
resetBtn.addEventListener('click', resetGame);
// Initialize with a neutral color
targetColorElement.style.backgroundColor = '#6a11cb';
});
</script>
</body>
</html>Conclusion
अगर आप वेबसाइट डेवलपमेंट में नए हैं, तो Single Page Game Website बनाना एक शानदार शुरुआत है। इससे न केवल आपकी कोडिंग स्किल बढ़ेगी, बल्कि आप इसे Portfolio Project या Passive Income Source के रूप में भी उपयोग कर सकते हैं।
बस शुरुआत करें — एक सिंपल गेम बनाएं और धीरे-धीरे उसे एडवांस करें।
