如何讓我的遊戲中的玩家攔截畫布上的對象？

Question

我正在製作一個遊戲，玩家攔截掉落的物體，但我不知道該怎麼做。我已經有了創建可以通過鼠標移動的播放器的代碼，並且我已經隨機生成了掉落的物體。 下面是代碼：

(() => { 
 
    let canvas = document.getElementById("game"); 
 
    let game = canvas.getContext("2d"); 
 
    let lastTimestamp = 0; 
 
    let score = document.getElementById("playerScore"); 
 

 
    const FRAME_RATE = 60; 
 
    const FRAME_DURATION = 1000/FRAME_RATE; 
 

 
    let fallers = []; 
 

 
    const DEFAULT_DESCENT = 0.0003; // This is per millisecond. 
 
    let Faller = function (x, y, width, height, dx = 0, dy = 0, ax = 0, ay = DEFAULT_DESCENT) { 
 
     this.x = x; 
 
     this.y = y; 
 
     this.width = width; 
 
     this.height = height; 
 

 
     // Velocity. 
 
     this.dx = dx; 
 
     this.dy = dy; 
 

 
     // Acceleration. 
 
     this.ax = ax; 
 
     this.ay = ay; 
 
    }; 
 

 
    Faller.prototype.draw = function() { 
 
     game.fillStyle = "blue"; 
 
     game.fillRect(this.x, this.y, this.width, this.height); 
 
    }; 
 

 
    Faller.prototype.move = function (millisecondsElapsed) { 
 
     this.x += this.dx * millisecondsElapsed; 
 
     this.y += this.dy * millisecondsElapsed; 
 

 
     this.dx += this.ax * millisecondsElapsed; 
 
     this.dy += this.ay * millisecondsElapsed; 
 
    }; 
 

 
    const DEFAULT_PLAYER_WIDTH = 45; 
 
    const DEFAULT_PLAYER_HEIGHT = 15; 
 
    const DEFAULT_PLAYER_Y = canvas.height - DEFAULT_PLAYER_HEIGHT; 
 
    let Player = function (x, y = DEFAULT_PLAYER_Y, width = DEFAULT_PLAYER_WIDTH, height = DEFAULT_PLAYER_HEIGHT) { 
 
     this.x = x; 
 
     this.y = y; 
 
     this.width = width; 
 
     this.height = height; 
 
    }; 
 

 
    Player.prototype.draw = function() { 
 
     game.fillStyle = "darkred"; 
 
     game.beginPath(); 
 
     game.moveTo(this.x - this.width/2, this.y + this.height); 
 
     game.lineTo(this.x, this.y); 
 
     game.lineTo(this.x + this.width/2, this.y + this.height); 
 
     game.closePath(); 
 
     game.fill(); 
 
    }; 
 

 
    let player = new Player(canvas.width/2); 
 

 
    let draw = (millisecondsElapsed) => { 
 
     game.clearRect(0, 0, canvas.width, canvas.height); 
 

 
     fallers.forEach((faller) => { 
 
      faller.draw(); 
 
      faller.move(millisecondsElapsed); 
 
     }); 
 

 
     player.draw(); 
 

 
     // Remove fallers that have hit the ground. 
 
     fallers = fallers.filter((faller) => { 
 
      return faller.y < canvas.height; 
 
     }); 
 
    }; 
 

 
    // It is responsible for generating falling objects at random. 
 
    const MIN_WIDTH = 10; 
 
    const WIDTH_RANGE = 20; 
 
    const MIN_HEIGHT = 10; 
 
    const HEIGHT_RANGE = 20; 
 
    const MILLISECONDS_BETWEEN_FALLERS = 800; 
 

 
    let fallerGenerator; 
 
    let startFallerGenerator =() => { 
 
     fallerGenerator = setInterval(() => { 
 

 
      let fallerWidth = Math.floor(Math.random() * WIDTH_RANGE) + MIN_WIDTH; 
 
      fallers.push(new Faller(
 
       Math.floor(Math.random() * (canvas.width - fallerWidth)), 0, 
 
       fallerWidth, Math.floor(Math.random() * HEIGHT_RANGE) + MIN_HEIGHT 
 
      )); 
 
     }, MILLISECONDS_BETWEEN_FALLERS); 
 
    }; 
 

 
    let stopFallerGenerator =() => clearInterval(fallerGenerator); 
 

 
    // This section is responsible for moving the "player" around based on mouse movement 
 
    let setPlayerPositionBasedOnMouse = (event) => { 
 
     player.x = event.clientX/document.body.clientWidth * canvas.width; 
 
    }; 
 

 
    document.body.addEventListener("mouseenter", setPlayerPositionBasedOnMouse); 
 
    document.body.addEventListener("mousemove", setPlayerPositionBasedOnMouse); 
 

 
    let running = false; 
 
    let nextFrame = (timestamp) => { 
 
     if (!lastTimestamp) { 
 
      lastTimestamp = timestamp; 
 
     } 
 

 
     if (timestamp - lastTimestamp < FRAME_DURATION) { 
 
      if (running) { 
 
       window.requestAnimationFrame(nextFrame); 
 
      } 
 

 
      return; 
 
     } 
 

 
     draw(timestamp - lastTimestamp); 
 

 
     lastTimestamp = timestamp; 
 
     if (running) { 
 
      window.requestAnimationFrame(nextFrame); 
 
     } 
 
    }; 
 

 
    document.getElementById("start-button").addEventListener("click",() => { 
 
     running = true; 
 
     lastTimestamp = 0; 
 
     startFallerGenerator(); 
 
     window.requestAnimationFrame(nextFrame); 
 
    }); 
 

 
    document.getElementById("stop-button").addEventListener("click",() => { 
 
     stopFallerGenerator(); 
 
     running = false; 
 
    }); 
 
})();

canvas { 
 
    border: solid 1px gray; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 1024px; 
 
} 
 

 
p { 
 
    text-align: center; 
 
}

<!doctype html> 
 

 
<html> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>Undefined</title> 
 

 
    <link rel="stylesheet" href="falling.css"> 
 
    </head> 
 
    <body> 
 
    <h1>Not finished</h1> 
 
    <p> 
 
     <b>Score:</b> <span id="playerScore">0</span> 
 
    <canvas id="game" width="1024" height="536"> 
 
     Sorry, but you need a web browser that supports the 
 
     <code>canvas</code> element. 
 
    </canvas> 
 

 
    <p> 
 
     <button id="start-button">Start</button> 
 
     <button id="stop-button">Stop</button> 
 
    </p> 
 

 
    <script src="falling.js"></script> 
 
    </body> 
 
</html>

Answer 1

isCollision = false 
fallers.forEach((faller) => { 
    isCollision = isCollision || checkCollision(faller,player) 
    }); 
if (isCollision) { 
    //decide what you want to do here 
    //maybe you want to display the gameOver screen and return 
    //before drawing the fallers. 
} 
fallers.forEach((faller) => { 
     faller.draw(); 
     faller.move(millisecondsElapsed); 
    }); 

在checkCollision()決定你如何碰撞準確需要的人。它可能是absolute(player.x - faller.x) < delta對你來說足夠準確。如果輸掉的球員或球員有寬度，則需要檢查球員x的時間間隔是否與球員x的時間間隔重疊。另外請確保你也檢查高度。