There is such a game: https://github.com/moonbench/isometric-rpg?tab=readme-ov-file
Someone can tell me how to make it so that the movement is based on a mouse click where the cursor is pressed.
And in general, I just can’t figure out how to make a click on one of the tiles.
I don’t understand, the cursor is drawn on the canvas
, the coordinates are different.
The tiles are somehow drawn differently.
I’m trying to do this in the bind_mouse
function in the file js/core/engine.js
I tried to do this:
engine.canvas.addEventListener("click", function (event) {
//...
const rect = engine.canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
for (let i = 0; i < engine.ents.length; i++) {
const entity = engine.ents[i];
if (mouseX >= entity.x && mouseX <= entity.x + entity.width
&& mouseY >= entity.y && mouseY <= entity.y + entity.height) {
entity.showClickPoint = true;
}
}
//...
});
And so too:
engine.canvas.addEventListener("click", function (event) {
//...
const rect = engine.canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
for (let i = 0; i < engine.ents.length; i++) {
const entity = engine.ents[i];
const isoMouseX = (2 * mouseY + mouseX) / 2;
const isoMouseY = (2 * mouseY - mouseX) / 2;
if (isoMouseX >= -entity.width / 2 &&
isoMouseX <= entity.width / 2 &&
isoMouseY >= -entity.height / 2 &&
isoMouseY <= (entity.width / 4 - entity.z) - (-entity.width / 4 - entity.height / 2 - entity.z)) {
entity.showClickPoint = true;
}
}
//...
});
I added a method: setEntities
at engine
:
function setEntities(engine, entitys) {
if (!engine.ents) {
engine.ents = entitys;
}
}
Well, in the method: create
added:
engine.setEntities = function (entity) {
setEntities(engine, entity);
};
And in the main file, he wrote: game.engine.setEntities(entities);
Nothing works, how to do it right?
Can you explain please.
I need to find out which tile was clicked on, and somehow make the character move after the click, to the cursor where the tile was clicked.