var isGameStarted = false; // Variable pour suivre si le jeu a démarré
var isMouseDown = false;
var container, startPoint;
function initializeGame() {
container = document.getElementById("first_div");
startPoint = document.getElementById("start");
document.getElementById("start").addEventListener("click", startGame);
startPoint.addEventListener("mousedown", function (event) {
isMouseDown = true;
// Store the initial mouse coordinates relative to the container
initialMouseX = event.clientX - container.offsetLeft;
initialMouseY = event.clientY - container.offsetTop;
// Store the initial position of the start element relative to the container
initialStartX = startPoint.offsetLeft;
initialStartY = startPoint.offsetTop;
// Prevent default to avoid unwanted text selection
event.preventDefault();
});
}
function startGame() {
isGameStarted = true;
// Ajoutez un écouteur d'événements pour suivre le mouvement de la souris sur l'ensemble du document
document.addEventListener("mousemove", moveStartPoint);
// Changez la couleur des éléments avec la classe "walls" en vert
var wallElements = document.getElementsByClassName("walls");
for (var i = 0; i < wallElements.length; i++) {
wallElements[i].style.backgroundColor = "green";
}
// Changez le texte de l'élément avec l'id "description"
var descriptionElement = document.getElementById("description");
descriptionElement.innerHTML = "<b>Trouver la sortie</b>";
}
function moveStartPoint(event) {
if (isGameStarted && isMouseDown) {
var mouseX = event.clientX - container.offsetLeft;
var mouseY = event.clientY - container.offsetTop;
// Calculate the new position of the start element directly under the cursor
var newStartX = mouseX - initialMouseX + initialStartX;
var newStartY = mouseY - initialMouseY + initialStartY;
// Check boundaries to keep the start element within the walls
var minX = 0;
var minY = 0;
var maxX = container.offsetWidth - startPoint.offsetWidth;
var maxY = container.offsetHeight - startPoint.offsetHeight;
newStartX = Math.max(minX, Math.min(newStartX, maxX));
newStartY = Math.max(minY, Math.min(newStartY, maxY));
// Update the position of the start element
startPoint.style.left = newStartX + "px";
startPoint.style.top = newStartY + "px";
checkCollisions();
}
}
document.getElementById("start").addEventListener("mousedown", function () {
isMouseDown = true;
});
document.addEventListener("mouseup", function () {
isMouseDown = false;
});
function checkCollision(element1, element2) {
var rect1 = element1.getBoundingClientRect();
var rect2 = element2.getBoundingClientRect();
return (
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
);
}
function checkCollisions() {
var startPoint = document.getElementById("start");
var wallElements = document.getElementsByClassName("walls");
for (var i = 0; i < wallElements.length; i++) {
if (checkCollision(startPoint, wallElements[i])) {
// Collision détectée, changer la couleur en rouge et le texte
wallElements[i].style.backgroundColor = "red";
var descriptionElement = document.getElementById("description");
descriptionElement.innerHTML = "<b>Désolé, vous avez perdu</b>";
isGameStarted = false; // Arrêter le jeu en cas de collision
document.removeEventListener("mousemove", moveStartPoint); // Supprimer l'écouteur d'événements de la souris
break; // Sortir de la boucle, car la collision a été détectée
}
}
}
// Appelez la fonction d'initialisation lors du chargement de la page
window.onload = initializeGame;
Hi guys, appreciate the help. I’m expecting to move the component S (start) with my cursor and to both move n the same direction at the same time. But when I click on the component, it deplaces under the cursor !! I don’t know how to fix it. Please help. the img shows exactly what the problem is.