Currently working on a JavaScript game that utilizes the drag and drop feature of HTML. The goal is to make randomly generated fruit images draggable and droppable onto a jelly image. When the dragged image matches a certain condition (e.g., when the number image array index == x and the fruit image index == y), it should be allowed to drop. To declare this conditional statement, I am retrieving values from the background image (i.e., if the background image of the number is x and the background image of the fruit is y). The code was functioning properly until I introduced a condition, and now the images won't display.
Edit: Attempted to use === instead of =, but still unresponsive.
Edit: After removing the semicolon in a comment, the rest of the code works fine. However, the drag and drop functionality is not responding.
Edit: Tried declaring variables for image URLs instead of using URLs directly in the on drop function, but drag and drop functionality remains non-functional.
// JavaScript code for handling number and fruit images
// Arrays for different images
var myNumber = new Array(9);
// Initialize number images
myNumber[0] = '1.png';
myNumber[1] = '2.png';
...
myNumber[8] = '9.png';
// URLs for number images
var numberImage1 = "url(" + numberAddress + myNumber[0] + ")";
var numberImage2 = "url(" + numberAddress + myNumber[1] + ")";
...
// Different fruit arrays for different conditions
var fruitCloudOne = new Array(15);
fruitCloudOne[0] = '3apple.png';
fruitCloudOne[1] = '3banana.png';
...
fruitCloudOne[14] = '8strawberry.png';
// URLs for fruit images
var apple3 = "url(" + fruit1Address + fruitCloudOne[0] + ")";
var banana3 = "url(" + fruit1Address + fruitCloudOne[1] + ")";
...
// Functions for refreshing and starting the game
function refreshFruits() {
// Refresh the fruit images
}
function startGame() {
// Start the game by displaying number and fruit images
}
// Drag and drop functionality
function dragOver(ev) {
// Drag over event handling
}
function dragStart(ev) {
// Drag start event handling
}
function onDrop(ev) {
// Drag and drop dropping event handling
}
// CSS code for styling
// Body CSS
body {
// CSS properties
}
// Other CSS classes and IDs
#background {
// CSS properties
}
#startGame {
// CSS properties
}
...
// HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" src="script.js"></script>
<title>This is an experiment.</title>
</head>
<body>
<button id="startGame" onclick="startGame()"></button>
<button id="refreshFruits" onclick="refreshFruits()"></button>
<div id="number"></div>
<div id="jelly" ondrop="onDrop(event)" ondragover="dragOver(event)"></div>
<div class="fruit" id="fruitCloud1">
<div id="fruit1" draggable="true" ondragstart="dragStart(event)"></div>
</div>
...
</body>
</html>