tslipa

s

Apr 23rd, 2021
594
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const PUZZLE_DIFFICULTY = 4;
  2. const PUZZLE_HOVER_TINT = "#deb906";
  3.  
  4. var _stage;
  5. var _canvas;
  6.  
  7. var _img;
  8. var _pieces;
  9. var _puzzleWidth;
  10. var _puzzleHeight;
  11. var _pieceWidth;
  12. var _pieceHeight;
  13. var _origPieceWidth;
  14. var _origPieceHeight;
  15. var _currentPiece;
  16. var _currentDropPiece;
  17.  
  18. var _mouse;
  19.  
  20. var _redImg;
  21. var _numOfRed;
  22.  
  23. var _zoom = 1;
  24.  
  25. function init() {
  26.     _img = new Image();
  27.     _img.addEventListener("load", onImage, false);
  28.     _img.src = "yoda.jpeg";
  29.  
  30.     _redImg = new Image();
  31.     _redImg.addEventListener("load", onImage, false);
  32.     _redImg.src = "red.png";
  33. }
  34.  
  35. function onImage(e) {
  36.     let ratio = _img.height / _img.width;
  37.     let tmpHeight = _img.height;
  38.     let tmpWidth = _img.width;
  39.  
  40.     if (screen.height - 50 < tmpHeight) {
  41.         tmpHeight = screen.height - 50;
  42.         tmpWidth = tmpHeight / ratio;
  43.     }
  44.     if (screen.width - 50 < tmpWidth) {
  45.         tmpWidth = screen.width - 50;
  46.         tmpHeight = tmpWidth * ratio;
  47.     }
  48.  
  49.     _zoom = tmpHeight / _img.height;
  50.  
  51.     _pieceWidth = Math.floor(tmpWidth / PUZZLE_DIFFICULTY);
  52.     _pieceHeight = Math.floor(tmpHeight / PUZZLE_DIFFICULTY);
  53.     _puzzleWidth = _pieceWidth * PUZZLE_DIFFICULTY;
  54.     _puzzleHeight = _pieceHeight * PUZZLE_DIFFICULTY;
  55.     _origPieceWidth = _pieceWidth / _zoom;
  56.     _origPieceHeight = _pieceHeight / _zoom;
  57.  
  58.     setCanvas();
  59.     initPuzzle();
  60. }
  61.  
  62. function setCanvas() {
  63.     _canvas = document.getElementById("canvas");
  64.     _stage = _canvas.getContext("2d");
  65.     _canvas.width = _puzzleWidth;
  66.     _canvas.height = _puzzleHeight;
  67.     _canvas.style.border = "1px solid black";
  68. }
  69.  
  70. function initPuzzle() {
  71.     _pieces = [];
  72.     _mouse = {x:0, y:0};
  73.     _currentPiece = null;
  74.     _currentDropPiece = null;
  75.     _stage.drawImage(_img, 0, 0, _puzzleWidth / _zoom, _puzzleHeight / _zoom, 0, 0, _puzzleWidth, _puzzleHeight);
  76.  
  77.     createTitle("Click to mix the image");
  78.     buildPieces();
  79. }
  80.  
  81. function createTitle(msg) {
  82.     _stage.fillStyle = "#000000";
  83.     _stage.globalAlpha = 0.4;
  84.     _stage.fillRect(100,_puzzleHeight - 40,_puzzleWidth - 200,40);
  85.     _stage.fillStyle = "#FFFFFF";
  86.     _stage.globalAlpha = 1;
  87.     _stage.textAlign = "center";
  88.     _stage.textBaseline = "middle";
  89.     _stage.font = "20px Arial";
  90.     _stage.fillText(msg,_puzzleWidth / 2,_puzzleHeight - 20);
  91. }
  92.  
  93. function buildPieces() {
  94.     var xPos = 0;
  95.     var yPos = 0;
  96.  
  97.     for (let i = 0; i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY; i++) {
  98.         let piece = {};
  99.         piece.sx = xPos / _zoom;
  100.         piece.sy = yPos / _zoom;
  101.         piece.xPos = xPos;
  102.         piece.yPos = yPos;
  103.         piece.red = false;
  104.         _pieces.push(piece);
  105.  
  106.         xPos += _pieceWidth;
  107.         if (xPos >= _puzzleWidth) {
  108.             xPos = 0;
  109.             yPos += _pieceHeight;
  110.         }
  111.     }
  112.  
  113.     document.onmousedown = shufflePuzzle;
  114. }
  115.  
  116. function shufflePuzzle() {
  117.     doShuffling();
  118.     _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
  119.  
  120.     for (let i = 0; i < _pieces.length; i++) {
  121.         let piece = _pieces[i];
  122.  
  123.         if (piece.red) {
  124.             _stage.drawImage(_redImg, 0, 0, _origPieceWidth, _origPieceHeight,
  125.                 piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
  126.         } else {
  127.             _stage.drawImage(_img, piece.sx, piece.sy, _origPieceWidth,
  128.                 _origPieceHeight, piece.xPos, piece.yPos, _pieceWidth,
  129.                 _pieceHeight);
  130.         }
  131.  
  132.         _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
  133.     }
  134.  
  135.     document.onmousedown = onPuzzleClick;
  136.     document.onmousemove = onPuzzleHover;
  137. }
  138.  
  139. function doShuffling() {
  140.     let currIndex = Math.floor(Math.random() * _pieces.length);
  141.  
  142.     for (let j = 0; j < 500; j++) {
  143.         let action = Math.floor(Math.random() * 4)
  144.  
  145.         let newX = _pieces[currIndex].xPos;
  146.         let newY = _pieces[currIndex].yPos;
  147.  
  148.         switch (action) {
  149.             case 0:
  150.                 newX += _pieceWidth;
  151.                 break;
  152.             case 1:
  153.                 newX -= _pieceWidth;
  154.                 break;
  155.             case 2:
  156.                 newY += _pieceHeight;
  157.                 break;
  158.             case 3:
  159.                 newY -= _pieceHeight;
  160.                 break;
  161.         }
  162.  
  163.         let newIndex = -1;
  164.  
  165.         for (let k = 0; k < _pieces.length; k++) {
  166.             if (_pieces[k].xPos === newX && _pieces[k].yPos === newY) {
  167.                 newIndex = k;
  168.                 break;
  169.             }
  170.         }
  171.  
  172.         if (newIndex !== -1) {
  173.             _pieces[newIndex].xPos = _pieces[currIndex].xPos;
  174.             _pieces[newIndex].yPos = _pieces[currIndex].yPos;
  175.             _pieces[currIndex].xPos = newX;
  176.             _pieces[currIndex].yPos = newY;
  177.         }
  178.     }
  179.  
  180.     let newX = _pieces[currIndex].xPos;
  181.     let newY = _pieces[currIndex].yPos;
  182.  
  183.     while (newX !== 0) {
  184.         newX -= _pieceWidth;
  185.         for (let k = 0; k < _pieces.length; k++) {
  186.             if (_pieces[k].xPos === newX && _pieces[k].yPos === newY) {
  187.                 _pieces[k].xPos = _pieces[currIndex].xPos;
  188.                 _pieces[k].yPos = _pieces[currIndex].yPos;
  189.                 _pieces[currIndex].xPos = newX;
  190.                 _pieces[currIndex].yPos = newY;
  191.                 break;
  192.             }
  193.         }
  194.     }
  195.  
  196.     while (newY !== 0) {
  197.         newY -= _pieceHeight;
  198.         for (let k = 0; k < _pieces.length; k++) {
  199.             if (_pieces[k].xPos === newX && _pieces[k].yPos === newY) {
  200.                 _pieces[k].xPos = _pieces[currIndex].xPos;
  201.                 _pieces[k].yPos = _pieces[currIndex].yPos;
  202.                 _pieces[currIndex].xPos = newX;
  203.                 _pieces[currIndex].yPos = newY;
  204.                 break;
  205.             }
  206.         }
  207.     }
  208.  
  209.     _pieces[currIndex].red = true;
  210.     _numOfRed = currIndex;
  211. }
  212.  
  213. function onPuzzleHover(e) {
  214.     resetPuzzleAndCheckWin();
  215.     if (e.layerX || e.layerX === 0){
  216.         _mouse.x = e.layerX - _canvas.offsetLeft;
  217.         _mouse.y = e.layerY - _canvas.offsetTop;
  218.     } else if (e.offsetX || e.offsetX === 0) {
  219.         _mouse.x = e.offsetX - _canvas.offsetLeft;
  220.         _mouse.y = e.offsetY - _canvas.offsetTop;
  221.     }
  222.     _currentPiece = checkPieceClicked();
  223.  
  224.     if (_currentPiece != null) {
  225.         _stage.clearRect(_currentPiece.xPos, _currentPiece.yPos,
  226.             _pieceWidth, _pieceHeight);
  227.         _stage.save();
  228.         _stage.globalAlpha = 0.9;
  229.         _stage.fillStyle = PUZZLE_HOVER_TINT;
  230.         _stage.fillRect(_currentPiece.xPos, _currentPiece.yPos,
  231.             _pieceWidth, _pieceHeight);
  232.         _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy,
  233.             _origPieceWidth, _origPieceHeight, _currentPiece.xPos,
  234.             _currentPiece.yPos, _pieceWidth, _pieceHeight);
  235.         _stage.restore();
  236.     }
  237. }
  238.  
  239. function onPuzzleClick(e) {
  240.     if (e.layerX || e.layerX === 0){
  241.         _mouse.x = e.layerX - _canvas.offsetLeft;
  242.         _mouse.y = e.layerY - _canvas.offsetTop;
  243.     } else if (e.offsetX || e.offsetX === 0) {
  244.         _mouse.x = e.offsetX - _canvas.offsetLeft;
  245.         _mouse.y = e.offsetY - _canvas.offsetTop;
  246.     }
  247.     _currentPiece = checkPieceClicked();
  248.  
  249.     if (_currentPiece != null) {
  250.         _stage.clearRect(_currentPiece.xPos, _currentPiece.yPos,
  251.             _pieceWidth, _pieceHeight);
  252.         _stage.save();
  253.         _stage.globalAlpha = 0.9;
  254.         _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy,
  255.             _origPieceWidth, _origPieceHeight, _mouse.x - (_pieceWidth / 2),
  256.             _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
  257.         _stage.restore();
  258.  
  259.         document.onmousemove = updatePuzzle;
  260.         document.onmouseup = pieceDropped;
  261.     }
  262. }
  263.  
  264. function checkPieceClicked() {
  265.     for (let i = 0; i < _pieces.length; i++) {
  266.         let piece = _pieces[i];
  267.         if (! (_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth)
  268.             || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight))) {
  269.             return checkIfPieceNeighbor(i);
  270.         }
  271.     }
  272.     return null;
  273. }
  274.  
  275. function checkIfPieceNeighbor(i) {
  276.     let currPiece = _pieces[i];
  277.     let redPiece = _pieces[_numOfRed];
  278.  
  279.     let downNeighbor = (redPiece.xPos === currPiece.xPos &&
  280.         redPiece.yPos === currPiece.yPos - _pieceHeight);
  281.     let upNeighbor = (redPiece.xPos === currPiece.xPos &&
  282.         redPiece.yPos === currPiece.yPos + _pieceHeight);
  283.     let leftNeighbor = (redPiece.xPos === currPiece.xPos -
  284.         _pieceWidth && redPiece.yPos === currPiece.yPos);
  285.     let rightNeighbor = (redPiece.xPos === currPiece.xPos +
  286.         _pieceWidth && redPiece.yPos === currPiece.yPos);
  287.  
  288.     if (downNeighbor || upNeighbor || leftNeighbor || rightNeighbor) {
  289.         return _pieces[i];
  290.     }
  291.     return null;
  292. }
  293.  
  294. function updatePuzzle(e){
  295.     _currentDropPiece = null;
  296.  
  297.     if (e.layerX || e.layerX === 0) {
  298.         _mouse.x = e.layerX - _canvas.offsetLeft;
  299.         _mouse.y = e.layerY - _canvas.offsetTop;
  300.     } else if (e.offsetX || e.offsetX === 0) {
  301.         _mouse.x = e.offsetX - _canvas.offsetLeft;
  302.         _mouse.y = e.offsetY - _canvas.offsetTop;
  303.     }
  304.  
  305.     _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
  306.  
  307.     let piece;
  308.     for (let i = 0; i < _pieces.length; i++) {
  309.         piece = _pieces[i];
  310.         if (piece === _currentPiece) {
  311.             continue;
  312.         } else if (piece.red) {
  313.             _stage.drawImage(_redImg, 0, 0, _origPieceWidth, _origPieceHeight,
  314.                 piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
  315.         } else {
  316.             _stage.drawImage(_img, piece.sx, piece.sy, _origPieceWidth,
  317.                 _origPieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
  318.         }
  319.  
  320.         _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth,_pieceHeight);
  321.  
  322.         if (_currentDropPiece == null) {
  323.             if (!(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth)
  324.                 || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight))) {
  325.                 _currentDropPiece = piece;
  326.             }
  327.         }
  328.     }
  329.  
  330.     _stage.save();
  331.     _stage.globalAlpha = 0.6;
  332.  
  333.     if (_currentPiece.red) {
  334.         _stage.drawImage(_redImg, 0, 0, _origPieceWidth, _origPieceHeight,
  335.             _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2),
  336.             _pieceWidth, _pieceHeight);
  337.     } else {
  338.         _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy,
  339.             _origPieceWidth, _origPieceHeight, _mouse.x - (_pieceWidth / 2),
  340.             _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
  341.     }
  342.  
  343.     _stage.restore();
  344.     _stage.strokeRect( _mouse.x - (_pieceWidth / 2),
  345.         _mouse.y - (_pieceHeight / 2), _pieceWidth,_pieceHeight);
  346. }
  347.  
  348. function pieceDropped(e) {
  349.     document.onmousemove = null;
  350.     document.onmouseup = null;
  351.  
  352.     if (_currentDropPiece != null && _currentDropPiece.red === true) {
  353.         let tmp = {xPos:_currentPiece.xPos, yPos:_currentPiece.yPos};
  354.         _currentPiece.xPos = _currentDropPiece.xPos;
  355.         _currentPiece.yPos = _currentDropPiece.yPos;
  356.         _currentDropPiece.xPos = tmp.xPos;
  357.         _currentDropPiece.yPos = tmp.yPos;
  358.     }
  359.  
  360.     resetPuzzleAndCheckWin();
  361. }
  362.  
  363. function resetPuzzleAndCheckWin() {
  364.     _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
  365.     let gameWin = true;
  366.  
  367.     for (let i = 0; i < _pieces.length; i++) {
  368.         let piece = _pieces[i];
  369.  
  370.         if (piece.red) {
  371.             _stage.drawImage(_redImg, 0, 0, _origPieceWidth,
  372.                 _origPieceHeight, piece.xPos, piece.yPos,
  373.                 _pieceWidth, _pieceHeight);
  374.         } else {
  375.             _stage.drawImage(_img, piece.sx, piece.sy,
  376.                 _origPieceWidth, _origPieceHeight, piece.xPos,
  377.                 piece.yPos, _pieceWidth, _pieceHeight);
  378.         }
  379.  
  380.         _stage.strokeRect(piece.xPos, piece.yPos,
  381.             _pieceWidth,_pieceHeight);
  382.  
  383.         if (piece.xPos !== piece.sx || piece.yPos !== piece.sy) {
  384.             gameWin = false;
  385.         }
  386.     }
  387.     if (gameWin) {
  388.         setTimeout(gameOver,500);
  389.     }
  390.  
  391.     document.onmousemove = onPuzzleHover;
  392. }
  393.  
  394. function gameOver() {
  395.     document.onmousedown = null;
  396.     document.onmousemove = null;
  397.     document.onmouseup = null;
  398.  
  399.     initPuzzle();
  400. }
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×