Question

您好我尝试通过绘制子弹来实施射击。我创建了功能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>

Answer 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);
    }

}

有一些奇怪的行为，并且有很多可以在这里改进和清理，但这应该让你走在正确的轨道上。

为了您将来的参考，如果您使用Chrome，请打开开发工具（CTRL / CMD + SHIFT + J），您可以看到错误：

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

这让我知道它在某处被覆盖了，因为我们知道它通常是CanvasRenderingContext2D的函数。

尝试用子弹实现射击

1 个答案: