Seam Shooter 2D Game Configuration
Seam Shooter 2D Game Configuration
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "[Link]
"webRoot": "${workspaceFolder}"
}
]
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seam Shooter 2D (Complete)</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
font-family: 'Inter', sans-serif;
color: #fff;
flex-direction: column;
overflow: hidden;
}
canvas {
background-color: transparent;
border: 2px solid #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
cursor: none; /* Hide default cursor */
}
#ui-container {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
font-size: 1.5rem;
font-weight: bold;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
z-index: 10;
background-color: rgba(0, 0, 0, 0.5);
min-width: 300px;
justify-content: space-between;
}
#boss-health-bar-container {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
height: 25px;
background-color: #333;
border-radius: 5px;
border: 2px solid #fff;
overflow: hidden;
display: none;
z-index: 10;
}
#boss-health-bar {
height: 100%;
width: 100%;
background-color: #e74c3c;
transition: width 0.3s ease-in-out;
}
#main-menu, #message-box, #pause-menu {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
font-size: 1.5rem;
border: 2px solid #fff;
z-index: 1000;
}
#main-menu h1, #message-box h1, #pause-menu h1 {
font-size: 3rem;
margin-bottom: 20px;
}
.button-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
transition: transform 0.1s ease-in-out;
width: 200px;
}
button:hover {
transform: scale(1.05);
}
#difficulty-select button, #player-select button {
background-color: #3498db;
}
</style>
<script src="[Link]
script>
</head>
<body>
<div id="ui-container" style="display: none;">
<div id="score-display">Score: 0</div>
<div id="lives-display">Lives: 3</div>
<div id="high-score-display">High Score: 0</div>
</div>
<div id="boss-health-bar-container">
<div id="boss-health-bar"></div>
</div>
<canvas id="gameCanvas"></canvas>
</button>
</div>
<p id="high-score-menu-display" style="margin-top: 20px;">High Score:
0</p>
<button id="start-game-btn" style="margin-top: 20px;">Start
Game</button>
</div>
</div>
// UI Elements
const scoreDisplay = [Link]('score-display');
const livesDisplay = [Link]('lives-display');
const highScoreDisplay = [Link]('high-score-display');
const uiContainer = [Link]('ui-container');
const mainMenu = [Link]('main-menu');
const messageBox = [Link]('message-box');
const pauseMenu = [Link]('pause-menu');
const bossHealthBarContainer = [Link]('boss-health-bar-
container');
const bossHealthBar = [Link]('boss-health-bar');
const startButton = [Link]('start-game-btn');
const restartButton = [Link]('restart-game-btn');
const difficultyButtons = [Link]('#difficulty-select
button');
const playerButtons = [Link]('#player-select button');
const resumeButton = [Link]('resume-btn');
const mainMenuButton = [Link]('main-menu-btn');
// Audio Setup
let shootSynth = null;
let hitSynth = null;
let powerUpSynth = null;
let bombSynth = null;
let bossHitSynth = null;
let backgroundMusic = null;
// Game objects
let player = {
x: [Link] / 2,
y: [Link] - 50,
width: 50,
height: 50,
emoji: '🚀'
};
let bullets = [];
let enemies = [];
let powerups = [];
let particles = [];
let stars = [];
let bossBullets = [];
const enemyTypes = {
basic: { emoji: '👽', size: 30, speed: 2, points: 66 },
fast: { emoji: '👾', size: 20, speed: 4, points: 66 },
big: { emoji: '🛸', size: 50, speed: 2, points: 66 }
};
const bossConfig = {
emoji: '👹', size: 100, health: 50, speed: 1.5, points: 1000,
bulletSpeed: 4
};
/**
* Initializes audio for the game.
* (Game ke liye audio shuru karta hai.)
*/
function initAudio() {
if ([Link] !== 'running') {
[Link]();
}
if (!shootSynth) {
shootSynth = new [Link]({ frequency: 150, envelope:
{ attack: 0.001, decay: 0.2, release: 0.1 } }).toDestination();
hitSynth = new [Link]({ frequency: 200, envelope:
{ attack: 0.001, decay: 0.2, release: 0.1 } }).toDestination();
powerUpSynth = new [Link]({ oscillator: { type: 'sine' },
envelope: { attack: 0.01, decay: 0.1, sustain: 0.1, release:
0.3 } }).toDestination();
bombSynth = new [Link]({ volume: -10, envelope: { attack:
0.001, decay: 0.2, release: 0.1 } }).toDestination();
bossHitSynth = new [Link]({ oscillator: { type: 'square' },
envelope: { attack: 0.01, decay: 0.1, sustain: 0.1, release: 0.2 }, volume: -
15 }).toDestination();
/**
* Initializes or resets the game state.
* (Game ko shuru ya reset karta hai.)
*/
function initGame() {
resizeCanvas();
gameStarted = true;
gameOver = false;
isPaused = false;
score = 0;
lives = 3;
bullets = [];
enemies = [];
powerups = [];
particles = [];
boss = null;
bossBullets = [];
[Link] = 'none';
lastEnemySpawnTime = 0;
lastPowerupSpawnTime = 0;
bossLastFireTime = 0;
player.x = [Link] / 2;
[Link] = playerEmoji;
[Link] = 'none';
[Link] = 'none';
[Link] = 'none';
[Link] = 'flex';
if (animationFrameId) cancelAnimationFrame(animationFrameId);
if (bgAnimationFrameId) cancelAnimationFrame(bgAnimationFrameId);
updateUI();
animate();
animateBackground();
}
/**
* Updates the UI displays.
* (UI display ko update karta hai.)
*/
function updateUI() {
[Link] = `Score: ${score}`;
[Link] = `Lives: ${lives}`;
[Link] = `High Score: ${highScore}`;
[Link]('high-score-menu-display').textContent = `High
Score: ${highScore}`;
/**
* Saves the high score to local storage.
* (High score ko local storage mein save karta hai.)
*/
function saveHighScore() {
if (score > highScore) {
highScore = score;
[Link]('seamShooterHighScore', highScore);
}
}
/**
* Spawns a new enemy at a random position.
* (Random position par ek naya dushman paida karta hai.)
*/
function spawnEnemy() {
const types = [Link](enemyTypes);
const randomType = types[[Link]([Link]() * [Link])];
const config = enemyTypes[randomType];
[Link]({
x: [Link]() * ([Link] - [Link]),
y: -[Link],
size: [Link],
speed: [Link],
emoji: [Link],
points: [Link]
});
}
/**
* Spawns a new power-up at a random position.
* (Random position par ek naya power-up paida karta hai.)
*/
function spawnPowerup() {
const types = [Link](powerupTypes);
const randomType = types[[Link]([Link]() * [Link])];
const config = powerupTypes[randomType];
[Link]({
x: [Link]() * ([Link] - [Link]),
y: -[Link],
size: [Link],
speed: 1.5,
emoji: [Link],
type: [Link],
duration: [Link]
});
}
/**
* Spawns the boss enemy.
* (Boss dushman ko paida karta hai.)
*/
function spawnBoss() {
boss = {
x: [Link] / 2 - [Link] / 2,
y: -[Link],
size: [Link],
health: [Link],
maxHealth: [Link],
emoji: [Link],
speed: [Link],
points: [Link],
bulletSpeed: [Link]
};
[Link] = 'block';
}
/**
* Handles bullet firing for the player.
* (Player ke liye goli chalane ka kaam karta hai.)
*/
function fireBullet() {
[Link]({
x: player.x + [Link] / 2,
y: player.y,
width: 5,
height: 15,
speed: -7,
color: '#fff'
});
if (shootSynth) {
[Link]("C4", "32n");
}
}
/**
* Handles bullet firing for the boss.
* (Boss ke liye goli chalane ka kaam karta hai.)
*/
function bossFireBullet() {
if (boss) {
[Link]({
x: boss.x + [Link] / 2 - 2,
y: boss.y + [Link],
width: 4,
height: 12,
speed: [Link],
color: '#FF6347'
});
}
}
/**
* Toggles the game's pause state.
* (Game ko pause ya resume karta hai.)
*/
function togglePause() {
isPaused = !isPaused;
if (isPaused) {
cancelAnimationFrame(animationFrameId);
cancelAnimationFrame(bgAnimationFrameId);
[Link] = 'block';
[Link] = 'none';
if (backgroundMusic) [Link] = -40; // Mute
music
} else {
[Link] = 'none';
[Link] = 'flex';
animate();
animateBackground();
if (backgroundMusic) [Link] = -20; // Unmute
music
}
}
/**
* The main game loop.
* (Game ka mukhya loop.)
*/
function animate(timestamp) {
if (gameOver || isPaused || !gameStarted) return;
// Spawning logic
if (!boss) {
if (score >= bossSpawnScore) {
spawnBoss();
} else if (timestamp - lastEnemySpawnTime > enemySpawnInterval) {
spawnEnemy();
lastEnemySpawnTime = timestamp;
}
}
// Update positions
[Link](b => b.y += [Link]);
[Link](e => e.y += [Link]);
[Link](p => p.y += [Link]);
[Link](p => {
p.x += [Link];
p.y += [Link];
[Link] -= 0.01;
});
[Link](b => b.y += [Link]);
// Boss logic
if (boss) {
boss.y += [Link];
if (boss.y > 100) boss.y = 100;
}
// Collision detection
checkCollisions();
if (lives <= 0) {
endGame();
}
animationFrameId = requestAnimationFrame(animate);
}
/**
* Creates and draws the starry background.
* (Taaron bhara background banata aur draw karta hai.)
*/
function animateBackground() {
[Link](0, 0, [Link], [Link]);
bgAnimationFrameId = requestAnimationFrame(animateBackground);
}
/**
* Draws the player with a gradient and glow.
* (Player ko gradient aur chamak ke saath draw karta hai.)
*/
function drawPlayer() {
// Player ki chamak set karna
[Link] = shieldActive ? 20 : 10;
[Link] = shieldActive ? 'rgba(100, 200, 255, 1)' : 'rgba(255,
255, 255, 1)';
/**
* Draws the boss with a gradient and glow.
* (Boss ko gradient aur chamak ke saath draw karta hai.)
*/
function drawBoss() {
if (!boss) return;
[Link] = 20;
[Link] = '#e74c3c';
[Link] = 0;
[Link] = `${[Link] * 0.7}px sans-serif`;
[Link] = 'center';
[Link] = 'middle';
[Link]([Link], boss.x + [Link] / 2, boss.y + [Link] /
2);
}
/**
* Draws enemies with a glowing outline.
* (Dushmano ko chamakdar outline ke saath draw karta hai.)
*/
function drawEnemies() {
[Link](e => {
[Link] = 10;
[Link] = 'rgba(255, 0, 0, 0.8)';
[Link] = `${[Link]}px sans-serif`;
[Link] = 'center';
[Link] = 'middle';
[Link]([Link], e.x + [Link] / 2, e.y + [Link] / 2);
[Link] = 0;
});
}
/**
* Draws player bullets as glowing lasers.
* (Player ki goliyon ko chamakdar lasers ke roop mein draw karta hai.)
*/
function drawBullets() {
[Link](b => {
[Link] = 15;
[Link] = '#fff';
[Link] = '#fff';
[Link](b.x, b.y, [Link], [Link]);
[Link] = 0;
});
}
/**
* Draws boss bullets as glowing red lasers.
* (Boss ki goliyon ko chamakdar laal lasers ke roop mein draw karta hai.)
*/
function drawBossBullets() {
[Link](b => {
[Link] = 15;
[Link] = '#FF6347';
[Link] = [Link];
[Link](b.x, b.y, [Link], [Link]);
[Link] = 0;
});
}
/**
* Draws power-ups with a glowing effect.
* (Power-ups ko chamakdar prabhav ke saath draw karta hai.)
*/
function drawPowerups() {
[Link](p => {
[Link] = 10;
[Link] = '#00FF00';
[Link] = `${[Link]}px sans-serif`;
[Link] = 'center';
[Link] = 'middle';
[Link]([Link], p.x + [Link] / 2, p.y + [Link] / 2);
[Link] = 0;
});
}
/**
* Draws all active particles.
* (Sabhi active particles ko draw karta hai.)
*/
function drawParticles() {
[Link](p => {
[Link] = `rgba(${[Link].r}, ${[Link].g}, ${[Link].b}, $
{[Link]})`;
[Link]();
[Link](p.x, p.y, [Link], 0, [Link] * 2);
[Link]();
});
}
/**
* Creates a particle explosion with a flash.
* (Ek flash ke saath particle explosion banata hai.)
*/
function createExplosion(x, y) {
// Explosion flash
[Link]();
[Link]();
[Link](x, y, 30, 0, [Link] * 2);
[Link] = 'rgba(255, 255, 255, 0.8)';
[Link]();
[Link]();
// Particles
for (let i = 0; i < 20; i++) {
const angle = [Link]() * [Link] * 2;
const speed = [Link]() * 5 + 1;
const color = explosionColors[[Link]([Link]() *
[Link])];
[Link]({
x: x,
y: y,
vx: [Link](angle) * speed,
vy: [Link](angle) * speed,
size: [Link]() * 3 + 1,
alpha: 1,
color: {
r: parseInt([Link](1, 3), 16),
g: parseInt([Link](3, 5), 16),
b: parseInt([Link](5, 7), 16)
}
});
}
}
/**
* Checks for all game collisions.
* (Game ke sabhi takkaron ki jaanch karta hai.)
*/
function checkCollisions() {
// Bullet-enemy collisions
for (let i = [Link] - 1; i >= 0; i--) {
for (let j = [Link] - 1; j >= 0; j--) {
if (isColliding(bullets[i], enemies[j])) {
createExplosion(enemies[j].x + enemies[j].size / 2,
enemies[j].y + enemies[j].size / 2);
score += enemies[j].points * (scoreMultiplierActive ? 2 :
1);
if (hitSynth) [Link]("A4", "8n");
[Link](i, 1);
[Link](j, 1);
updateUI();
break; // Exit inner loop since bullet is gone
}
}
}
// Bullet-boss collision
if (boss) {
for (let i = [Link] - 1; i >= 0; i--) {
if (isColliding(bullets[i], boss)) {
[Link](i, 1);
[Link] -= 1;
if (bossHitSynth) [Link]("G4",
"16n");
updateUI();
if ([Link] <= 0) {
createExplosion(boss.x + [Link] / 2, boss.y +
[Link] / 2);
score += [Link];
boss = null;
[Link] = 'none';
updateUI();
}
break; // Exit loop after hitting the boss
}
}
}
// Player-enemy collisions
for (let i = [Link] - 1; i >= 0; i--) {
if (isColliding(player, enemies[i])) {
if (shieldActive) {
shieldActive = false;
if (shieldTimer) clearTimeout(shieldTimer);
} else {
lives--;
}
createExplosion(enemies[i].x + enemies[i].size / 2,
enemies[i].y + enemies[i].size / 2);
[Link](i, 1);
updateUI();
}
}
// Player-boss collision
if (boss && isColliding(player, boss)) {
if (shieldActive) {
shieldActive = false;
if (shieldTimer) clearTimeout(shieldTimer);
} else {
lives--;
}
createExplosion(boss.x + [Link] / 2, boss.y + [Link] / 2);
boss = null;
[Link] = 'none';
updateUI();
}
// Player-powerup collisions
for (let i = [Link] - 1; i >= 0; i--) {
if (isColliding(player, powerups[i])) {
const powerup = powerups[i];
[Link](i, 1);
if (powerUpSynth) [Link]("C6",
"8n");
/**
* Simple AABB collision detection.
* (AABB collision detection.)
*/
function isColliding(rect1, rect2) {
const rect1Width = [Link] || [Link];
const rect1Height = [Link] || [Link];
const rect2Width = [Link] || [Link];
const rect2Height = [Link] || [Link];
return rect1.x < rect2.x + rect2Width &&
rect1.x + rect1Width > rect2.x &&
rect1.y < rect2.y + rect2Height &&
rect1.y + rect1Height > rect2.y;
}
/**
* Activates rapid fire mode.
* (Rapid fire mode shuru karta hai.)
*/
function activateRapidFire() {
if (rapidFireActive) return;
rapidFireActive = true;
if (rapidFireTimer) clearInterval(rapidFireTimer);
rapidFireTimer = setInterval(fireBullet, 100);
setTimeout(() => {
rapidFireActive = false;
clearInterval(rapidFireTimer);
}, 5000);
}
/**
* Activates shield mode.
* (Shield mode shuru karta hai.)
*/
function activateShield() {
shieldActive = true;
if (shieldTimer) clearTimeout(shieldTimer);
shieldTimer = setTimeout(() => {
shieldActive = false;
}, 8000);
}
/**
* Activates bomb effect.
* (Bomb effect shuru karta hai.)
*/
function activateBomb() {
[Link](e => {
createExplosion(e.x + [Link] / 2, e.y + [Link] / 2);
score += [Link] * (scoreMultiplierActive ? 2 : 1);
});
if (bombSynth) [Link]("4n");
enemies = [];
updateUI();
}
/**
* Activates score multiplier.
* (Score multiplier shuru karta hai.)
*/
function activateScoreMultiplier() {
scoreMultiplierActive = true;
if (scoreMultiplierTimer) clearTimeout(scoreMultiplierTimer);
scoreMultiplierTimer = setTimeout(() => {
scoreMultiplierActive = false;
}, 10000);
}
/**
* Ends the game and shows the game over message.
* (Game ko khatam karta hai aur game over message dikhata hai.)
*/
function endGame() {
gameOver = true;
gameStarted = false;
saveHighScore();
cancelAnimationFrame(animationFrameId);
cancelAnimationFrame(bgAnimationFrameId);
[Link] = 'none';
[Link] = 'none';
[Link]('game-message').textContent = "Game Over!";
[Link]('final-stats').textContent = `Your final score
was ${score}.`;
[Link] = 'block';
if (backgroundMusic) [Link]();
}
/**
* Resizes the canvas to be responsive.
* (Canvas ko responsive banane ke liye resize karta hai.)
*/
function resizeCanvas() {
[Link] = [Link] * 0.8;
[Link] = [Link] * 0.8;
[Link] = [Link];
[Link] = [Link];
player.x = [Link] / 2 - [Link] / 2;
player.y = [Link] - [Link] - 20;
}
// Event listeners
[Link]('click', () => { initAudio(); initGame(); });
[Link]('click', () => { initAudio();
initGame(); });
[Link]('click', togglePause);
[Link]('click', () => {
[Link] = 'none';
[Link] = 'block';
if (backgroundMusic) [Link]();
});
[Link](btn => {
[Link]('click', () => {
currentDifficulty = [Link];
[Link](b => [Link] =
'#3498db');
[Link] = '#2ecc71';
});
});
[Link](btn => {
[Link]('click', () => {
playerEmoji = [Link];
[Link](b => [Link] = '#3498db');
[Link] = '#2ecc71';
});
});
[Link]('resize', resizeCanvas);
// Initial setup
[Link] = () => {
resizeCanvas();
animateBackground();
updateUI(); // Load high score and display
};
</script>
</body>
</html>