I am currently working on developing a simple web page embedded program using JavaScript. One of the tasks I am tackling involves creating a linked list of all active buttons displayed on the screen at any given time. However, I have encountered an issue where the program freezes when I try to iterate through a non-empty linked list.
Here is the section of code relevant to the problem:
document.addEventListener("click", (event) => {
if (seekButtons) {
if (!(activeButtons.isEmpty())) {
var runner = activeButtons.head;
/*
*
* This while loop seems to run endlessly if the activeButtons list contains items.
*
*/
while (runner) {
//this list should only contain buttons
console.log("a button! \n");
if (runner.element.isInside(mouseX, mouseY)) {
document.getElementById("fiddleText").innerHTML = ('clicked');
console.log("We are in the button! \n");
//This line doesn't seem to work as intended. It should move to the next item in the list (and exit the loop if it's the last item), but the loop runs indefinitely.
runner = runner.next;
}
}
}
}
});
I believe another set of eyes could help identify the reason why this code is not functioning correctly.
The linked list implementation code (not authored by me) appears as follows:
// Implementation of a LinkedList in JavaScript
class Node {
constructor(element) {
this.element = element;
this.next = null;
}
}
class LinkedList {
constructor() {
this.head = null;
this.size = 0;
}
// Additional methods implemented within the class
// ...
}
The main code section looks like this:
// Initialization of canvas elements and other variables
var canvas = document.getElementById("SnekGamCanvas");
var ctx = canvas.getContext("2d");
canvas.addEventListener('click', function () { }, false);
var px = canvas.width / 2;
var py = canvas.height / 2;
var snekColor = "#EC942D";
var clock = 0;
var mouseX = 0.5;
var mouseY = 0.5;
var activeButtons = new LinkedList();
var seekButtons = true;
// Definition of a class for clickable buttons
class clickButton {
// Functions and properties of the class
// ...
}
// Initialization of buttons and images
// ...
// Additional code for mouse interactions and game states
// ...
// Entry point for the game
function draw() {
clock += 1;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Game state logic
// ...
}
setInterval(draw, 10);
function setup() {
// Initialization of activeButtons list
// ...
gameState = 0;
}
// Other game state functions
// ...
// Display of canvas and additional functionality
// ...
Furthermore, the CSS and HTML files that I am utilizing for this project are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head content -->
<!-- ... -->
</head>
<body class="background_gradient">
<!-- HTML content -->
<!-- ... -->
</body>
</html>
Thank you for reviewing this information, and any insights or feedback would be greatly appreciated.