Click here for free DL of the app version that can save data.

No:37915

Easy puzzle solving game
Developer User17149｜Date and time 24/1/21 20:32:57
Build time 17.414 sec｜Game capacity 4.505KB｜

Script

لعبة حل الألغاز السهلة

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>لعبة حل الألغاز السهلة</title>
   <style>
     body { 
       text-align: center; 
       font-family: Arial, sans-serif; 
     }
     #game-container {
       margin-top: 100px;
     }
     #puzzle {
       width: 300px;
       height: 300px;
       border: 2px solid black;
       display: flex;
       flex-wrap: wrap;
       margin: 0 auto;
     }
     .piece {
       width: calc(100% / 3);
       height: 100px;
       display: flex;
       justify-content: center;
       align-items: center;
     }
     .selected {
       background-color: #81cfe0;
     }
     .solved {
       background-color: #6ad47a;
     }
   </style>
  </head>
  <body>
    <h1>لعبة حل الألغاز السهلة</h1>
    <div id="game-container">
      <div id="puzzle">
        <div class="piece"><img src="img/1.png" alt="Piece 1"></div>
        <div class="piece"><img src="img/2.png" alt="Piece 2"></div>
        <div class="piece"><img src="img/3.png" alt="Piece 3"></div>
        <div class="piece"><img src="img/4.png" alt="Piece 4"></div>
        <div class="piece"><img src="img/5.png" alt="Piece 5"></div>
        <div class="piece"><img src="img/6.png" alt="Piece 6"></div>
        <div class="piece"><img src="img/7.png" alt="Piece 7"></div>
        <div class="piece"><img src="img/8.png" alt="Piece 8"></div>
        <div class="piece empty"></div>
      </div>
      <button id="start-button">بدء اللعبة</button>
    </div>
  
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var startButton = document.getElementById('start-button');
        var puzzle = document.getElementById('puzzle');
        var pieces = puzzle.getElementsByClassName('piece');
        var emptyPiece = puzzle.getElementsByClassName('empty')[0];
        var selectedPiece = null;

var imageOrder = [1, 2, 3, 4, 5, 6, 7, 8];
        var shuffledOrder;

function shuffleArray(array) {
          var currentIndex = array.length;
          var temporaryValue, randomIndex;

while (currentIndex !== 0) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex--;

temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
          }

return array;
        }

function startGame() {
          startButton.disabled = true;
          puzzle.classList.remove('solved');
          shuffledOrder = shuffleArray(imageOrder.slice());
          emptyPiece.style.backgroundImage = '';

for (var i = 0; i < shuffledOrder.length; i++) {
            pieces[i].style.order = shuffledOrder[i];
            pieces[i].className = 'piece';
            pieces[i].style.backgroundImage = 'url(img/' + shuffledOrder[i] + '.png)';
          }
        }

function selectPiece(event) {
          var piece = event.target;

if (piece.className.includes('empty')) {
            return;
          }

if (selectedPiece === piece) {
            piece.classList.remove('selected');
            selectedPiece = null;
          } else {
            if (selectedPiece) {
              selectedPiece.classList.remove('selected');
            }
            piece.classList.add('selected');
            selectedPiece = piece;
          }
        }

function movePiece(event) {
          if (!selectedPiece || selectedPiece === event.target) {
            return;
          }

var selectedOrder = selectedPiece.style.order;
          var targetOrder = event.target.style.order;

selectedPiece.style.order = targetOrder;
          event.target.style.order = selectedOrder;

selectedPiece.classList.remove('selected');
          selectedPiece = null;

if (isPuzzleSolved()) {
            puzzle.classList.add('solved');
            startButton.disabled = false;
          }
        }

function isPuzzleSolved() {
          var currentOrder = Array.from(pieces).map(function(piece) {
            return piece.style.order;
          });

return currentOrder.join(',') === imageOrder.join(',');
        }

startButton.addEventListener('click', startGame);

for (var i = 0; i < pieces.length; i++) {
          pieces[i].addEventListener('click', selectPiece);
          pieces[i].addEventListener('click', movePiece);
        }
      });
    </script>
  </body>
</html>