Javascript 如何在这个香草JS TileMap游戏中改进碰撞检测?
我正在创建一个简单的基于JS canvas tile的游戏,我知道它需要对语法进行重构和更新,当我了解更多关于正在发生的事情时,我计划这样做 我已经动态地创建了瓷砖大小,我想这就是为什么我在挣扎。碰撞检测不精确,我很难让它更精确。。。精确地说,我的意思是,根据显示器的大小,碰撞不是撞到右边的墙,而是在它之前或之后 任何帮助/建议,或指向正确方向,将不胜感激Javascript 如何在这个香草JS TileMap游戏中改进碰撞检测?,javascript,html5-canvas,jstilemap,Javascript,Html5 Canvas,Jstilemap,我正在创建一个简单的基于JS canvas tile的游戏,我知道它需要对语法进行重构和更新,当我了解更多关于正在发生的事情时,我计划这样做 我已经动态地创建了瓷砖大小,我想这就是为什么我在挣扎。碰撞检测不精确,我很难让它更精确。。。精确地说,我的意思是,根据显示器的大小,碰撞不是撞到右边的墙,而是在它之前或之后 任何帮助/建议,或指向正确方向,将不胜感激 this.moveUp = function(){ if(this.y > gameCanvas.height / 8){
this.moveUp = function(){
if(this.y > gameCanvas.height / 8){
this.y -= 7;
}
};
this.moveDown = function(){
if(this.y < gameCanvas.height - map.tSizeY * 1.5){
this.y += 7;
}
};
this.moveLeft = function(){
if(this.x > gameCanvas.width / 8){
this.x -= 7;
}
};
this.moveRight = function(){
if(this.x < gameCanvas.width - map.tSizeX * 1.25){
this.x += 7;
}
}
this.moveUp=function(){
if(this.y>gameCanvas.height/8){
这个.y-=7;
}
};
this.moveDown=函数(){
if(this.ygameCanvas.width/8){
这个.x-=7;
}
};
this.moveRight=函数(){
if(this.x
Github回购:
设置球员接触墙壁边界的位置,而不是将该位置任意移动到相对于墙壁的未知位置 您还需要在计算中包括播放器的大小 我将假设
map.tSizeX
和map.tSizeY
是磁贴大小,玩家移动的量称为this.speed
(我在示例中添加了该量),玩家的大小this.sizeX
,this.sizeY
(我在下面的示例中也添加了该量)
例子
移动玩家,然后解决碰撞
// assuming x,y is player top left
this.sizeX = 7; // size of player
this.sizeY = 7;
this.speed = 4; // speed of player any value will do
this.move = function(moveX, moveY) {
const left = map.tSizeX;
const top = map.tSizeY;
const right = gameCanvas.width - map.tSizeX - this.sizeX; // Includes player size
const bottom = gameCanvas.height - map.tSizeY - this.sizeY; // Includes player size
this.x += moveX;
this.y += moveY;
if (this.x < left) { this.x = left }
else if (this.x > right) { this.x = right }
if (this.y < top) { this.y = top }
else if (this.y > bottom) { this.y = bottom }
}
// Best would be to call this.move from the location you call the following functions.
// eg where you have the call this.moveUp() replace with this.move(0, -this.speed);
// these are just here to make it compatible with any existing code.
this.moveUp = function() { this.move(0, -this.speed) }
this.moveDown = function() { this.move(0, this.speed) }
this.moveLeft = function() { this.move(-this.speed, 0) }
this.moveRight = function() { this.move(this.speed, 0) }
//假设x,y是左上角的播放器
this.sizeX=7;//玩家大小
this.sizeY=7;
该速度=4;//玩家的速度任何值都可以
this.move=函数(moveX,moveY){
const left=map.tSizeX;
const top=map.tSizeY;
const right=gameCanvas.width-map.tSizeX-this.sizeX;//包括玩家大小
const bottom=gameCanvas.height-map.tSizeY-this.sizeY;//包括玩家大小
这个.x+=moveX;
这个.y+=moveY;
如果(this.xright){this.x=right}
如果(this.ybottom){this.y=bottom}
}
//最好是调用this.move从您调用以下函数的位置开始。
//例如,调用this.moveUp()替换为this.move(0,-this.speed);
//这些只是为了使它与任何现有代码兼容。
this.moveUp=function(){this.move(0,-this.speed)}
this.moveDown=function(){this.move(0,this.speed)}
this.moveLeft=函数(){this.move(-this.speed,0)}
this.moveRight=function(){this.move(this.speed,0)}
似乎您应该舍入除法计算,只比较整数阈值。非常感谢!这实际上比我所做的更有意义,哈哈。我刚刚实现了上面的代码,工作完美无瑕我移除了移动,移动,等等。。。功能。当我调用'move()'时,我必须引用'newPlayer.speed'而不是'this.speed'。这是一个错误还是应该是错误?@MorganWalsh如何以及在哪里定义速度取决于你,这是你的风格而不是错误。JS中的错误是可抛出的,会停止执行,并将出现在dev tools->console中(F12可在大多数浏览器上打开dev tools)