<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gun Game - Target Practice</title>
<style>
\* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 90%;
max-width: 1000px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
text-align: center;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.stats {
display: flex;
justify-content: space-around;
padding: 15px;
background: #f5f5f5;
font-weight: bold;
gap: 20px;
}
.stat-item {
text-align: center;
}
.stat-label {
font-size: 0.9em;
color: #666;
}
.stat-value {
font-size: 1.8em;
color: #667eea;
margin-top: 5px;
}
.game-area {
position: relative;
width: 100%;
height: 500px;
background: radial-gradient(circle, #e0e0e0 0%, #c0c0c0 100%);
cursor: crosshair;
overflow: hidden;
}
.target {
position: absolute;
cursor: pointer;
transition: transform 0.1s;
}
.target:hover {
transform: scale(1.1);
}
.target-ring {
width: 100%;
height: 100%;
border: 3px solid;
border-radius: 50%;
position: relative;
}
.target-inner {
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.target-center {
position: absolute;
width: 12px;
height: 12px;
background: #ff0000;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.target-circle {
background: #FFD700;
border-color: #FF8C00;
}
.target-square {
border-radius: 0 !important;
background: #00CED1;
border-color: #0099CC;
}
.target-star {
background: #FF1493;
border-color: #FF69B4;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.target-polygon {
background: #32CD32;
border-color: #228B22;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.target-diamond {
background: #9370DB;
border-color: #6A5ACD;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.hit-effect {
position: absolute;
pointer-events: none;
font-size: 2em;
animation: hit-pop 0.6s ease-out;
}
@keyframes hit-pop {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -150%) scale(1.5);
}
}
.controls {
padding: 20px;
display: flex;
gap: 10px;
justify-content: center;
background: #f5f5f5;
}
button {
padding: 12px 30px;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
}
.btn-start {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-start:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.btn-reset {
background: #ff6b6b;
color: white;
}
.btn-reset:hover {
background: #ff5252;
transform: translateY(-2px);
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 40px;
border-radius: 15px;
text-align: center;
z-index: 100;
display: none;
min-width: 300px;
}
.game-over h2 {
font-size: 2em;
margin-bottom: 20px;
}
.game-over p {
font-size: 1.2em;
margin: 10px 0;
}
.game-over.show {
display: block;
animation: pop-in 0.4s ease-out;
}
@keyframes pop-in {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.5);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.difficulty {
padding: 15px;
background: #f5f5f5;
text-align: center;
}
.difficulty-btn {
padding: 8px 15px;
margin: 0 5px;
font-size: 0.9em;
border: 2px solid #667eea;
background: white;
color: #667eea;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s;
}
.difficulty-btn.active {
background: #667eea;
color: white;
}
.difficulty-btn:hover {
background: #667eea;
color: white;
}
</style>
<div class="container">
<div class="header">
<h1>🎯 Gun Game</h1>
<p>Click targets to score points!</p>
</div>
<div class="difficulty">
<strong>Difficulty:</strong>
<button class="difficulty-btn active" onclick="setDifficulty('easy')">Easy</button>
<button class="difficulty-btn" onclick="setDifficulty('medium')">Medium</button>
<button class="difficulty-btn" onclick="setDifficulty('hard')">Hard</button>
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-label">Score</div>
<div class="stat-value" id="score">0</div>
</div>
<div class="stat-item">
<div class="stat-label">Targets Hit</div>
<div class="stat-value" id="hits">0</div>
</div>
<div class="stat-item">
<div class="stat-label">Time Left</div>
<div class="stat-value" id="timer">60</div>
</div>
<div class="stat-item">
<div class="stat-label">Accuracy</div>
<div class="stat-value" id="accuracy">0%</div>
</div>
</div>
<div class="game-area" id="gameArea">
<div class="game-over" id="gameOver">
<h2>Game Over!</h2>
<p>Final Score: <strong id="finalScore">0</strong></p>
<p>Targets Hit: <strong id="finalHits">0</strong></p>
<p>Accuracy: <strong id="finalAccuracy">0%</strong></p>
</div>
</div>
<div class="controls">
<button class="btn-start" onclick="startGame()">Start Game</button>
<button class="btn-reset" onclick="resetGame()">Reset</button>
</div>
</div>
<script>
const gameArea = document.getElementById('gameArea');
const scoreDisplay = document.getElementById('score');
const hitsDisplay = document.getElementById('hits');
const timerDisplay = document.getElementById('timer');
const accuracyDisplay = document.getElementById('accuracy');
const gameOverScreen = document.getElementById('gameOver');
let score = 0;
let hits = 0;
let totalClicks = 0;
let gameActive = false;
let timeLeft = 60;
let gameDuration = 60;
let timerInterval = null;
let targetSpawnInterval = null;
let difficulty = 'easy';
const targetTypes = \['target-circle', 'target-square', 'target-star', 'target-polygon', 'target-diamond'\];
const targetValues = { 'target-circle': 10, 'target-square': 15, 'target-star': 20, 'target-polygon': 25, 'target-diamond': 30 };
function setDifficulty(level) {
difficulty = level;
document.querySelectorAll('.difficulty-btn').forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
}
function createTarget() {
if (!gameActive) return;
const target = document.createElement('div');
const type = targetTypes\[Math.floor(Math.random() \* targetTypes.length)\];
const size = difficulty === 'easy' ? 60 : difficulty === 'medium' ? 45 : 30;
target.className = \`target ${type}\`;
target.style.width = size + 'px';
target.style.height = size + 'px';
target.style.left = Math.random() \* (gameArea.clientWidth - size) + 'px';
target.style.top = Math.random() \* (gameArea.clientHeight - size) + 'px';
target.innerHTML = \`<div class="target-ring"><div class="target-center"></div></div>\`;
target.onclick = (e) => {
e.stopPropagation();
hitTarget(target, type);
};
gameArea.appendChild(target);
const lifetime = difficulty === 'easy' ? 3000 : difficulty === 'medium' ? 2000 : 1000;
setTimeout(() => {
if (target.parentNode) target.parentNode.removeChild(target);
}, lifetime);
}
function hitTarget(target, type) {
totalClicks++;
hits++;
score += targetValues\[type\];
updateStats();
const x = target.offsetLeft + target.offsetWidth / 2;
const y = target.offsetTop + target.offsetHeight / 2;
const effect = document.createElement('div');
effect.className = 'hit-effect';
effect.textContent = '+' + targetValues\[type\];
effect.style.left = x + 'px';
effect.style.top = y + 'px';
effect.style.color = getColorForType(type);
gameArea.appendChild(effect);
setTimeout(() => effect.remove(), 600);
target.remove();
createTarget();
}
function getColorForType(type) {
const colors = {
'target-circle': '#FF8C00',
'target-square': '#0099CC',
'target-star': '#FF69B4',
'target-polygon': '#228B22',
'target-diamond': '#6A5ACD'
};
return colors\[type\] || '#FFD700';
}
function updateStats() {
scoreDisplay.textContent = score;
hitsDisplay.textContent = hits;
const accuracy = totalClicks > 0 ? Math.round((hits / totalClicks) \* 100) : 0;
accuracyDisplay.textContent = accuracy + '%';
}
function startGame() {
if (gameActive) return;
resetGame();
gameActive = true;
gameOverScreen.classList.remove('show');
timeLeft = gameDuration;
for (let i = 0; i < 3; i++) {
createTarget();
}
targetSpawnInterval = setInterval(() => {
if (gameActive) createTarget();
}, difficulty === 'easy' ? 1500 : difficulty === 'medium' ? 1000 : 700);
timerInterval = setInterval(() => {
timeLeft--;
timerDisplay.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
}
function endGame() {
gameActive = false;
clearInterval(timerInterval);
clearInterval(targetSpawnInterval);
document.querySelectorAll('.target').forEach(t => t.remove());
const accuracy = totalClicks > 0 ? Math.round((hits / totalClicks) \* 100) : 0;
document.getElementById('finalScore').textContent = score;
document.getElementById('finalHits').textContent = hits;
document.getElementById('finalAccuracy').textContent = accuracy + '%';
gameOverScreen.classList.add('show');
}
function resetGame() {
gameActive = false;
score = 0;
hits = 0;
totalClicks = 0;
timeLeft = gameDuration;
clearInterval(timerInterval);
clearInterval(targetSpawnInterval);
document.querySelectorAll('.target').forEach(t => t.remove());
updateStats();
timerDisplay.textContent = gameDuration;
gameOverScreen.classList.remove('show');
}
</script>