2014-02-06 12 views
0

안녕하세요 글 머리 기호를 그리는 방법으로 촬영을 구현하려고합니다. 나는 함수 SHOOT를 생성하고 키보드 감지 조건에서 호출했습니다 .... 그러나 모든 것을 촬영하기 위해 키를 누르면 촬영이 멈추고 총알이 생기지 않습니다 .... 무슨 일 이죠?! 어떤 도움 감사 감사.글 머리 기호로 촬영을 시도하십시오

<html> 
    <head> 
    <title>Spaceman Invaders</title> 

    <script> 

    window.onload = function() { 
    var posx = 20; 
    var posy = 0; 
    var go_right = true; 
    var go_down = false; 

     var canvas = document.getElementById("screen"); 
     context = canvas.getContext("2d"); 
     context2 = canvas.getContext("2d"); 
     var Alien = function(x, y) { 
     this.x = x; 
     this.y = y; 
     this.posx = 30 + x*30; 
     this.posy = 90 + y*30; 
     this.go_right = true; 
     this.go_down = false; 
    } 


     function Player() { 
     this.x=0, this.y = 0, this.w = 20, this.h = 20; 
     this.render = function(){ 
      context.fillStyle = "orange"; 
      context.fillRect(this.x, this.y, this.w, this.h); 

     } 
     }     

     var X2=223; 
     var Y2=320; 

     function shoot(){ 
     context2.fillStyle = "white"; 
     context2.fillRect = (X2, Y2--, 5,10); 
     context2.fillStyle = "yellow"; 
     context2.fillRect = (X2, Y2, 5,10); 
     if (Y2>=0) { 
       timer=setTimeout("shoot()", 5); 
      } 

     } 

     var player = new Player(); 
    Alien.prototype.move = function() { 
      if (!this.go_down) { 
       if(this.posx + (2-this.x) * 30 < 250 && this.go_right) { 
        this.posx += 3; 
       } else if(this.posx < 30 + this.x*30) { 
        this.go_right = true; 
        this.go_down = true; 
       } else if(!this.go_right) { 
        this.posx -= 3; 
       } else { 
        this.go_right = false; 
        this.go_down = true; 
       } 
      } else { 
       //if(posy <= 30) 
       this.posy += 30; 
       this.go_down = false; 
      } 
    } 

    Alien.prototype.draw = function(context) { 
     if(this.x == 0) { 
      context.fillStyle = "red"; 
     } else if(this.x == 1) { 
      context.fillStyle = "yellow"; 
     } else { 
      context.fillStyle = "blue"; 
     } 
     context.beginPath(); 
     context.fillRect(this.posx, this.posy, 20 , 20); 
     context.fill(); 
    } 

     var canvas = document.getElementById("screen"); 
     context = canvas.getContext("2d"); 

     if (canvas.getContext) { 

      //init the aliens array 
      var aliens = []; 
      for(var i = 0; i < 3; i++) { 
       for(var j = 0; j < 3; j++) { 
        aliens.push(new Alien(j, i)); 
       } 
      } 

      player.x=100; 
      player.y= 480; 
      setInterval(function() { 
       context.fillStyle="black"; 
       context.fillRect(0,0,canvas.width, canvas.height); 
       /*context.fillStyle = "white"; 
       context.fillRect(100, 460, 30 , 30);*/ 

       player.render(); 

       //move all aliens & draw all aliens 
       for(var i = 0; i < 9; i++) { 
        aliens[i].move(), 
        aliens[i].draw(context); 
       } 
      }, 20); 
      document.addEventListener('keydown', function(event){ 
       var key_press = String.fromCharCode(event.keyCode); 
       // alert(event.keyCode + " | " + key_press); 
       if (key_press == "D") { 
         if (player.x >=(280)){ 
           player.x=(280); 
         } 
         else { 
          player.x +=3; 
         } 
         } else 
       if (key_press=="A"){ 
          if (player.x<0){ 
           player.x=(0); 
          } 
          else {player.x -=3;} 
         } else 
         if (key_press="W") { 
          //alert("Pah-pah"); 
          shoot(); 

         } 


      }); 
     } 

    }; 

    </script> 
    </head> 
    <body> 
    <canvas id="screen" width="300" height="500"/> 



    </body> 
</html> 
+0

처음에는'doctype' 태그가 있습니까? – Progo

+0

안돼 – user3247903

+0

이 시작 부분에 넣어 :'' – Progo

답변

1

shoot() 함수에서 fillRect를 fillRect()에 전달할 매개 변수로 설정합니다.

function shoot(){ 
    context2.fillStyle = "white"; 
    //context2.fillRect = (X2, Y2--, 5,10); -- This is a bad line. Correct: 
    context2.fillRect(X2, Y2--, 5,10); 
    context2.fillStyle = "yellow"; 
    //context2.fillRect = (X2, Y2, 5,10); -- This is a bad line. Correct: 
    context2.fillRect(X2, Y2, 5,10); 
    if (Y2>=0) { 
     timer=setTimeout("shoot()", 5); 
    } 

} 

이상한 행동이 있으며 여기에 개선되고 정리 될 수있는 내용이 많지만 올바른 길을 찾아야합니다.

그리고 당신의 미래를 참조

, 당신은 개발 도구 (CTRL/CMD + 시프트 + J)를 열고, 크롬을 사용하는 경우 당신은 오류가 볼 수 님 저를 흘려 주기도 그

Uncaught TypeError: Property 'fillRect' of object #<CanvasRenderingContext2D> is not a function 

을 그것이 CanvasRenderingContext2D의 함수라는 것을 알기 때문에, 어딘가에 덮어 씌워지고 있다는 것을 알아 두십시오.

+0

내 코드에서 차이가 보이지 않는다)))))))) – user3247903

+0

context2.fillRect 함수입니다. 현재 "촬영"기능에서 context2.fillRect에 새 값 (예 : (X2, Y2, 5,10))을 지정하고 있습니다. fillRect 함수를 재정의 (override)하기를 원하지 않는다면 fillRect에 이러한 매개 변수 (X2, Y2,5,10)를 다음과 같이 전달하고 싶습니다. context2.fillRect (X2, Y2, 5,10); –

+0

위의 주석 처리 된 줄은 원래 가지고 있던 줄이며 "수정"이라고 표시된 줄은 사용자가 수행해야하는 줄입니다. –

관련 문제