Drag item & highlight legal move board game .

Bonjour,

Niveau javascript : débutant, phase d'apprentissage ^^

Voila, je suis complètement bloqué, je suis en train de créer un jeu de plateau tour par tour.

J'ai un plateau avec des cellules, des cellules " rock " qui bloque les déplacement, ainsi que des spawn aléatoire d'arme et des 2 joueurs chacun ayant une image. jusque là tout va bien.

Mon problème est le déplacement des joueurs, chaque joueur ne peut ce déplacer que de 3 cases maximum et en croix ( haut, bas, gauche, droite )

Le joueur doit pouvoir déplacer son avatar (image) avec la souris ( draggable ) et pouvoir voir les déplacements possibles.

Example : http://chessboardjs.com/examples#5003

Dans l' example, on peut voir que si l'on passe la souris sur les pions, les déplacement possibles apparaisse et on peut dragger ce dernier sur ces cases .

Cela fait depuis mardi que j'essaye de comprendre comment je peux réussir à reproduire ça et que je suis complètement largué. Evidemment j'ai cherché sur le net, beaucoup de tuto sont basé sur l HTML et les divs, sauf que je créer mon jeu 100% javascript donc aucune div, aucun élément html.


Si quelqu'un pourrait m'aider à résoudre mon problème, je suis même prêt à utiliser discord pour que l on puisse m'aider et que je comprendre. Ou au moins un indice ou un guide...

Voici mon code au propre.

var canvas;
var ctx;

var cells = [];
var widthRect = 80;

var rockW = 80;
var weapW = 80;
var playerW = 80;

var imgPlayer1 = new Image();
imgPlayer1.src = "Players/01.gif";
var imgPlayer2 = new Image();
imgPlayer2.src = "Players/02.gif";

// Img Weapons
var weaponStart = new Image();
weaponStart.src = "Weapons/hoe.png";
var weapon1 = new Image();
weapon1.src = "Weapons/axe.png";
var weapon2 = new Image();
weapon2.src = "Weapons/pickaxe.png";
var weapon3 = new Image();
weapon3.src = "Weapons/shield.png";
var weapon4 = new Image();
weapon4.src = "Weapons/sword.png";

var rockImg = new Image();
rockImg.src = "Rock/rock.png";


window.onload = function () {

init();

function init() {
canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 800;
canvas.style.border = "3px solid";
document.body.appendChild(canvas);
ctx = canvas.getContext("2d");
Game();
}

function Game() {

var board = new Board();
var player1 = new Player("Old Man", "punch", imgPlayer1, 100);
var player2 = new Player("Ninja", "punch", imgPlayer2, 100);

var currentPlayer = player1;
var isFinish = false;

board.grid();
board.rock();
board.spawnPlayer(player1,player2);
board.spawnWeapon();

this.start = function() {
while(!isFinish){
rndGame();
switchPlayer();
playersAlive();
}
endgame();
};

this.rndGame = function() {
currentPlayer.movePlayer;
};

this.switchPlayer = function (){
if(currentPlayer === player1)
currentPlayer === player2;
else currentPlayer === player1;
};

this.playersAlive = function (){
if (player1.isDead() || player2.isDead())
isFinish = true;
};

this.endgame = function (){
if(!player1.isDead()){
alert("Congratz Player 1, you win !");
} else {
alert("Congratz Player 2, you win !");
}
};
}


function Board() {

this.grid = function() {
cols = canvas.width / 80;
rows = canvas.height / 80;

for (var i = 0; i < cols; i++) {
cells[i] = [];
for (var j = 0; j < rows; j++) {
cells[i][j] = 0;

var x = i * widthRect;
var y = j * widthRect;

ctx.clearRect(x,y,widthRect,widthRect);
ctx.rect(x, y, widthRect, widthRect);
ctx.stroke();
}
}
}

this.rndFreeCell = function() {

var x, y;

while (true) {

x = Math.floor(Math.random() * cols);
y = Math.floor(Math.random() * rows);

if (cells[x][y] === 0) break;

}

return { x: x, y: y };
}


this.findTwoApart = function(dist) {
var c1, c2;

while (true) {

c1 = this.rndFreeCell();
c2 = this.rndFreeCell();

var dx = c1.x - c2.x;
var dy = c1.y - c2.y;

if (Math.sqrt(dx*dx + dy*dy) >= dist) break;
}
return [c1, c2];
}

this.rock = function() {

for (var r = 0; r < 15; r++) {
x = Math.floor(Math.random() * cols);
y = Math.floor(Math.random() * rows);

var cell = this.rndFreeCell();
ctx.drawImage(rockImg, cell.x * widthRect, cell.y * widthRect, rockW, rockW);
cells[cell.x][cell.y] = 4;

ctx.strokeStyle="black";
ctx.rect(cell.x * widthRect, cell.y * widthRect, 80,80);
ctx.stroke();

}
}

this.spwanPlayer = function(player1,player2) {
var two = this.findTwoApart(5);

ctx.drawImage(player1.picture, two[0].x * widthRect, two[0].y * widthRect, playerW, playerW);
cells[two[0].x][two[0].y] = 1;

ctx.drawImage(player2.picture, two[1].x * widthRect, two[1].y * widthRect, playerW, playerW);
cells[two[1].x][two[1].y] = 2;
}

this.spawnWeapon = function() {

for (var a = 0; a < 1; a++) {
x = Math.floor(Math.random() * cols);
y = Math.floor(Math.random() * rows);

var cell = this.rndFreeCell();
ctx.drawImage(weapon1, cell.x * widthRect, cell.y * widthRect, weapW, weapW);
cells[cell.x][cell.y] = 3;

}

for (var a = 0; a < 1; a++) {
x = Math.floor(Math.random() * cols);
y = Math.floor(Math.random() * rows);

var cell = this.rndFreeCell();
ctx.drawImage(weapon2, cell.x * widthRect, cell.y * widthRect, weapW, weapW);
cells[cell.x][cell.y] = 3;

}

for (var a = 0; a < 1; a++) {
x = Math.floor(Math.random() * cols);
y = Math.floor(Math.random() * rows);

var cell = this.rndFreeCell();
ctx.drawImage(weapon3, cell.x * widthRect, cell.y * widthRect, weapW, weapW);
cells[cell.x][cell.y] = 3;

}

for (var a = 0; a < 1; a++) {
x = Math.floor(Math.random() * cols);
y = Math.floor(Math.random() * rows);

var cell = this.rndFreeCell();
ctx.drawImage(weapon4, cell.x * widthRect, cell.y * widthRect, weapW, weapW);
cells[cell.x][cell.y] = 3;

}
}
}

function Player(name, weapon, picture, hp) {

this.name = name;
this.weapon = weapon;
this.hp = hp;
this.posture = "punch";
this.picture = picture;
this.movement = 3;
this.isDead = function(){
return this.hp <= 0;
}
}

function Weapon(name, damages, picture) {

this.name = name;
this.damages = damages;
this.picture = picture;
this.position = 0;

}


}