问Javascript冲突(不是冲突检测)
EN

Stack Overflow用户

提问于 2018-09-05 23:09:41

回答 1查看 116关注 0票数 1

我正在尝试制作一款平台游戏，在过去的两周里，我一直在研究碰撞。碰撞检测起作用了，但是碰撞本身(比如，让玩家远离图块)不起作用，不管我怎么试。我试着查找如何做这件事，但我发现的是如何做检测部分，我已经做过了。检测到冲突后该怎么办？它是从头开始写的，播放器是矩形的，瓷砖也是。下面是基本代码：

var Player = function(hue, x, y, xSize, ySize, health) {
    this.hue = hue;
    this.position = new PVector(x, y);
    this.originalPosition = new PVector(x, y);
    //this.previousPosition = new PVector(x, y);
    //this.ppp = new PVector(x, y);
    //this.virtualPosition = new PVector(x, y);
    //this.predictedPosition = new PVector(x, y);
    this.velocity = new PVector(0, 0);
    //this.predictedVelocity = new PVector(0, 0);
    this.acceleration = new PVector(0, 0);
}
/*Player.prototype.testCollision = function(tile) {
    if (this.predictedPosition.y < tile.position.y + tile.size.y && this.predictedPosition.y + this.size.y > tile.size.y && this.predictedPosition.x < tile.position.x + tile.size.x && this.predictedPosition.x + tile.size.x > tile.position.x) {
        return false;
    } else {
        return true;
    }
};*/
Player.prototype.ifColliding = function(tile) {
     if (this.position.x < tile.position.x + tile.size.x && this.position.x + tile.size.x > tile.position.x) {
        /*if (this.position.x + this.size.x > tile.position.x) {
            this.position.set(tile.position.x - this.size.x, this.position.y);
        } else if (this.position.x < tile.position.x + tile.size.x) {
            this.position.set(tile.position.x + tile.size.x, this.position.y);
        }*/
        this.velocity.set(0, this.velocity.y);
        //this.acceleration.set(0, this.acceleration.y);
        /*if (this.ppp.x < tile.position.x + tile.size.x && this.ppp.x + tile.size.x > tile.position.x) {
           if (this.ppp.x + this.size.x > tile.position.x) {
                this.position.set(tile.position.x - this.size.x, this.position.y);
            } else if (this.ppp.x < tile.position.x + tile.size.x) {
                this.position.set(tile.position.x + tile.size.x, this.position.y);
            } 
        } else if (this.previousPosition.x < tile.position.x + tile.size.x && this.previousPosition.x + tile.size.x > tile.position.x) {
            this.position.set(this.ppp.x, this.position.y);
        } else {
            this.position.set(this.previousPosition.x, this.position.y);
        }*/
    }
    if (this.position.y < tile.position.y + tile.size.y && this.position.y + this.size.y > tile.size.y) {
        this.velocity.set(this.velocity.x, 0);
        this.acceleration.set(this.acceleration.x, 0);
        this.yColliding = true;
        /*if (this.position.y + this.size.y > tile.position.y) {
            this.position.set(this.position.x, tile.position.y - this.size.y);
            rect(0, 20, 0, 0);
        } else if (this.position.y < tile.position.y + tile.size.y) {
            this.position.set(this.position.x, tile.position.y + tile.size.y);
            rect(20, 20, 0, 0);
        }*/
    }
}
Player.prototype.update = function(tiles) {
    //this.ppp.set(this.previousPosition.x, this.previousPosition.y);
    //this.previousPosition.set(this.position.x, this.position.y);
    this.velocity.add(this.acceleration);
    /*this.predictedVelocity.set(this.velocity.x, this.velocity.y);
    this.predictedVelocity.add(this.acceleration);
    this.virtualPosition.set(this.position.x, this.position.y);
    this.virtualPosition.add(this.velocity);
    this.predictedPosition.set(this.virtualPosition.x, this.virtualPosition.y);
    this.predictedPosition.add(this.predictedVelocity);
    var collDcted = false;
    for (var i = 0; i < tiles.length; i++) {
        if (this.testCollision(tiles[i], true) === false) {
             collDcted = false;
        }
    }*/
    //if (collDcted) {
    this.position.add(this.velocity);
    //}
}

注释掉的代码是失败的尝试。未注释的代码是我能让它工作的最接近的代码。

collision

javascript

回答 1

Stack Overflow用户

发布于 2018-12-06 03:33:10

这是我制作的一个碰撞示例：

<!DOCTYPE html>
<html>
    
    <body> 
        <p id="Health">Health</p>
