CMB: Anomaly Protocol | بازی هیجانی تابش زمینه کیهانی
by RapidKnight54374 lines12.4 KB
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>CMB: Anomaly Protocol | بازی هیجانی تابش زمینه کیهانی</title>
<style>
* {
user-select: none;
touch-action: manipulation;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
background: radial-gradient(circle at center, #03030f 0%, #000000 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Courier New', 'Orbitron', monospace;
overflow-x: hidden;
overflow-y: auto;
}
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
.game-container {
position: relative;
width: 100%;
max-width: 550px;
margin: 15px;
padding: 0;
}
canvas {
width: 100% !important;
height: auto !important;
background: #01000c;
border-radius: 32px;
box-shadow: 0 0 40px rgba(255, 0, 100, 0.3), 0 0 20px rgba(0, 255, 255, 0.2);
cursor: crosshair;
display: block;
border: 1px solid rgba(0, 255, 255, 0.6);
}
.hud {
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12px);
border-radius: 60px;
padding: 12px 15px;
display: flex;
justify-content: space-between;
margin-bottom: 15px;
border: 1px solid #ff0077;
box-shadow: 0 0 12px #ff0077;
gap: 8px;
flex-wrap: wrap;
}
.hud-item {
text-align: center;
flex: 1;
min-width: 70px;
}
.hud-label {
font-size: 0.65rem;
color: #ff66aa;
letter-spacing: 1px;
}
.hud-value {
font-size: 1.3rem;
font-weight: bold;
color: #ffcc44;
text-shadow: 0 0 5px #ff5500;
}
.alert-bar {
width: 100%;
height: 8px;
background: #222;
border-radius: 10px;
margin: 10px 0;
overflow: hidden;
}
.alert-fill {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #00ffcc, #ff0066);
border-radius: 10px;
transition: width 0.2s ease;
}
button {
background: linear-gradient(45deg, #ff0066, #9900ff);
border: none;
padding: 12px;
width: 100%;
font-family: 'Orbitron', monospace;
font-weight: bold;
color: white;
border-radius: 40px;
margin-top: 18px;
font-size: 1rem;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 0 15px #ff0066;
}
button:active {
transform: scale(0.96);
}
.message-panel {
background: #000000aa;
text-align: center;
padding: 10px;
margin-top: 12px;
border-radius: 20px;
font-size: 0.75rem;
color: #ffaa99;
border-left: 4px solid #ff0066;
}
.heartbeat {
animation: pulseRed 0.8s infinite;
}
@keyframes pulseRed {
0% { text-shadow: 0 0 0 red; }
100% { text-shadow: 0 0 12px #ff3300; }
}
</style>
</head>
<body>
<div class="game-container">
<div class="hud">
<div class="hud-item"><div class="hud-label">⚡ آنومالیها</div><div class="hud-value" id="anomalyCount">0</div></div>
<div class="hud-item"><div class="hud-label">💀 خطر فروپاشی</div><div class="hud-value" id="dangerLevel">0%</div></div>
<div class="hud-item"><div class="hud-label">🎯 امتیاز</div><div class="hud-value" id="scoreInt">0</div></div>
</div>
<div class="alert-bar"><div class="alert-fill" id="alertFill"></div></div>
<canvas id="cmbCanvas" width="500" height="500"></canvas>
<button id="restartMission">🔄 راهاندازی مجدد مأموریت</button>
<div class="message-panel" id="missionMsg">🌌 سیستم فعال. ناهمسانیهای CMB را خنثی کن...</div>
</div>
<script>
const canvas = document.getElementById('cmbCanvas');
const ctx = canvas.getContext('2d');
// تابع برای تنظیم سایز مناسب گوشی
function resizeCanvas() {
const container = document.querySelector('.game-container');
const maxWidth = Math.min(window.innerWidth - 40, 550);
const size = maxWidth;
canvas.style.width = size + 'px';
canvas.style.height = size + 'px';
canvas.width = size;
canvas.height = size;
return size;
}
let width = 500;
let height = 500;
// تنظیم اولیه
resizeCanvas();
window.addEventListener('resize', () => {
const newSize = resizeCanvas();
width = newSize;
height = newSize;
// بازسازی بازی با سایز جدید
if (gameActive !== undefined) {
resetCanvasAndGame();
}
});
let anomalies = [];
let score = 0;
let danger = 0;
let gameActive = true;
let spawnInterval, dangerInterval;
const anomalyCountSpan = document.getElementById('anomalyCount');
const dangerLevelSpan = document.getElementById('dangerLevel');
const scoreSpan = document.getElementById('scoreInt');
const alertFillDiv = document.getElementById('alertFill');
const missionMsgDiv = document.getElementById('missionMsg');
function updateUI() {
anomalyCountSpan.innerText = anomalies.length;
dangerLevelSpan.innerText = Math.floor(danger) + '%';
alertFillDiv.style.width = Math.min(100, danger) + '%';
scoreSpan.innerText = score;
if (danger >= 90) {
missionMsgDiv.innerHTML = "💀💀 هشدار! ساختار فضا-زمان در حال فروپاشی! سریعتر بزن! 💀💀";
missionMsgDiv.style.color = "#ff0000";
missionMsgDiv.classList.add('heartbeat');
} else if (danger >= 60) {
missionMsgDiv.innerHTML = "⚠️ نوسانات بحرانی CMB! جهان در خطر است...";
missionMsgDiv.style.color = "#ff8866";
missionMsgDiv.classList.remove('heartbeat');
} else {
missionMsgDiv.innerHTML = "🔭 آنومالیها را خنثی کن. هر تاخیر = افزایش خطر.";
missionMsgDiv.style.color = "#88ffaa";
missionMsgDiv.classList.remove('heartbeat');
}
}
function spawnAnomaly() {
if (!gameActive) return;
if (anomalies.length > 18) return;
const type = Math.random() > 0.5 ? 'hot' : 'cold';
const radius = 28;
const x = radius + Math.random() * (width - radius * 2);
const y = radius + Math.random() * (height - radius * 2);
anomalies.push({ x, y, radius, type });
danger = Math.min(100, danger + 7.5);
updateUI();
if (danger >= 100 && gameActive) {
gameActive = false;
missionMsgDiv.innerHTML = "💥 GAME OVER 💥 جهان فروپاشید.";
missionMsgDiv.style.color = "red";
clearIntervals();
}
}
function drawBackgroundNoise() {
const imgData = ctx.getImageData(0, 0, width, height);
for (let i = 0; i < imgData.data.length; i += 4) {
let val = 40 + Math.random() * 70;
imgData.data[i] = val + (Math.sin(Date.now() * 0.003) * 10);
imgData.data[i+1] = val * 0.6;
imgData.data[i+2] = val + 30;
}
ctx.putImageData(imgData, 0, 0);
}
function drawAnomalies() {
for (let a of anomalies) {
const pulse = 0.8 + Math.sin(Date.now() * 0.01) * 0.2;
const grad = ctx.createRadialGradient(a.x - 5, a.y - 5, 5, a.x, a.y, a.radius * pulse);
if (a.type === 'hot') {
grad.addColorStop(0, '#ff3366');
grad.addColorStop(1, '#aa0000');
} else {
grad.addColorStop(0, '#33ccff');
grad.addColorStop(1, '#0044aa');
}
ctx.beginPath();
ctx.arc(a.x, a.y, a.radius * pulse, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
ctx.shadowBlur = 12;
ctx.shadowColor = a.type === 'hot' ? '#ff0066' : '#00ccff';
ctx.beginPath();
ctx.arc(a.x, a.y, a.radius * 0.5, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.shadowBlur = 0;
ctx.font = "bold 18px monospace";
ctx.fillStyle = 'black';
ctx.fillText(a.type === 'hot' ? '⚠️' : '❄️', a.x-10, a.y+7);
}
}
function handleClick(e) {
if (!gameActive) return;
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const scaleX = width / rect.width;
const scaleY = height / rect.height;
let clientX, clientY;
if (e.touches) {
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
} else {
clientX = e.clientX;
clientY = e.clientY;
}
const canvasX = (clientX - rect.left) * scaleX;
const canvasY = (clientY - rect.top) * scaleY;
let hit = false;
for (let i=0; i<anomalies.length; i++) {
const a = anomalies[i];
if (Math.hypot(canvasX - a.x, canvasY - a.y) < a.radius) {
anomalies.splice(i,1);
score += 10;
danger = Math.max(0, danger - 5);
updateUI();
hit = true;
if (navigator.vibrate) navigator.vibrate(40);
break;
}
}
if (!hit && gameActive) {
danger = Math.min(100, danger + 4);
updateUI();
missionMsgDiv.innerHTML = "⚠️ خطای هدفگیری! خطر افزایش یافت.";
}
if (danger >= 100 && gameActive) {
gameActive = false;
missionMsgDiv.innerHTML = "💀 GAME OVER: ناهمسانیها فضا-زمان را منهدم کردند.";
clearIntervals();
}
}
function clearIntervals() {
if (spawnInterval) clearInterval(spawnInterval);
if (dangerInterval) clearInterval(dangerInterval);
}
function resetCanvasAndGame() {
clearIntervals();
anomalies = [];
score = 0;
danger = 15;
gameActive = true;
updateUI();
missionMsgDiv.innerHTML = "🚀 مأموریت شروع شد. ناهمسانیهای CMB را نابود کن!";
missionMsgDiv.style.color = "#88ffaa";
missionMsgDiv.classList.remove('heartbeat');
spawnInterval = setInterval(() => {
if (gameActive) spawnAnomaly();
}, 950);
dangerInterval = setInterval(() => {
if (gameActive && anomalies.length > 0) {
danger = Math.min(100, danger + 2.5);
updateUI();
if (danger >= 100) {
gameActive = false;
missionMsgDiv.innerHTML = "💀 FAILURE: CMB فروپاشی کرد.";
clearIntervals();
}
}
}, 3000);
}
function render() {
if (!ctx) return;
drawBackgroundNoise();
drawAnomalies();
if (!gameActive) {
ctx.font = "bold 22px Orbitron";
ctx.fillStyle = "#ff0000";
ctx.shadowBlur = 0;
ctx.fillText("GAME OVER", width/2-70, height/2);
}
requestAnimationFrame(render);
}
canvas.addEventListener('click', handleClick);
canvas.addEventListener('touchstart', handleClick, { passive: false });
document.getElementById('restartMission').addEventListener('click', () => {
resetCanvasAndGame();
});
// شروع بازی
resetCanvasAndGame();
render();
</script>
</body>
</html>Game Source: CMB: Anomaly Protocol | بازی هیجانی تابش زمینه کیهانی
Creator: RapidKnight54
Libraries: none
Complexity: complex (374 lines, 12.4 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: cmb-anomaly-protocol-rapidknight54" to link back to the original. Then publish at arcadelab.ai/publish.