|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Centre de Contrôle Robotique - Mode Jeu</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #3B82F6; |
|
|
--secondary: #10B981; |
|
|
--accent: #F59E0B; |
|
|
--dark: #1F2937; |
|
|
--darker: #111827; |
|
|
--light: #F3F4F6; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: var(--darker); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.tech-font { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
|
|
|
.control-panel { |
|
|
background: linear-gradient(135deg, #1E3A8A 0%, #111827 100%); |
|
|
border: 1px solid rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.robot-active { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } |
|
|
} |
|
|
|
|
|
.game-screen { |
|
|
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), |
|
|
url('https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2078&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.joystick { |
|
|
background: radial-gradient(circle at center, #3B82F6 0%, #1D4ED8 100%); |
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
|
|
|
.binary-bg { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-image: |
|
|
linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.robot-eye { |
|
|
animation: eyeBlink 5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes eyeBlink { |
|
|
0%, 45%, 55%, 100% { transform: scaleY(1); } |
|
|
50% { transform: scaleY(0.1); } |
|
|
} |
|
|
|
|
|
.game-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(10, 1fr); |
|
|
grid-template-rows: repeat(10, 1fr); |
|
|
gap: 2px; |
|
|
} |
|
|
|
|
|
.game-cell { |
|
|
background-color: rgba(31, 41, 55, 0.7); |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.game-cell.active { |
|
|
background-color: #3B82F6; |
|
|
} |
|
|
|
|
|
.game-cell.robot { |
|
|
background-color: #10B981; |
|
|
} |
|
|
|
|
|
.game-cell.target { |
|
|
background-color: #F59E0B; |
|
|
} |
|
|
|
|
|
.game-cell.obstacle { |
|
|
background-color: #EF4444; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="binary-bg"></div> |
|
|
|
|
|
|
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-gray-900 py-4 px-6 border-b border-gray-800 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-white"></i> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold tech-font">CENTRE DE CONTRÔLE <span class="text-blue-400">ROBOTIQUE</span></h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="px-4 py-2 rounded-full bg-green-600 text-white flex items-center"> |
|
|
<span class="relative flex h-2 w-2 mr-2"> |
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> |
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span> |
|
|
</span> |
|
|
<span id="system-status">SYSTÈME ACTIF</span> |
|
|
</div> |
|
|
<button id="fullscreen-btn" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 text-white"> |
|
|
<i class="fas fa-expand"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-6 p-6"> |
|
|
|
|
|
<div class="control-panel rounded-xl p-6 col-span-1"> |
|
|
<h2 class="text-2xl font-bold mb-6 tech-font flex items-center"> |
|
|
<i class="fas fa-gamepad mr-3 text-blue-400"></i> |
|
|
<span>CONTROLE <span class="text-blue-400">ROBOT</span></span> |
|
|
</h2> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-robot mr-2 text-blue-400"></i> |
|
|
Sélection Robot |
|
|
</h3> |
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
<button class="robot-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-robot="1"> |
|
|
<i class="fas fa-robot text-2xl mb-1 text-blue-400"></i> |
|
|
<span class="text-xs">RT-001</span> |
|
|
</button> |
|
|
<button class="robot-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-robot="2"> |
|
|
<i class="fas fa-robot text-2xl mb-1 text-green-400"></i> |
|
|
<span class="text-xs">RT-002</span> |
|
|
</button> |
|
|
<button class="robot-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-robot="3"> |
|
|
<i class="fas fa-robot text-2xl mb-1 text-yellow-400"></i> |
|
|
<span class="text-xs">RT-003</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-power-off mr-2 text-red-400"></i> |
|
|
Activation Robot |
|
|
</h3> |
|
|
<div class="bg-gray-800 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span>Statut Robot:</span> |
|
|
<span id="robot-status" class="px-3 py-1 rounded-full bg-gray-700 text-gray-300">INACTIF</span> |
|
|
</div> |
|
|
<button id="activate-btn" class="w-full py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-bold flex items-center justify-center"> |
|
|
<i class="fas fa-play mr-2"></i> ACTIVER ROBOT |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-chess-board mr-2 text-purple-400"></i> |
|
|
Mode Jeu |
|
|
</h3> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="maze"> |
|
|
<i class="fas fa-project-diagram text-2xl mb-1 text-purple-400"></i> |
|
|
<span class="text-xs">Labyrinthe</span> |
|
|
</button> |
|
|
<button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="race"> |
|
|
<i class="fas fa-flag-checkered text-2xl mb-1 text-red-400"></i> |
|
|
<span class="text-xs">Course</span> |
|
|
</button> |
|
|
<button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="collect"> |
|
|
<i class="fas fa-coins text-2xl mb-1 text-yellow-400"></i> |
|
|
<span class="text-xs">Collection</span> |
|
|
</button> |
|
|
<button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="battle"> |
|
|
<i class="fas fa-robot text-2xl mb-1 text-green-400"></i> |
|
|
<span class="text-xs">Combat</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-joystick mr-2 text-yellow-400"></i> |
|
|
Contrôle Manuel |
|
|
</h3> |
|
|
<div class="bg-gray-800 rounded-lg p-6 flex flex-col items-center"> |
|
|
<div class="relative w-40 h-40 mb-4"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="joystick w-24 h-24 rounded-full flex items-center justify-center cursor-move" id="joystick"> |
|
|
<i class="fas fa-arrows-alt text-white text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-2 w-full"> |
|
|
<button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="forward"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
<button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="left"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="right"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
<button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="backward"> |
|
|
<i class="fas fa-arrow-down"></i> |
|
|
</button> |
|
|
<button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center col-span-3" data-direction="stop"> |
|
|
<i class="fas fa-stop-circle mr-2"></i> STOP |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="game-screen rounded-xl p-6 col-span-2 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-center z-10 w-full max-w-2xl"> |
|
|
<div id="game-start-screen"> |
|
|
<h2 class="text-4xl font-bold mb-6 tech-font">MODE <span class="text-blue-400">JEU ROBOT</span></h2> |
|
|
<p class="text-xl mb-8">Sélectionnez un robot et un mode de jeu pour commencer</p> |
|
|
<div class="flex justify-center"> |
|
|
<div class="w-32 h-32 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 robot-eye"> |
|
|
<i class="fas fa-robot text-5xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<button id="start-game-btn" class="px-8 py-4 bg-blue-600 rounded-full text-white font-bold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
|
|
<i class="fas fa-play mr-2"></i> DÉMARRER LE JEU |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="game-container" class="hidden"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 id="game-title" class="text-2xl font-bold tech-font">LABYRINTHE ROBOT</h3> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="px-4 py-2 rounded-full bg-gray-800"> |
|
|
<span id="game-score">Score: 0</span> |
|
|
</div> |
|
|
<div class="px-4 py-2 rounded-full bg-gray-800"> |
|
|
<span id="game-time">Temps: 00:00</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="game-grid w-full aspect-square max-w-2xl mx-auto bg-gray-900 p-1 rounded-lg" id="game-grid"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-center space-x-4"> |
|
|
<button id="restart-game-btn" class="px-6 py-3 bg-yellow-600 rounded-lg text-white hover:bg-yellow-700"> |
|
|
<i class="fas fa-redo mr-2"></i> Recommencer |
|
|
</button> |
|
|
<button id="end-game-btn" class="px-6 py-3 bg-red-600 rounded-lg text-white hover:bg-red-700"> |
|
|
<i class="fas fa-stop mr-2"></i> Quitter |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let systemActive = true; |
|
|
let robotActive = false; |
|
|
let selectedRobot = null; |
|
|
let gameMode = null; |
|
|
let gameRunning = false; |
|
|
let gameInterval; |
|
|
let gameTime = 0; |
|
|
let gameScore = 0; |
|
|
let robotPosition = { x: 0, y: 0 }; |
|
|
let targetPosition = { x: 0, y: 0 }; |
|
|
let obstacles = []; |
|
|
|
|
|
|
|
|
const systemStatusEl = document.getElementById('system-status'); |
|
|
const robotStatusEl = document.getElementById('robot-status'); |
|
|
const activateBtn = document.getElementById('activate-btn'); |
|
|
const startGameBtn = document.getElementById('start-game-btn'); |
|
|
const gameStartScreen = document.getElementById('game-start-screen'); |
|
|
const gameContainer = document.getElementById('game-container'); |
|
|
const gameGrid = document.getElementById('game-grid'); |
|
|
const gameTitleEl = document.getElementById('game-title'); |
|
|
const gameScoreEl = document.getElementById('game-score'); |
|
|
const gameTimeEl = document.getElementById('game-time'); |
|
|
const restartGameBtn = document.getElementById('restart-game-btn'); |
|
|
const endGameBtn = document.getElementById('end-game-btn'); |
|
|
const fullscreenBtn = document.getElementById('fullscreen-btn'); |
|
|
|
|
|
|
|
|
const robotButtons = document.querySelectorAll('.robot-btn'); |
|
|
robotButtons.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
robotButtons.forEach(b => b.classList.remove('bg-blue-600', 'text-white')); |
|
|
btn.classList.add('bg-blue-600', 'text-white'); |
|
|
selectedRobot = btn.dataset.robot; |
|
|
updateStartButton(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const gameModeButtons = document.querySelectorAll('.game-mode-btn'); |
|
|
gameModeButtons.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
gameModeButtons.forEach(b => b.classList.remove('bg-blue-600', 'text-white')); |
|
|
btn.classList.add('bg-blue-600', 'text-white'); |
|
|
gameMode = btn.dataset.mode; |
|
|
updateStartButton(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const controlButtons = document.querySelectorAll('.control-btn'); |
|
|
controlButtons.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
if (!robotActive) return; |
|
|
|
|
|
const direction = btn.dataset.direction; |
|
|
moveRobot(direction); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
activateBtn.addEventListener('click', () => { |
|
|
if (!selectedRobot) { |
|
|
alert('Veuillez sélectionner un robot'); |
|
|
return; |
|
|
} |
|
|
|
|
|
robotActive = !robotActive; |
|
|
updateRobotStatus(); |
|
|
}); |
|
|
|
|
|
|
|
|
startGameBtn.addEventListener('click', () => { |
|
|
if (!robotActive) { |
|
|
alert('Veuillez activer un robot'); |
|
|
return; |
|
|
} |
|
|
|
|
|
startGame(); |
|
|
}); |
|
|
|
|
|
|
|
|
restartGameBtn.addEventListener('click', () => { |
|
|
startGame(); |
|
|
}); |
|
|
|
|
|
|
|
|
endGameBtn.addEventListener('click', () => { |
|
|
endGame(); |
|
|
}); |
|
|
|
|
|
|
|
|
fullscreenBtn.addEventListener('click', () => { |
|
|
if (!document.fullscreenElement) { |
|
|
document.documentElement.requestFullscreen().catch(err => { |
|
|
console.error(`Error attempting to enable fullscreen: ${err.message}`); |
|
|
}); |
|
|
} else { |
|
|
if (document.exitFullscreen) { |
|
|
document.exitFullscreen(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
if (!robotActive || !gameRunning) return; |
|
|
|
|
|
switch(e.key) { |
|
|
case 'ArrowUp': |
|
|
moveRobot('forward'); |
|
|
break; |
|
|
case 'ArrowDown': |
|
|
moveRobot('backward'); |
|
|
break; |
|
|
case 'ArrowLeft': |
|
|
moveRobot('left'); |
|
|
break; |
|
|
case 'ArrowRight': |
|
|
moveRobot('right'); |
|
|
break; |
|
|
case ' ': |
|
|
moveRobot('stop'); |
|
|
break; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const joystick = document.getElementById('joystick'); |
|
|
let isDragging = false; |
|
|
|
|
|
joystick.addEventListener('mousedown', () => { |
|
|
isDragging = true; |
|
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
if (!isDragging || !robotActive || !gameRunning) return; |
|
|
|
|
|
const rect = joystick.getBoundingClientRect(); |
|
|
const centerX = rect.left + rect.width / 2; |
|
|
const centerY = rect.top + rect.height / 2; |
|
|
|
|
|
const deltaX = e.clientX - centerX; |
|
|
const deltaY = e.clientY - centerY; |
|
|
|
|
|
|
|
|
const angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI; |
|
|
|
|
|
if (Math.abs(deltaX) > 20 || Math.abs(deltaY) > 20) { |
|
|
if (angle >= -45 && angle < 45) { |
|
|
moveRobot('right'); |
|
|
} else if (angle >= 45 && angle < 135) { |
|
|
moveRobot('backward'); |
|
|
} else if (angle >= 135 || angle < -135) { |
|
|
moveRobot('left'); |
|
|
} else if (angle >= -135 && angle < -45) { |
|
|
moveRobot('forward'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('mouseup', () => { |
|
|
isDragging = false; |
|
|
if (robotActive && gameRunning) { |
|
|
moveRobot('stop'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function updateStartButton() { |
|
|
startGameBtn.disabled = !(selectedRobot && gameMode); |
|
|
} |
|
|
|
|
|
function updateRobotStatus() { |
|
|
if (robotActive) { |
|
|
robotStatusEl.textContent = 'ACTIF'; |
|
|
robotStatusEl.classList.remove('bg-gray-700', 'text-gray-300'); |
|
|
robotStatusEl.classList.add('bg-green-600', 'text-white'); |
|
|
activateBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> DÉSACTIVER ROBOT'; |
|
|
activateBtn.classList.remove('bg-blue-600'); |
|
|
activateBtn.classList.add('bg-red-600'); |
|
|
|
|
|
|
|
|
robotButtons.forEach(btn => { |
|
|
if (btn.dataset.robot === selectedRobot) { |
|
|
btn.classList.add('robot-active'); |
|
|
} |
|
|
}); |
|
|
} else { |
|
|
robotStatusEl.textContent = 'INACTIF'; |
|
|
robotStatusEl.classList.add('bg-gray-700', 'text-gray-300'); |
|
|
robotStatusEl.classList.remove('bg-green-600', 'text-white'); |
|
|
activateBtn.innerHTML = '<i class="fas fa-play mr-2"></i> ACTIVER ROBOT'; |
|
|
activateBtn.classList.add('bg-blue-600'); |
|
|
activateBtn.classList.remove('bg-red-600'); |
|
|
|
|
|
|
|
|
robotButtons.forEach(btn => { |
|
|
btn.classList.remove('robot-active'); |
|
|
}); |
|
|
|
|
|
|
|
|
if (gameRunning) { |
|
|
endGame(); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function startGame() { |
|
|
gameStartScreen.classList.add('hidden'); |
|
|
gameContainer.classList.remove('hidden'); |
|
|
gameRunning = true; |
|
|
gameTime = 0; |
|
|
gameScore = 0; |
|
|
|
|
|
|
|
|
switch(gameMode) { |
|
|
case 'maze': |
|
|
gameTitleEl.textContent = 'LABYRINTHE ROBOT'; |
|
|
break; |
|
|
case 'race': |
|
|
gameTitleEl.textContent = 'COURSE ROBOT'; |
|
|
break; |
|
|
case 'collect': |
|
|
gameTitleEl.textContent = 'COLLECTION ROBOT'; |
|
|
break; |
|
|
case 'battle': |
|
|
gameTitleEl.textContent = 'COMBAT ROBOT'; |
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
initializeGameGrid(); |
|
|
|
|
|
|
|
|
gameInterval = setInterval(() => { |
|
|
gameTime++; |
|
|
const minutes = Math.floor(gameTime / 60).toString().padStart(2, '0'); |
|
|
const seconds = (gameTime % 60).toString().padStart(2, '0'); |
|
|
gameTimeEl.textContent = `Temps: ${minutes}:${seconds}`; |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function endGame() { |
|
|
clearInterval(gameInterval); |
|
|
gameRunning = false; |
|
|
gameContainer.classList.add('hidden'); |
|
|
gameStartScreen.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
gameGrid.innerHTML = ''; |
|
|
} |
|
|
|
|
|
function initializeGameGrid() { |
|
|
gameGrid.innerHTML = ''; |
|
|
|
|
|
|
|
|
for (let y = 0; y < 10; y++) { |
|
|
for (let x = 0; x < 10; x++) { |
|
|
const cell = document.createElement('div'); |
|
|
cell.className = 'game-cell'; |
|
|
cell.dataset.x = x; |
|
|
cell.dataset.y = y; |
|
|
gameGrid.appendChild(cell); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
robotPosition = { |
|
|
x: Math.floor(Math.random() * 10), |
|
|
y: Math.floor(Math.random() * 10) |
|
|
}; |
|
|
|
|
|
|
|
|
do { |
|
|
targetPosition = { |
|
|
x: Math.floor(Math.random() * 10), |
|
|
y: Math.floor(Math.random() * 10) |
|
|
}; |
|
|
} while (targetPosition.x === robotPosition.x && targetPosition.y === robotPosition.y); |
|
|
|
|
|
|
|
|
obstacles = []; |
|
|
for (let i = 0; i < 20; i++) { |
|
|
let obstacle; |
|
|
do { |
|
|
obstacle = { |
|
|
x: Math.floor(Math.random() * 10), |
|
|
y: Math.floor(Math.random() * 10) |
|
|
}; |
|
|
} while ( |
|
|
(obstacle.x === robotPosition.x && obstacle.y === robotPosition.y) || |
|
|
(obstacle.x === targetPosition.x && obstacle.y === targetPosition.y) || |
|
|
obstacles.some(o => o.x === obstacle.x && o.y === obstacle.y) |
|
|
); |
|
|
|
|
|
obstacles.push(obstacle); |
|
|
} |
|
|
|
|
|
|
|
|
updateGameGrid(); |
|
|
} |
|
|
|
|
|
function updateGameGrid() { |
|
|
const cells = document.querySelectorAll('.game-cell'); |
|
|
|
|
|
cells.forEach(cell => { |
|
|
cell.className = 'game-cell'; |
|
|
const x = parseInt(cell.dataset.x); |
|
|
const y = parseInt(cell.dataset.y); |
|
|
|
|
|
if (x === robotPosition.x && y === robotPosition.y) { |
|
|
cell.classList.add('robot'); |
|
|
} else if (x === targetPosition.x && y === targetPosition.y) { |
|
|
cell.classList.add('target'); |
|
|
} else if (obstacles.some(o => o.x === x && o.y === y)) { |
|
|
cell.classList.add('obstacle'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function moveRobot(direction) { |
|
|
if (!gameRunning) return; |
|
|
|
|
|
let newX = robotPosition.x; |
|
|
let newY = robotPosition.y; |
|
|
|
|
|
switch(direction) { |
|
|
case 'forward': |
|
|
newY = Math.max(0, robotPosition.y - 1); |
|
|
break; |
|
|
case 'backward': |
|
|
newY = Math.min(9, robotPosition.y + 1); |
|
|
break; |
|
|
case 'left': |
|
|
newX = Math.max(0, robotPosition.x - 1); |
|
|
break; |
|
|
case 'right': |
|
|
newX = Math.min(9, robotPosition.x + 1); |
|
|
break; |
|
|
case 'stop': |
|
|
|
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
const isObstacle = obstacles.some(o => o.x === newX && o.y === newY); |
|
|
|
|
|
if (!isObstacle || direction === 'stop') { |
|
|
robotPosition.x = newX; |
|
|
robotPosition.y = newY; |
|
|
|
|
|
|
|
|
if (robotPosition.x === targetPosition.x && robotPosition.y === targetPosition.y) { |
|
|
gameScore += 10; |
|
|
gameScoreEl.textContent = `Score: ${gameScore}`; |
|
|
|
|
|
|
|
|
do { |
|
|
targetPosition = { |
|
|
x: Math.floor(Math.random() * 10), |
|
|
y: Math.floor(Math.random() * 10) |
|
|
}; |
|
|
} while ( |
|
|
(targetPosition.x === robotPosition.x && targetPosition.y === robotPosition.y) || |
|
|
obstacles.some(o => o.x === targetPosition.x && o.y === targetPosition.y) |
|
|
); |
|
|
} |
|
|
|
|
|
updateGameGrid(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
updateRobotStatus(); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/ttrun" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
