<p><br /></p>
    <meta charset="UTF-8">
    <title>간단한 탄막 슈팅</title>
    <style>
        canvas { display:block; margin:0 auto; background:#222; }
    </style>
<canvas id="gameCanvas" width="480" height="640"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const player = {
    x: canvas.width / 2,
    y: canvas.height - 60,
    width: 32,
    height: 32,
    speed: 5,
    alive: true
};

const bullets = [];
const enemyBullets = [];

// --- 적 여러 대를 위한 배열 구조로 변경 및 관련 코드 수정 ---

// 적 배열로 변경
let enemies = [];
let explosions = [];

let startTime = Date.now();
let survivedTime = 0;
let showGameOver = false;

const MAX_ENEMIES = 10; // 최대 적 수
const ENEMY_SPAWN_INTERVAL = 5000; // 5초마다 스폰
let lastSpawnTime = Date.now();

function drawPlayer() {
    ctx.save();
    ctx.translate(player.x, player.y);

    // 이동 방향에 따라 기울기 계산
    let tilt = 0;
    if (keys['ArrowLeft'] && !keys['ArrowRight']) tilt = -0.3;
    else if (keys['ArrowRight'] && !keys['ArrowLeft']) tilt = 0.3;

    ctx.rotate(tilt);

    // 비행기 몸체
    ctx.fillStyle = "#4af";
    ctx.beginPath();
    ctx.moveTo(0, -18); // 앞부분
    ctx.lineTo(12, 12); // 오른쪽 날개
    ctx.lineTo(0, 8);   // 꼬리
    ctx.lineTo(-12, 12); // 왼쪽 날개
    ctx.closePath();
    ctx.fill();
    // 조종석
    ctx.fillStyle = "#fff";
    ctx.beginPath();
    ctx.ellipse(0, -8, 4, 7, 0, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
}

function drawBullets() {
    ctx.fillStyle = "#fff";
    bullets.forEach(b => ctx.fillRect(b.x-2, b.y-8, 4, 8));
}

function drawEnemyBullets() {
    ctx.fillStyle = "#f44";
    enemyBullets.forEach(b => {
        ctx.beginPath();
        ctx.arc(b.x, b.y, 6, 0, Math.PI*2);
        ctx.fill();
    });
}

// 적 그리기 함수 수정
function drawEnemy(enemy) {
    if (!enemy.alive) return;
    ctx.save();
    ctx.translate(enemy.x, enemy.y);
    ctx.rotate(Math.sin(enemy.angle) * 0.2);
    ctx.fillStyle = "#fa0";
    ctx.beginPath();
    ctx.moveTo(0, -22);
    ctx.lineTo(14, 16);
    ctx.lineTo(0, 10);
    ctx.lineTo(-14, 16);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle = "#fff";
    ctx.beginPath();
    ctx.ellipse(0, -10, 5, 8, 0, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
}

function drawExplosions() {
    for (let i = explosions.length - 1; i >= 0; i--) {
        const ex = explosions[i];
        ctx.save();
        ctx.globalAlpha = 1 - ex.life / ex.maxLife;
        ctx.beginPath();
        ctx.arc(ex.x, ex.y, ex.life * 2 + 10, 0, Math.PI * 2);
        ctx.fillStyle = "orange";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(ex.x, ex.y, ex.life + 5, 0, Math.PI * 2);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.restore();
        ex.life++;
        if (ex.life > ex.maxLife) explosions.splice(i, 1);
    }
}

function updatePlayer(delta = 1) {
    if (!player.alive) return;
    const moveSpeed = player.speed * delta;
    if (keys['ArrowLeft'] && player.x > 16) player.x -= moveSpeed;
    if (keys['ArrowRight'] && player.x < canvas.width-16) player.x += moveSpeed;
    if (keys['ArrowUp'] && player.y > 16) player.y -= moveSpeed;
    if (keys['ArrowDown'] && player.y < canvas.height-16) player.y += moveSpeed;
}

function updateBullets(delta = 1) {
    bullets.forEach(b => b.y -= 10 * delta);
    for (let i = bullets.length-1; i >= 0; i--) {
        if (bullets[i].y < 0) bullets.splice(i, 1);
    }
}

function updateEnemyBullets(delta = 1) {
    enemyBullets.forEach(b => {
        b.x += Math.cos(b.angle) * b.speed * delta;
        b.y += Math.sin(b.angle) * b.speed * delta;
    });
    for (let i = enemyBullets.length-1; i >= 0; i--) {
        if (enemyBullets[i].y > canvas.height+20 || enemyBullets[i].x < -20 || enemyBullets[i].x > canvas.width+20)
            enemyBullets.splice(i, 1);
    }
}

function checkCollision() {
    enemyBullets.forEach(b => {
        const dx = player.x - b.x;
        const dy = player.y - b.y;
        if (dx*dx + dy*dy < 16*16) player.alive = false;
    });
}

let keys = {};
document.addEventListener('keydown', e => {
    keys[e.key] = true;
    if (e.key === ' ' && player.alive) {
        bullets.push({x: player.x, y: player.y-20});
        playShootSound();
    }
    // R키 처리를 keyCode로 변경 (한/영 상관없이 동작)
    if (e.keyCode === 82) { // 82는 'R'키의 keyCode
        if (showGameOver) restartGame();
    }
});

document.addEventListener('keyup', e => {
    keys[e.key] = false;
});

// 적 폭발 체크 및 리스폰
function checkEnemyHit() {
    for (let ei = 0; ei < enemies.length; ei++) {
        let enemy = enemies[ei];
        if (!enemy.alive) continue;
        for (let i = bullets.length - 1; i >= 0; i--) {
            const b = bullets[i];
            const dx = b.x - enemy.x;
            const dy = b.y - enemy.y;
            if (dx * dx + dy * dy < 28 * 28) {
                explosions.push({ x: enemy.x, y: enemy.y, life: 0, maxLife: 20 });
                enemy.alive = false;
                bullets.splice(i, 1);
                break;
            }
        }
    }
    
    // 모든 적이 죽었는지 확인
    if (enemies.every(e => !e.alive)) {
        enemies = []; // 죽은 적들 제거
        setTimeout(spawnEnemies, 700); // 0.7초 후 새 적들 생성
    }
}

// 적 여러 대 등장 함수
let gameStage = 0; // 게임 진행 단계 추가

// spawnEnemies 함수 수정
function spawnEnemies() {
    // 적이 하나도 없을 때만 새로 생성
    if (enemies.length === 0) {
        const count = Math.floor(Math.random() * 3) + 1; // 1~3대 랜덤
        for (let i = 0; i < count; i++) {
            enemies.push({
                x: Math.random() * (canvas.width - 80) + 40,
                y: -40 - (i * 60), // 겹치지 않게 간격을 두고 등장
                angle: Math.random() * Math.PI * 2,
                timer: 0,
                alive: true,
                pattern: Math.floor(Math.random() * 4),
                lastShot: 0
            });
        }
    }
}

// 적 업데이트 함수
function updateEnemies(delta = 1) {
    for (let enemy of enemies) {
        if (!enemy.alive) continue;
        
        // 등장 애니메이션
        if (enemy.y < 100) {
            enemy.y += 2 * delta;
            if (enemy.y > 100) enemy.y = 100;
        } else {
            // 부드러운 좌우 이동
            enemy.angle += 0.02 * delta;
            // 목표 x좌표 계산
            const newTargetX = canvas.width/2 + Math.sin(enemy.angle) * 180;
            // 현재 위치에서 목표 위치로 부드럽게 이동
            enemy.x += (newTargetX - enemy.x) * 0.03 * delta;
        }
        enemy.timer += delta;
                    
        console.log(enemyBullets.length);
        // 패턴에 따라 한 가지 탄막만 발사
        switch(enemy.pattern) {
            case 0: // 원형 탄막 - 간격 절반으로
                if (enemy.timer - enemy.lastShot >= 50) { // 100 -> 50
                    enemy.lastShot = enemy.timer;
                    const bulletCount = Math.min(8, 4 + Math.floor(enemy.timer / 300));
                    for (let i=0; i<bulletCount; i++) {
                        const angle = (Math.PI*2/bulletCount)*i + enemy.angle;
                        enemyBullets.push({
                            x: enemy.x,
                            y: enemy.y,
                            angle: angle,
                            speed: 3
                        });
                    }
                }
                break;

            case 1: // 나선형 탄막 - 간격 절반으로
                if (enemy.timer - enemy.lastShot >= 6) { // 12 -> 6
                    enemy.lastShot = enemy.timer;
                    const spiralAngle = enemy.angle + enemy.timer * 0.15;
                    enemyBullets.push({
                        x: enemy.x,
                        y: enemy.y,
                        angle: spiralAngle,
                        speed: 2.5 + Math.min(0.5, enemy.timer / 300)
                    });
                }
                break;

            case 2: // 플레이어 추적 탄 - 간격 절반으로
                if (enemy.timer % 50 === 0 && player.alive) { // 100 -> 50
                    const dx = player.x - enemy.x;
                    const dy = player.y - enemy.y;
                    const baseAngle = Math.atan2(dy, dx);
                    const spreadCount = enemy.timer > 300 ? 3 : 1;
                    for (let i = -(spreadCount-1)/2; i <= (spreadCount-1)/2; i++) {
                        enemyBullets.push({
                            x: enemy.x,
                            y: enemy.y,
                            angle: baseAngle + i * Math.PI/16,
                            speed: 3
                        });
                    }
                }
                break;

            case 3: // 부채꼴 패턴 - 간격 절반으로
                if (enemy.timer % 75 === 0) { // 150 -> 75
                    const bulletCount = enemy.timer > 300 ? 5 : 3;
                    for (let i=0; i<bulletCount; i++) {
                        const angle = Math.PI/2 + (i-(bulletCount-1)/2)*Math.PI/10;
                        enemyBullets.push({
                            x: enemy.x,
                            y: enemy.y,
                            angle: angle,
                            speed: 2.5
                        });
                    }
                }
                break;
        }
    }
}

function drawBackground() {
    // 하늘 그라데이션
    const grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
    grad.addColorStop(0, "#222");
    grad.addColorStop(1, "#335");
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 별 랜덤 배치 (고정된 seed로 반복)
    ctx.save();
    ctx.globalAlpha = 0.5;
    for (let i = 0; i < 80; i++) {
        const x = (i * 53) % canvas.width;
        const y = (i * 97) % canvas.height;
        ctx.beginPath();
        ctx.arc(x, y, Math.random() * 1.5 + 0.5, 0, Math.PI * 2);
        ctx.fillStyle = "#fff";
        ctx.fill();
    }
    ctx.restore();

    // 구름
    ctx.save();
    ctx.globalAlpha = 0.15;
    for (let i = 0; i < 4; i++) {
        const cx = ((Date.now()/30 + i*200) % (canvas.width+200)) - 100;
        const cy = 80 + i*70;
        ctx.beginPath();
        ctx.ellipse(cx, cy, 60, 18, 0, 0, Math.PI*2);
        ctx.fillStyle = "#fff";
        ctx.fill();
    }
    ctx.restore();
}

let lastTime = performance.now();
function gameLoop(now = performance.now()) {
    const deltaTime = (now - lastTime) / 16.67;
    lastTime = now;

    drawBackground();

    if (player.alive) {
        // 적 스폰 로직 추가
        if (Date.now() - lastSpawnTime >= ENEMY_SPAWN_INTERVAL && enemies.length < MAX_ENEMIES) {
            enemies.push({
                x: Math.random() * (canvas.width - 80) + 40,
                y: -40,
                angle: Math.random() * Math.PI * 2,
                timer: 0,
                alive: true,
                pattern: Math.floor(Math.random() * 4),
                lastShot: 0
            });
            lastSpawnTime = Date.now();
        }

        updatePlayer(deltaTime);
        updateBullets(deltaTime);
        updateEnemies(deltaTime);
        updateEnemyBullets(deltaTime);
        checkCollision();
        checkEnemyHit();
        survivedTime = Math.floor((Date.now() - startTime) / 1000);
    }

    // 여러 적 그리기
    for (let enemy of enemies) drawEnemy(enemy);
    drawExplosions();
    drawPlayer();
    drawBullets();
    drawEnemyBullets();

    // 회피 시간 표시
    ctx.fillStyle = "#fff";
    ctx.font = "20px sans-serif";
    ctx.textAlign = "left";
    ctx.fillText(`회피 시간: ${survivedTime}초`, 20, 36);

    if (!player.alive) {
        showGameOver = true;
        ctx.fillStyle = "#fff";
        ctx.font = "32px sans-serif";
        ctx.textAlign = "center";
        ctx.fillText("Game Over", canvas.width/2, canvas.height/2 - 30);
        ctx.font = "24px sans-serif";
        ctx.fillText(`최종 점수(생존 시간): ${survivedTime}초`, canvas.width/2, canvas.height/2 + 10);
        ctx.font = "20px sans-serif";
        ctx.fillText("다시 시작: R 키", canvas.width/2, canvas.height/2 + 50);
    }

    requestAnimationFrame(gameLoop);
}

// 게임 시작 및 재시작 시 적 여러 대 등장
function restartGame() {
    player.x = canvas.width / 2;
    player.y = canvas.height - 60;
    player.alive = true;
    bullets.length = 0;
    enemyBullets.length = 0;
    explosions.length = 0;
    startTime = Date.now();
    survivedTime = 0;
    showGameOver = false;
    gameStage = 0; // 게임 재시작시 스테이지 초기화
    lastSpawnTime = Date.now();
    spawnEnemies();
}

// 최초 시작 시 적 여러 대 등장
spawnEnemies();
gameLoop();

// 효과음 함수 추가
let audioContext;
function playShootSound() {
    if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
    }
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();

    oscillator.type = 'square';
    oscillator.frequency.setValueAtTime(900, audioContext.currentTime);
    oscillator.frequency.linearRampToValueAtTime(300, audioContext.currentTime + 0.08);

    gainNode.gain.setValueAtTime(0.18, audioContext.currentTime);
    gainNode.gain.linearRampToValueAtTime(0.01, audioContext.currentTime + 0.09);

    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);

    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + 0.09);
}
</script>

비행기겜

2025. 5. 28. 오후 4:51:09