tankwar

Running

App Files Files Community

cutechicken commited on Dec 2, 2024

Commit

0837df4

verified ·

1 Parent(s): f4d0847

Update index.html

Browse files

Files changed (1) hide show

index.html +74 -62

index.html CHANGED Viewed

@@ -102,8 +102,7 @@
         }
     </style>
 </head>
-<body>
-    <div id="instructions">
         Controls:<br>
         WASD - Move tank<br>
         Mouse - Aim<br>
@@ -116,7 +115,11 @@
     <button id="nextRound" class="button">Next Round</button>
     <button id="restart" class="button">Restart Game</button>
     <canvas id="gameCanvas"></canvas>
    <div id="shop" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.9); padding:20px; border-radius:10px; color:white; z-index:1000;">
     <h2>Tank Shop</h2>
     <div style="display:flex; gap:20px;">
@@ -201,11 +204,11 @@
         enemyImg.src = 'enemy.png';
         const bulletImg = new Image();  // APCR 총알 이미지
         bulletImg.src = 'apcr2.png';
-        // Audio setup
         const cannonSound = new Audio('firemn.ogg');
         const machinegunSound = new Audio('firemg.ogg');
         const enemyFireSound = new Audio('fireenemy.ogg');
-        const bgm = new Audio('BGM2.ogg');
         const countSound = new Audio('count.ogg');
         const deathSound = new Audio('death.ogg');
         bgm.loop = true;
@@ -847,81 +850,90 @@ function buyTank(tankImg, cost, tankId) {
     // UI 그리기
     ctx.fillStyle = 'white';
-    ctx.font = '24px Arial';
-    ctx.fillText(`Round ${currentRound}/10`, 10, 30);
-    ctx.fillText(`Gold: ${gold}`, 10, 60);
-    // 이펙트 그리기
 effects = effects.filter(effect => !effect.isExpired());
 effects.forEach(effect => {
     effect.update();  // 이펙트 위치 업데이트
     ctx.save();
     ctx.translate(effect.x, effect.y);
-    if(effect.type === 'fire') ctx.rotate(effect.angle);
     // bang.png는 1.5배 크게
     const size = effect.type === 'death' ? 75 : 42;  // death는 75px (1.5배), fire는 42px
-    ctx.drawImage(effect.img, -size/2, -size/2, size, size);
     ctx.restore();
 });
-    if(isCountingDown) {
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-    }
 }
-// drawGame 함수 밖으로 이동
 function gameLoop() {
-    updateGame();
-    drawGame();
-    requestAnimationFrame(gameLoop);
 }
-nextRoundBtn.addEventListener('click', () => {
-    currentRound++;
-    nextRoundBtn.style.display = 'none';
-    document.getElementById('shop').style.display = 'none';
-    initRound();
-});
-bossButton.addEventListener('click', startBossStage);
-restartBtn.addEventListener('click', () => {
-    currentRound = 1;
-    gameOver = false;
-    isBossStage = false;
-    gold = 0;
-    hasAPCR = false;  // APCR 초기화
-    hasBF109 = false; // BF109 초기화
-    hasJU87 = false;
-    supportUnits = []; // 지원 유닛 배열 초기화
-    restartBtn.style.display = 'none';
-    document.getElementById('winMessage').style.display = 'none';
-    document.getElementById('tank1').style.display = 'block';
-    document.getElementById('tank2').style.display = 'block';
-    document.getElementById('apcr').style.display = 'block';
-    document.getElementById('bf109').style.display = 'block'; // BF109 상점 아이템 다시 표시
-    playerImg.src = 'player.png';
-    bgm.src = 'BGM2.ogg';
-    bgm.play();
-    initRound();
-});
-Promise.all([
-    new Promise(resolve => backgroundImg.onload = resolve),
-    new Promise(resolve => playerImg.onload = resolve),
-    new Promise(resolve => enemyImg.onload = resolve)
-]).then(() => {
-    initRound();
-    gameLoop();
-    bgm.play();
-});
-window.addEventListener('resize', () => {
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
 });
    </script>
 </body>

         }
     </style>
 </head>
+ <div id="instructions">
         Controls:<br>
         WASD - Move tank<br>
         Mouse - Aim<br>
     <button id="nextRound" class="button">Next Round</button>
     <button id="restart" class="button">Restart Game</button>
     <canvas id="gameCanvas"></canvas>
+      <div id="titleScreen">
+      <h1>TANK WAR</h1>
+      <button id="startButton">START GAME</button>
+  </div>
    <div id="shop" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.9); padding:20px; border-radius:10px; color:white; z-index:1000;">
     <h2>Tank Shop</h2>
     <div style="display:flex; gap:20px;">
         enemyImg.src = 'enemy.png';
         const bulletImg = new Image();  // APCR 총알 이미지
         bulletImg.src = 'apcr2.png';
+                    // Audio setup
         const cannonSound = new Audio('firemn.ogg');
         const machinegunSound = new Audio('firemg.ogg');
         const enemyFireSound = new Audio('fireenemy.ogg');
+        let bgm = new Audio('title.ogg');  // 'title.ogg'로 초기화하고 let으로 선언
         const countSound = new Audio('count.ogg');
         const deathSound = new Audio('death.ogg');
         bgm.loop = true;
     // UI 그리기
     ctx.fillStyle = 'white';
+   ctx.font = '24px Arial';
+ctx.fillText(`Round ${currentRound}/10`, 10, 30);
+ctx.fillText(`Gold: ${gold}`, 10, 60);
+// 이펙트 그리기
 effects = effects.filter(effect => !effect.isExpired());
 effects.forEach(effect => {
     effect.update();  // 이펙트 위치 업데이트
     ctx.save();
     ctx.translate(effect.x, effect.y);
+    if (effect.type === 'fire') ctx.rotate(effect.angle);
     // bang.png는 1.5배 크게
     const size = effect.type === 'death' ? 75 : 42;  // death는 75px (1.5배), fire는 42px
+    ctx.drawImage(effect.img, -size / 2, -size / 2, size, size);
     ctx.restore();
 });
+if (isCountingDown) {
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
 }
 function gameLoop() {
+    if (!gameOver) {
+        updateGame();
+        drawGame();
+        requestAnimationFrame(gameLoop);
+    }
 }
+document.addEventListener('DOMContentLoaded', () => {
+    // DOM 요소 참조
+    const titleScreen = document.getElementById('titleScreen');
+    const startButton = document.getElementById('startButton');
+    const instructions = document.getElementById('instructions');
+    const weaponInfo = document.getElementById('weaponInfo');
+    const gameCanvas = document.getElementById('gameCanvas');
+    // 초기 상태
+    instructions.style.display = 'none';
+    weaponInfo.style.display = 'none';
+    gameCanvas.style.display = 'none';
+    // 디버깅용 확인 로그
+    console.log("DOM Loaded");
+    // 타이틀 음악 재생
+    bgm.play().catch(err => console.error("Error playing title music:", err));
+    // Start Button 클릭 이벤트
+    startButton.addEventListener('click', () => {
+        console.log("Start Button Clicked");
+        if (!titleScreen || !instructions || !weaponInfo || !gameCanvas) {
+            console.error("DOM elements not found");
+            return;
+        }
+        titleScreen.style.display = 'none';
+        instructions.style.display = 'block';
+        weaponInfo.style.display = 'block';
+        gameCanvas.style.display = 'block';
+        bgm.pause();
+        bgm.src = 'BGM2.ogg';
+        bgm.play().catch(err => console.error("Error playing game music:", err));
+        initRound();
+        gameLoop();
+    });
+    // 이미지 로드 확인
+    Promise.all([
+        new Promise(resolve => backgroundImg.onload = resolve),
+        new Promise(resolve => playerImg.onload = resolve),
+        new Promise(resolve => enemyImg.onload = resolve)
+    ]).then(() => {
+        console.log("Assets loaded successfully");
+    }).catch(err => console.error("Error loading assets:", err));
+    // 창 크기 변경 시 캔버스 크기 업데이트
+    window.addEventListener('resize', () => {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    });
 });
    </script>
 </body>