如何使游戲中的玩家攔截掉在畫布上的掉落物體？

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間隔重疊。 另外，請確保也檢查高度。

如何使游戲中的玩家攔截掉在畫布上的掉落物體？

問題描述

1 個解決方案

解決方案1
0 已采納 2016-12-07 21:08:31

如何使游戲中的玩家攔截掉在畫布上的掉落物體？

問題描述

1 個解決方案

解決方案1 0 已采納 2016-12-07 21:08:31

解決方案1
0 已采納 2016-12-07 21:08:31