Reputation: 69

Try to implement shooting by bullets

Hello I try to implement shooting by drawing bullets. I created function SHOOt and just called it from the keyboard detection condition.... However, when i press key to shoot everything is stopped and no shooting, no bullets....Whats happening?! Any help appreciated thanks.

<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>

Upvotes: 0

Answers (1)

Clint Powell

Reputation: 2398

In your shoot() function, you're setting fillRect to the parameters you're meaning to pass to 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);
    }

}

Has some weird behavior, and there's a lot that could be improved and cleaned up here, but this should get you on the right track.

And for your future reference, if you're using Chrome, open up the Dev Tools (CTRL/CMD + SHIFT + J) and you could see the error:

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

That clued me in to know it was getting overwritten somewhere, as we know it IS normally a function of the CanvasRenderingContext2D.

Upvotes: 1

Try to implement shooting by bullets

Answers (1)

Related Questions