试图在组件与对象碰撞时隐藏组件

时间:2018-11-18 14:05:46

标签: javascript

我正在遵循本指南: https://www.w3schools.com/graphics/game_intro.asp

我正在尝试做到这一点,所以当我的组件碰到一个对象时,图像就会改变。 现在,我对其进行了设置,以使两个图像完全重叠。当他们碰到一个物体时,将最上面的物体隐藏起来,但是它并没有消失。

     `function component(width, height, color, x, y, type) {
         this.type = type;
          if(type == "image" || type =="background") {
             this.image = new Image();
              this.image.src = color;
       }
            this.width = width;
            this.height = height;
            this.speedX = 0;
            this.speedY = 0;
            this.x = x;
            this.y = y;
            this.gravity = 0.05;
            this.gravitySpeed = 0;
         //draws the component
            this.update = function() {
            ctx = myGameArea.context;
               //accounting for the the component being the score and 
           the data being text.
           if(this.type == 'text'){
             ctx.font = this.width + ' ' + this.height;
             ctx.fillStyle = color;
             ctx.fillText(this.text, this.x, this.y);
                 } else if(type =='image' || type == 'background') {
                      ctx.drawImage(this.image, this.x, this.y, 
         this.width, this.height);
         if(type == 'background') {
            ctx.drawImage(this.image, this.x + this.width, this.y, 
           this.width, this.height)
               }
                  } else { //if it's not text draw the face icon.
                ctx.fillStyle = color;
              ctx.fillRect(this.x, this.y, this.width, this.height);
               }
                }

` 这就是我要用来使图像消失的东西

        function changeImage() {
         for(let z=0; z < myObstacles.length; z++){
         if(myGamePiece1.crashWith(myObstacles[z])){
             myGamePiece1.fillStyle = 'rgba(255,0,0,0)';

             }
               }
              }

我在这里调用此函数:

     function updateGameArea() {
       var x,height,gap, minHeight, maxHeight, minGap, maxGap;
        for(i = 0; i < myObstacles.length; i ++) {
         if(myGamePiece.crashWith(myObstacles[i])) {
           changeImage();
            myGameArea.stop();

这是github https://github.com/dhuang6/html-game--flappy-bird

谢谢您的帮助!

0 个答案:

没有答案