HTML 슈팅 게임 코드! 도와주세요

조회수 571회

https://heekim0719.tistory.com/58

위 링크의 코드를 보고 슈팅게임 코드를 돌려보려 했는데 작동이 안 됩니다. script src="js/jquery-3.2.0.js" 때문인 것 같은데 어떻게 수정해야 할지 모르겠습니다.

도와주세요! ㅠㅠ


<!DOCTYPE html>
<html lang="en">
<head>
   <body>
    <meta charset="UTF-8">

    <title>햄스터 슈팅게임</title>

    <h3>햄스터 슈팅게임</h3>
    <canvas id="myCanvas" width="500" height="800"></canvas>

   <script>
      //햄스터가 해바라기씨를 쏘는 게임. 고양이 발에 맞으면 HP 감소.
   var canvas=document.querySelector("#myCanvas");
   var context=canvas.getContext("2d");

   var bg1Y=0;
   var bg2Y=-800; //배경이미지 Y좌표
   var count=0;
   var unitIndex=0;
   var unitX=250;
   var unitY=700;

   var bgImg=new Image();  //배경이미지 
   bgimg.src="Project/background.png";

   var unitImg=new Image();//햄스터 이미지
   unitImg.src="Project/hamster.png";

   var atkImg=new Image();//해바라기씨 이미지
   atkImg.src="Project/seed2.png";
   var atkList=[];

   var enemyImg1=new Image();//적(고양이발) 이미지
   var enemyImg2=new Image();
   var enemyImg3=new Image();
   enemyImg1.src="Project/attack1.png";
   enemyImg2.src="Project/attack2.png";
   enemyImg3.src="Project/attack3.png";
   var enemyImgs = [enemyImg3, enemyImg2, enemyImg1]
   var enemyList=[];

   var score=0;

   context.font="bold 20px sans-serif";
   context.fillStyle="black";



   var intervalId = setInterval(function(){
    count++;
    context.drawImage(bgImg, 0, bg1Y, 500, 800);
    context.drawImage(bgImg, 0, bg2Y, 500, 800);
      context.fillText("SCORE : "+score, 5, 20);

    for(var i=0; i<enemyList.length;i++){
    var temp=enemyList[i];
    context.drawImage(enemyImgs[temp.type], temp.x-50, temp.y-50, 100, 100);
   }

   for(var i=0; i<atkList.length;i++){
    var temp=atkList[i];
    context.drawImage(atkImg, temp.x-40, temp.y-40, 80, 80);
   }

   context.drawImage(unitImg, unitX-50, unitY-50, 100, 100);
   backScroll();
   unitAnimation();
   makeatk();
   moveatk();
   checkatk();
   makeEnemy();
   moveEnemy();
   checkEnemy();
   checkatkCollision();
   checkUnitCollision();
}, 20);

   function checkUnitCollision(){
      for(var i=0; i<enemyList.length;i++)
      {
         var temp=enemyList[i];

         var UnitDie = unitX > temp.x-50 && unitX < temp.x+50 && unitY > temp.y-50 && unitY < temp.y+50;
         if(UnitDie){
            clearInterval(intervalId);
         }
      }
   }
   function checkatkCollision(){
      for(var i=0; i<atkList.length;i++)
      {
         var atk=atkList[i];

         for(var j=0;j<enemyList.length;j++){
            var enemy=enemyList[j];

            var Shooted = atk.x > enemy.x-50 && atk.x < enemy.x+50 && atk.y > enemy.y-50 && atk.y > enemy.y+50;
            if(Shooted){
               atk.isDead=true;
               enemy.energy -= 50;

               if(enemy.energy <=0){
                  enemy.isDead=true;

                  if(enemy.type==0){
                     score+=10;
                  }
                  else if(enemy.type==1){
                     score += 20;
                  }
                  else if(enemy.type==3){
                     score += 30;
                  }
               }
            }
         }


         if(UnitDie){
            clearInterval(intervalId);
         }
      }
   }

   function makeEnemy(){
    var ranNum = Math.random()*200;
    var result = Math.floor(ranNum);
      if(result != 10){
         return;
      }
      var enemyX=[50, 150, 250, 350, 450];
      for (var i=0;i<5;i++){
         obj={};
         obj.x=enemyX[i];
         obj.y=-50;

         var result=Math.floor(Math.random()*2);
         obj.type=result;
         if(result==0){
            obj.energy=50;
         }
         else if (result==1){
            obj.energy=100;
         }
         obj.isDead=false;
         enemyList.push(obj);
      }
   }



   function moveEnemy(){
    for(var i=0; i<enemyList.length;i++){
    var temp=enemyList[i];
      temp.y=temp.y+5;
      if(temp.y>=840){
         temp.isDead=true;
      }
   }
   }

   function checkEnemy(){
      for(var i=enemyList.length-1;i>=0;i--){
         var temp=enemyList[i];
         if(temp.isDead){
            enemyList.splice(i, 1);
         }
      }
   }

   $("#myCanvas").on("mouseMove", function(e){
      unitX=e.offsetX;
   });

   function makeatk(){
      if(count%3!=0){
         return;
      }
      var obj={};
      obj.x=unitX;
      obj.y=unitY;
      obj.isDead=false;
      atkList.push(obj);
   }
   function moveatk(){
      for (var i=0;i<atkList.length;i++){
         var temp=atkList[i];
         temp.y=temp.y-10;
         if(temp.y<= -40){
            temp.isDead=true;
         }
      }
   }

   function checkatk(){
      for(var i=atkList.length-1;i>=0;i--){
         var temp = atkList[i];
         if(temp.isDead){
            atkList.splice(i, 1);
         }
      }
   }

   function unitAnimation(){
      if(count%8 !=0){
         return;
      }
      unitIndex++;
      if(unitIndex==2){
         unitIndex=0;
      }
   }

   function backScroll(){
      bg1Y +=5;
      bg2Y +=5;

      if(bg1Y >= 800){
         bg1Y = -800;
         bg2Y = 0;
      }

      if(bg2Y>= 800){
         bg2Y = -800;
         bg1Y = 0;
      }
   }

   </script>
</head>
</body>
</html>

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)