xxxxxxxxxx
124
let tileSize;
let positions = [];
let tiles = [];
let win = [];
let img;
let clickedIndex;
let moves = 0;
let itIsDone = false;
function preload() {
img = loadImage("Cosmonaut.png");
generatePositions(400, 400, 100);
}
function setup() {
createCanvas(400, 400);
img.resize(width, height);
background(img, 50);
for (let col = 0; col < width; col += tileSize) {
for (let row = 0; row < height; row += tileSize) {
noFill();
// create and image of a section of the source image
let tile = createImage(tileSize, tileSize);
if (col === width - tileSize && row === height - tileSize) {
tile.copy(img, row, col, tileSize, tileSize, 0, 0, tileSize, tileSize);
// posterize turns the last rectangle black
tile.filter(POSTERIZE);
// add the dark property to the object to check if the tile clicked is
// touching the empty tile
tile.dark = true;
} else {
tile.copy(img, row, col, tileSize, tileSize, 0, 0, tileSize, tileSize);
tile.dark = false;
}
// add the position to each tile object
tile.pos = tiles.length;
tiles.push(tile);
// image(tile, col, row);
}
}
// shuffle is a function from p5js
tiles = shuffle(tiles);
}
function draw() {
for (let i = 0; i < tiles.length; i++) {
image(tiles[i], positions[i][0], positions[i][1]);
}
if (itIsDone) {
let movesDiv = createDiv();
movesDiv.html(`Took you ${moves} moves to solve the puzzle`);
movesDiv.style("font-size", "26px");
movesDiv.position(10, 410);
}
}
function mousePressed() {
let sX = floor(mouseX / tileSize);
let sY = floor(mouseY / tileSize);
// get the index of the clicked tile
ind = getThatIndex(sX, sY);
// go over the different combinations of tiles surrounding and empty tile
// and swap them
if (tiles[ind + 1] && tiles[ind + 1].dark) {
[tiles[ind], tiles[ind + 1]] = [tiles[ind + 1], tiles[ind]];
}
if (tiles[ind - 1] && tiles[ind - 1].dark) {
[tiles[ind], tiles[ind - 1]] = [tiles[ind - 1], tiles[ind]];
}
if (tiles[ind + 4] && tiles[ind + 4].dark) {
[tiles[ind], tiles[ind + 4]] = [tiles[ind + 4], tiles[ind]];
}
if (tiles[ind - 4] && tiles[ind - 4].dark) {
[tiles[ind], tiles[ind - 4]] = [tiles[ind - 4], tiles[ind]];
}
// check if the puzzle is solved
done();
}
// width, height, tileSize
function generatePositions(w, h, s) {
tileSize = s;
let count = 0;
// generate the positions array
for (let col = 0; col < w; col += s) {
for (let row = 0; row < h; row += s) {
let arr = [row, col];
positions.push(arr);
win.push(count);
count++;
}
}
}
function getThatIndex(itemOneInSubArray, itemTwoInSubArray) {
// convert items in the positions array to strings
let mainArrayString = positions.map((i) => JSON.stringify(i));
// find the target tile and convert it to a string
let target = [itemOneInSubArray * 100, itemTwoInSubArray * 100];
let targetString = JSON.stringify(target);
// use indexOf to fin the index of the selected tile
let foundIndex = mainArrayString.indexOf(targetString);
return foundIndex;
}
function done() {
// create array with the positions of the current shuffled array
let indy = tiles.map((i) => i.pos);
// compare the two arrays as strings
if (JSON.stringify(indy) === JSON.stringify(win)) {
print("yay!!!");
itIsDone = true;
} else {
moves++;
print("not yet");
}
}