Question

我正在尝试制作平台游戏，并且在过去的两个星期中，我一直在努力进行碰撞。碰撞检测可以正常工作，但是无论我如何尝试，碰撞本身（例如，将玩家挡在瓷砖外面）都不起作用。我尝试查找如何执行此操作，但是我发现的只是如何执行检测部分，而这已经完成了。检测到碰撞后该怎么办？它是从头开始编写的，播放器是矩形的，瓷砖也是如此。这是基本代码：

df <- structure(list(Type = c("a", "b", "a", "b"), ID = c("1", "1", 
"1", "1"), Name = c("abc", "abc", "abc", "abc"), Time = c("2017-01-01 00:00:00", 
 "2017-01-01 00:01:00", "2017-01-01 00:02:00", "2017-01-01 00:03:00"
)), row.names = c(NA, -4L), class = "data.frame")

注释掉的代码是失败的尝试。未注释的代码是我能使其最接近使用的代码。

Answer 1

这是我进行的一次示例碰撞：

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

我制作的代码在击中盒子时使播放器完全停在了其轨迹上，但是当对象在另一个对象的两侧碰撞时，您可以创建单独的碰撞环境，并使用它们来检测碰撞。

希望这对您有所帮助！如果您对此代码有任何疑问，请问！（要运行代码段，您可能需要全屏显示并在画布内单击）

Javascript冲突（非冲突检测）

1 个答案: