Javascript沖突（非沖突檢測）
[英]Javascript Collision (Not Collision Detection)
問題描述
我正在嘗試制作平台游戲，並且在過去的兩個星期中我一直在努力進行碰撞。 碰撞檢測可以正常工作，但是無論我如何嘗試，碰撞本身（例如，將玩家擋在瓷磚外面）都不起作用。 我嘗試查找如何執行此操作，但是我發現的只是如何執行檢測部分，而這已經完成了。 檢測到碰撞后該怎么辦？ 它是從頭開始編寫的，播放器是矩形的，瓷磚也是如此。 這是基本代碼：
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);
//}
}
注釋掉的代碼是失敗的嘗試。 未注釋的代碼是我能使其最接近工作的代碼。
1 個解決方案
解決方案1
0 2018-12-05 19:33:09
這是我進行的示例碰撞：
<!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 ax < bx + b.width && ax + a.width > bx && ay < by + b.height && ay + a.height > by; } //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進行碰撞檢測
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.