<canvas id="gameCanvas" width="600" height="480" style = "border:1px solid gray"></canvas>
<script>
    // Adding keyboard evt listener
    document.addEventListener("keydown", keyPressed);
    document.addEventListener("keyup", keyReleased);
    
    //defining canvas
    var canvas;
    var canvasContext;
    
    //defining Player variables
    var PLAYER_X = 100;
    var PLAYER_Y = 100;
    var PLAYER_WIDTH = 20;
    var PLAYER_HEIGHT = 20;            
    var PLAYER_HEALTH = 100;
    
    //defining keypress codes
    var KEY_LEFT = 37;
    var KEY_RIGHT = 39;
    var KEY_UP = 38;
    var KEY_DOWN = 40;
    
    //variables used to test movement
    var keyHeld_Up = false;
    var keyHeld_Down = false;
    var keyHeld_Left = false;
    var keyHeld_Right = false;

    //Keypress?
    
      function keyPressed(evt) {
          
        if(evt.keyCode == KEY_UP) {          
            keyHeld_Up = true;
        }
          
        if(evt.keyCode == KEY_DOWN) {
 
            keyHeld_Down = true;
        }
          
        if(evt.keyCode == KEY_LEFT) {
          keyHeld_Left = true;
        }
          
        if(evt.keyCode == KEY_RIGHT) {
          keyHeld_Right = true;
        }
          
          //prevents page from scrolling when arrow keys are pressed
          evt.preventDefault();
      }
          
      //Key Released?   
    
      function keyReleased(evt) {
          
        if(evt.keyCode == KEY_UP) {          
            keyHeld_Up = false;
        }
          
        if(evt.keyCode == KEY_DOWN) {
 
            keyHeld_Down = false;
        }
          
        if(evt.keyCode == KEY_LEFT) {
          keyHeld_Left = false;
        }
          
        if(evt.keyCode == KEY_RIGHT) {
          keyHeld_Right = false;
        }
          
      }
    
    //Initialize Canvas and Game Loop
       
    window.onload = function() {
    console.log("Is this thing on?");
        canvas = document.getElementById('gameCanvas');
        canvasContext = canvas.getContext('2d');
        
        var framesPerSecond = 30;
        setInterval(function() {
            
            drawObjects();
            movePlayer();
            damageTest();
            
        }, 1000/framesPerSecond);
    
    }        
    
   // Drawing function 
    
   function colorRect(x,y, width,height, color, health) {
       this.width = width;
       this.height = height;
       this.x = x;
       this.y = y;
       this.color = color;
       this.health = health;
       
       this.update = function() {
           this.draw();
       }
       
       this.draw = function() {
          canvasContext.beginPath();
          canvasContext.rect(this.x, this.y, this.width, this.height);
          canvasContext.fillStyle = this.color;
          canvasContext.fill();
          canvasContext.closePath();
       }
    };
     
    // Creating Objects
    var Screen = new colorRect( 0, 0, 600, 480, 'black', 0);
    var Player = new colorRect( PLAYER_X, PLAYER_Y, PLAYER_WIDTH, PLAYER_HEIGHT, 'red', PLAYER_HEALTH);
    var Box = new colorRect( 200, 200, 30, 30, 'green', 0);
    var Spike = new colorRect( 300, 300, 25, 25, 'white', 0);

    // Drawing Objects
    
    function drawObjects() {
            Screen.update();
            Spike.update();
            Player.update();
            Box.update();
            
    }

    //Collision Test
    
    function collides( a, b ) {
     return a.x < b.x + b.width && 
            a.x + a.width > b.x &&
            a.y < b.y + b.height &&
            a.y + a.height > b.y;
    }

    //Movement based on keypress events
    
   function movePlayer() { 

      if(collides( Player, Box ) === false) {
         if(keyHeld_Up) {      
            Player.y -= 2;            
      }
       
       
          if(keyHeld_Down) {
             Player.y += 2;
      }
                    
          if(keyHeld_Left) {
             Player.x -= 2;
      }
             
          if(keyHeld_Right) {
             Player.x += 2;
      } 

      }
       
   

   }
    
    //Testing Collision for damage
    
    function damageTest() {
        
        if(collides( Player, Spike ) === true) {
            Player.health -= 1; 
        }
        
        //Displaying Health in <body>
        
        document.getElementById("Health").innerHTML = "Health: " + Player.health; 
    }
   
    

</script>
        

</body>

</html>

我写的代码在击中盒子时完全停止了玩家的轨迹，但是当物体在另一个物体的两侧碰撞时，你可以创建单独的碰撞环境，并使用这些环境来检测碰撞。

我希望这对你有帮助！如果你对这段代码有任何疑问，尽管问吧！(要运行代码片段，您可能需要全屏并在画布内单击)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52188419

复制

相似问题

问Javascript冲突(不是冲突检测)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript冲突(不是冲突检测)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript冲突(不是冲突检测)
EN