I’m trying to learn Javascript by example. I have been working with a script example that creates a 3×3 slide puzzle if found online. I’ve been able to add a few features and bells and whistles, but I am stuck on what I thought would be easy. Once the user has solved the puzzle my script calls the function solvedIt() which displays the complete puzzle. What I want to do is replace the middle row of 3 tiles with 3 different images and have a smooth transition. I am able to simply replace the src, but even after reading very many other posts about transitioning images, I’m still stuck. It seems there may be 2 ways to solve my problem. One would be to somehow use and change the css class of each of the tiles. The other would be to somehow place the second images over the first ones by using their id and then call a css function to animate the change. I’d like to solve this without any libraries. Here are excerpts from the code I have:
html
<body>
<div>id="board"></div>
</body>
css
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #0c67ae;
}
#board {
width: 360px;
height: 360px;
background-color: lightblue;
border: 10px solid #0c67ae;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#board img {
width: 118px;
height: 118px;
border: 1px solid #0c67ae;
}
var rows = 3;
var columns = 3;
var currTile;
var otherTile; //blank tile
// var imgOrder = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
var imgOrder = ["4", "1", "3", "7", "2", "5", "8", "6", "9"];
window.onload = function() {
for (let r=0; r < rows; r++) {
for (let c=0; c < columns; c++) {
//<img id="0-0" src="1.jpg">
let tile = document.createElement("img");
tile.id = r.toString() + "-" + c.toString();
tile.src = "./" + src_dir + "/" + imgOrder.shift() + ".jpg";
//DRAG FUNCTIONALITY
tile.addEventListener("dragstart", dragStart); //click an image to drag
tile.addEventListener("dragover", dragOver); //moving image around while clicked
tile.addEventListener("dragenter", dragEnter); //dragging image onto another one
tile.addEventListener("dragleave", dragLeave); //dragged image leaving anohter image
tile.addEventListener("drop", dragDrop); //drag an image over another image, drop the image
tile.addEventListener("dragend", dragEnd); //after drag drop, swap the two tiles
// added mouse click handlers
tile.addEventListener("click", mouseClick); //
document.getElementById("board").append(tile);
}
}
} // end window.onload
function solvedIt() {
// replace 4.jpg, 5.jpg and 6.jpg with code1.jpg, code2.jpg and code3.jpg
// 4.jpg has id of '1-0', 5.jpg id='1-1' and 6.jpg='1-2'
let xTile = document.getElementById('1-0');
xTile.src="./"+src_dir+"/code1.jpg" ;
let xTile = document.getElementById('1-1');
xTile.src="./"+src_dir+"/code2.jpg" ;
let xTile = document.getElementById('1-2');
xTile.sr
}