我设法让碰撞在我的 javascript 游戏中起作用，但只有玩家的左上角发生碰撞。我已经尝试了十几种不同的方法来解决这个问题，但没有一个有效。
这是我的代码
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="576" height="512"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var source = new Image(548, 64);
source.src = "dungeon.jpg";
var FX = 0;
var FY = 0;
var BX = 0;
var BY = 0;
let dir = ""
let rightPressed = false;
let leftPressed = false;
let upPressed = false;
let downPressed = false;
var map = {
cols: 9,
rows: 8,
tsize: 64,
tiles: [
3, 2, 3, 2, 3, 2, 3, 3,3,
1, 1, 1, 1, 1, 1, 1, 1,1,
1, 1, 1, 1, 1, 1, 1, 1,1,
1, 1, 1, 1, 1, 1, 1, 1,1,
1, 1, 1, 1, 1, 1, 1, 1,1,
2, 2, 1, 2, 1, 1, 3, 3,3,
3, 2, 2, 2, 1, 3, 3, 3,3,
3, 3, 2, 2, 1, 3, 3, 3,3
],
getTile: function (col, row) {
return this.tiles[row * map.cols + col];
}
};
var player = {
x: 200,
y: 200,
dx: 0,
dy: 0,
size: 32
}
console.log("drawing tilemap");
console.clear();
ctx.font = "30px Arial";
ctx.fillText("nvm its not working", 10, 50);
draw_map();
draw_player();
function draw_map(){
ctx.fillStyle = "#ffffff"
ctx.fillRect(FX,FY,10,10);
for (var column = 0; column < map.cols; column++) {
for (var row = 0; row < map.rows; row++) {
const tile = map.getTile(column, row);
const x = column * map.tsize;
const y = row * map.tsize;
drawTile(tile, x, y);
}
}
}
function drawTile(tile,X,Y){
if (tile === 1){
ctx.fillStyle = "#34ed4d";
}
if (tile === 2){
ctx.fillStyle = "#fff291";
}
if (tile === 3){
ctx.fillStyle = "#9c9ea1";
}
}
function draw_player(){
ctx.fillStyle = "#fff200";
ctx.fillRect(player.x,player.y,32,32);
}
function keyDownHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
rightPressed = true;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
leftPressed = true;
}
if (e.key === "Up" || e.key === "ArrowUp"){
upPressed = true;
} else if(e.key === "Down" || e.key === "ArrowDown") {
downPressed = true;
}
}
function keyUpHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
rightPressed = false;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
leftPressed = false;
}
if (e.key === "Up" || e.key === "ArrowUp"){
upPressed = false;
} else if(e.key === "Down" || e.key === "ArrowDown") {
downPressed = false;
}
}
function loop() {
player.dx = 0;
player.dy = 0;
ctx.clearRect(0,0,512,512);
if (rightPressed){
FX = player.x + 2;
} else if (leftPressed){
FX = player.x - 2;
}
if (upPressed){
FY = player.y - 2;
} else if (downPressed){
FY = player.y + 2;
}
collisions();
draw_map();
draw_player();
}
function collisions(){
for (var column = 0; column < map.cols; column++) {
for (var row = 0; row < map.rows; row++) {
const tile = map.getTile(column, row);
const X = column * map.tsize;
const Y = row * map.tsize;
if(FX + 1 > X && FX < X+64 && FY + 1 > Y && FY < Y+64){
// ohhh my god collision
if(tile === 3||tile === 4||tile === 5||tile===6){
console.log("no sir you cant go there");
} else{
player.x = FX
player.y = FY
}
}
}
}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
setInterval(loop,10);
</script>
</body>
</html>
我试图让玩家在所有四个方面都发生碰撞，但无论我尝试什么，只有角落有效