brabra551
Coder
Hey,
I'm trying to make a ludo game that's responsive, I've managed to get the plateau to be working great but I'm stuck when it gets to register a click on a pawn.
Pawns are drown with images. Then I use the same coordinates as the image in my eventlistener and eventually they are not the same and even with offsets I can't get it to match the actual drawing coordinates on screen.
Here is the code :
I'm trying to make a ludo game that's responsive, I've managed to get the plateau to be working great but I'm stuck when it gets to register a click on a pawn.
Pawns are drown with images. Then I use the same coordinates as the image in my eventlistener and eventually they are not the same and even with offsets I can't get it to match the actual drawing coordinates on screen.
Here is the code :
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/jeu.css" type="text/css"/>
<title></title>
</head>
<body style="background-color:lightblue;">
<div class="plateau">
<canvas id="canvas_plateau" height="960" width="960" style="--size: calc(80vw - 20px); border:1px solid; height: var(--size); width: var(--size); margin-left: 10vW;">
</canvas>
<img id="plateau" height="960" width="960" src="./img/plateau" style="display:none;">
<img id="pion_rouge" height="50" width="50" src="./img/pion_rouge" style="display:none;">
<button class="direction" onclick="avant()"> <a> Avant</a> </button>
<button class="direction" onclick="arriere()"> <a>Arrière</a> </button>
</div>
</body>
<script type="text/javascript">
let POSES = [
[32.54,2.40],
[12,2.40],
[7.2,2.40],
[5.15,2.40],
[4.02,2.40],
[3.29,2.40],
[2.58,2.58],
[2.40,3.29],
[2.40,4.02],
[2.40,5.15],
[2.40,7.2],
[2.40,12],
[2.40,32.54],
[2,32.54],
[1.71,32.54],
[1.71,12],
[1.71,7.2],
[1.71,5.15],
[1.71,4.02],
[1.71,3.29],
[1.63,2.58],
[1.435,2.40],
[1.33,2.40],
[1.239,2.40],
[1.16,2.40],
[1.09,2.40],
[1.028,2.40],
[1.028,2],
[1.028,1.71],
[1.09,1.71],
[1.16,1.71],
[1.239,1.71],
[1.33,1.71],
[1.435,1.71],
[1.63,1.63],
[1.71,1.435],
[1.71,1.33],
[1.71,1.239],
[1.71,1.16],
[1.71,1.09],
[1.71,1.028],
[2,1.028],
[2.40,1.028],
[2.40,1.09],
[2.40,1.16],
[2.40,1.239],
[2.40,1.33],
[2.40,1.435],
[2.58,1.63],
[3.29,1.71],
[4.02,1.71],
[5.15,1.71],
[7.2,1.71],
[12,1.71],
[32.54,1.71],
[32.54,2],
];
const PLATEAU = document.getElementById("plateau");
const PION_ROUGE = document.getElementById("pion_rouge");
const c = document.getElementById("canvas_plateau");
const ctx = c.getContext("2d");
function redraw() {
ctx.clearRect(0, 0, c.width, c.height);
ctx.drawImage(PLATEAU, 0, 0, c.width, c.height);
ctx.drawImage(pion_test.img_pion, pion_test.posx, pion_test.posy, c.width/19, c.height/19); ctx.beginPath();
// ctx.arc(pion_test.posx+c.width/38, pion_test.posy+c.width/38, c.width/38, 0, Math.PI*2);
// ctx.lineWidth = 2;
// ctx.stroke();
}
let Pion = class {
constructor(img,index,team) {
this.img_pion = img;
switch (team) {
case "ROUGE":
this.position_montee = 55;
this.position_base = 1;
break;
case "VERT":
this.position_montee = 13;
this.position_base = 15;
break;
case "JAUNE":
this.position_montee = 27;
this.position_base = 29;
break;
case "BLEU":
this.position_montee = 41;
this.position_base = 43;
break;
default:
}
this.posx = c.width/POSES[this.position_base][0]-c.width/38;
this.posy = c.width/POSES[this.position_base][1]-c.width/38;
ctx.drawImage(this.img_pion, c.width/POSES[this.position_base][0]-c.width/38, c.height/POSES[this.position_base][1]-c.height/38, c.width/19, c.height/19);
}
avancer() {
this.position_base++;
this.posx = c.width/POSES[this.position_base][0]-c.width/38;
this.posy = c.width/POSES[this.position_base][1]-c.width/38;
redraw();
}
reculer() {
this.position_base--;
this.posx = c.width/POSES[this.position_base][0]-c.width/38;
this.posy = c.width/POSES[this.position_base][1]-c.width/38;
redraw();
}
}
window.onload = function() {
ctx.drawImage(PLATEAU, 0, 0, c.width, c.height);
pion_test = new Pion(PION_ROUGE,1,"ROUGE");
}
function avant() {
pion_test.avancer();
}
function arriere() {
pion_test.reculer();
}
c.addEventListener('click', function(event) {
var x = event.pageX - this.offsetLeft;
y = event.pageY - this.offsetTop;
var ca = Math.round(pion_test.posx-c.width/38);
var cb = Math.round(pion_test.posx+c.width/38);
var cc = Math.round(pion_test.posy-c.width/38);
var cd = Math.round(pion_test.posy+c.width/38);
console.log("Click coordinates :",x,y);
console.log("Pion clickable area :" ,ca,cb,cc,cd);
if (x >= ca && x <= cb && y >= cc && y <= cd) {
console.log("Pawn clicked");
}
}, false);
</script>
</html>
